suiss/ui
CLI
The @esuiss/ui command sets up your project and copies components, patterns, interactions, charts and blocks into it, for React, React Native, SwiftUI and Jetpack 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 |
|---|---|
-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 |
-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 |
-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 |
--diff | Show how your local files differ from the registry |
-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 |
-b, --base <base|radix|aria> | Primitive base of React components, read from the style in components.json when omitted, otherwise base |
-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 |
-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.
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 and time 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. --base overrides both, so pass it to every add in a project without a components.json:
The files, folders and names are the same for all three. See Installation.
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. Pass --path to choose another folder.
Missing npm packages are installed with your package manager: npm, pnpm, yarn or bun. 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.