suiss/ui
CLI
The @esuiss/ui command sets up your project and copies components, patterns, charts and blocks into it for React, React Native, SwiftUI and Compose.
Overview
@esuiss/ui runs with npx and is never installed in your project. It has two commands: init and add. It detects the project in the current folder: a Next.js or Vite app gets React components, an Expo or React Native app gets React Native components, an Xcode project or Swift package gets SwiftUI views and an Android Gradle module gets Jetpack Compose composables.
Registry CLI
Every React item is also published as a registry under the @esuiss namespace, so any project with a components.json can add it with the registry CLI instead. The item names are the same, without the group:
Files land in the same folders as below, icons follow the icon library in components.json, and the style there picks the primitive base. See Installation. Until the namespace is listed in the public registry directory, register it once as shown in Installation.
init
Sets up Tailwind CSS, the @/* import alias, the theme stylesheet, the font, the animation and variant stylesheets and the button component. See Installation for every step.
| Option | Description |
|---|---|
-o, --overwrite | Replace a local button that differs from the registry |
-y, --yes | Skip confirmation prompts |
-b, --base <base|radix|aria> | Primitive base of React components, read from the style in components.json when omitted, otherwise base. Saved as the style in components.json |
--style <name> | Visual style: suiss, vega, nova, maia, lyra, mira, luma, sera or rhea. For React it is saved as the style in components.json; for React Native, SwiftUI and Compose it picks the theme or tokens file |
--preset <code> | A preset code from Create: style, colors, radius, fonts, icon library and menus. React Native, SwiftUI and Compose apply it to their theme files; see Theming |
--theme suiss | Keep the suiss/ui colors when applying a preset |
--primary <color> | A custom primary color as hex (#2563eb), rgb(37 99 235) or oklch(0.55 0.2 260). Replaces the primary, its foreground (white or near-black, whichever contrasts more), the focus ring, the sidebar primary and ring, and chart-1 in light and dark, after any preset, on every platform |
--icon-library <name> | Icons of React Native, SwiftUI and Compose components: phosphor (the default), lucide, tabler, hugeicons or remixicon. Read from --preset or the installed icons file when omitted |
-p, --platform <web|rn|swift|kotlin> | Pick the platform when the folder holds more than one project |
-s, --styling <uniwind|nativewind|stylesheet> | React Native styling, detected from the project when omitted |
--path <dir> | Where SwiftUI or Compose files go, relative to the project |
-c, --cwd <dir> | Run in another project directory |
-h, --help | Show help for init |
-v, --version | Show the version |
add
Copies components into your project, together with the components and npm packages they depend on.
| Option | Description |
|---|---|
-o, --overwrite | Replace local files that differ from the registry, including the components they depend on |
--diff | Show how your local files differ from the registry, for every file --overwrite would replace |
-a, --all | Add every component except theme, or every pattern, interaction, chart or block with add patterns, add interactions, add charts or add blocks |
-y, --yes | Skip confirmation prompts and the pick list |
-b, --base <base|radix|aria> | Primitive base of React components, read from the style in components.json when omitted, otherwise base |
--style <name> | Visual style of React components, read from the style in components.json when omitted, otherwise suiss |
--icon-library <name> | Icons of React Native, SwiftUI and Compose components: phosphor (the default), lucide, tabler, hugeicons or remixicon. Read from --preset or the installed icons file when omitted |
-p, --platform <web|rn|swift|kotlin> | Pick the platform when the folder holds more than one project |
-s, --styling <uniwind|nativewind|stylesheet> | React Native styling, detected from the project when omitted |
--path <dir> | Where SwiftUI or Compose files go, relative to the project |
-c, --cwd <dir> | Run in another project directory |
-h, --help | Show help for add |
-v, --version | Show the version |
Pick from a list
Run add without names to pick from a list. Choose components, patterns, interactions, charts or blocks, type to filter, select with space and press enter. add patterns, or another group, without names opens the list for that group.
The groups work the same in React Native, SwiftUI and Jetpack Compose projects, and --all adds every item of the group. In SwiftUI and Jetpack Compose projects the list only shows what exists for that platform:
Outside an interactive terminal, such as in CI, add without names prints the available names instead.
Patterns
Patterns combine several components into one ready-made piece, such as a date picker. The components a pattern uses are added with it.
Interactions
Interactions add a behavior to something you already have, such as swiping a row to reveal actions. The components an interaction uses are added with it.
Charts
Charts are ready-made charts built on the chart component. The chart component and anything else a chart uses are added with it.
Blocks
Blocks are ready-made sections of a page built from the components. The components a block uses are added with it.
Primitive base
React components come with three primitive bases. init and add use the default base, base, unless the style in components.json is radix-*, new-york or default, which uses radix, or aria-*, which uses aria. init --base saves the base as the style in components.json, creating the file when needed, so later add runs use it. --base on add overrides it for that run:
The files, folders and names are the same for all three. See Installation.
Styles
Every platform comes in nine styles: suiss (the default), vega, nova, maia, lyra, mira, luma, sera and rhea. For React the style is the part of the style in components.json after the base, such as base-suiss or radix-nova; add writes components in that style, and the registry serves the same style to npx shadcn@latest add. For React Native, SwiftUI and Compose, init copies the theme or tokens file of the style:
Pick a style, colors, radius and icons on the Create page, then run the command it shows. init --preset applies the code and saves the style, iconLibrary and menuColor in components.json, so later add runs follow them. With --platform rn, swift or kotlin, init --preset writes the colors, radius, menu colors and fonts into the theme files instead. A preset whose theme is a different gray than its base color is rejected; use the base color itself or a colored theme.
Icon libraries
React components follow the iconLibrary in components.json. React Native, SwiftUI and Compose components ship with Phosphor and switch to another library when you pass --icon-library or a preset code:
The CLI rewrites the icon imports of every file it adds and writes one icons file next to the components. Later add runs read the library back from that file.
| Library | React Native | SwiftUI and Compose |
|---|---|---|
| Phosphor | phosphor-react-native | phosphor-icons/swift and com.adamglin:phosphor-icon-android |
| Lucide | lucide-react-native, wrapped in components/ui/icons.tsx | Generated from Lucide's SVG data |
| Tabler | @tabler/icons-react-native, wrapped in components/ui/icons.tsx | Generated from Tabler's SVG data |
| Hugeicons | @hugeicons/react-native with @hugeicons/core-free-icons | Generated from the free Hugeicons set |
| Remix | Paths drawn with react-native-svg in components/ui/icons.tsx | Generated from Remix's SVG data |
SwiftUI gets Icons/EsuissIcons.swift and Compose gets the icons/ package, holding only the icons the components use, so neither needs an icon package. Icon weights map to stroke widths, and fill uses the filled icon where the library has one.
Where files are written
Paths are relative to your @/* alias root.
| Kind | Directory |
|---|---|
| Components | components/ui/ |
| Hooks | hooks/ |
| Patterns | components/patterns/ |
| Interactions | components/interactions/ |
| Charts | components/charts/ |
| Blocks | components/blocks/ |
In React Native projects the same folders are used. SwiftUI files go to EsuissUI/, or to Sources/<Target>/EsuissUI/ in a Swift package, and Compose files go to src/main/kotlin/com/esuiss/ui/ in your app module. In a Swift package with several targets, pick the target from the list or pass --path. The CLI prints the folder it writes to, and --path chooses another one.
Missing npm packages are installed with your package manager: npm, pnpm, yarn or bun. The packageManager field in package.json decides, then the package manager that runs the CLI (pnpm dlx, yarn dlx or bunx), then the lockfile of the project or its workspace. In Expo projects they are installed with expo install, so native modules match the Expo SDK. The CLI never edits Xcode or Gradle files: it lists the Swift packages and Gradle dependencies a SwiftUI or Compose component needs.