# 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. Source: https://ui.suiss.app/docs/cli ## 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: ```bash title="Terminal" npx shadcn@latest add @esuiss/button npx shadcn@latest add @esuiss/date-picker @esuiss/area-chart-default ``` 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](https://ui.suiss.app/docs/installation#choose-the-primitive-base). Until the namespace is listed in the public registry directory, register it once as shown in [Installation](https://ui.suiss.app/docs/installation#register-the-namespace). ## init Sets up Tailwind CSS, the `@/*` import alias, the theme stylesheet, the font, the animation and variant stylesheets and the `button` component. See [Installation](https://ui.suiss.app/docs/installation) for every step. ```bash title="Terminal" npx @esuiss/ui@latest init [options] ``` | Option | Description | | --- | --- | | `-o, --overwrite` | Replace a local `button` that differs from the registry | | `-y, --yes` | Skip confirmation prompts | | `-b, --base ` | Primitive base of React components, read from the `style` in `components.json` when omitted, otherwise `base`. Saved as the `style` in `components.json` | | `-p, --platform ` | Pick the platform when the folder holds more than one project | | `-s, --styling ` | React Native styling, detected from the project when omitted | | `--path ` | Where SwiftUI or Compose files go, relative to the project | | `-c, --cwd ` | 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. ```bash title="Terminal" npx @esuiss/ui@latest add npx @esuiss/ui@latest add [options] npx @esuiss/ui@latest add patterns [options] npx @esuiss/ui@latest add interactions [options] npx @esuiss/ui@latest add charts [options] npx @esuiss/ui@latest add blocks [options] ``` | 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 ` | Primitive base of React components, read from the `style` in `components.json` when omitted, otherwise `base` | | `-p, --platform ` | Pick the platform when the folder holds more than one project | | `-s, --styling ` | React Native styling, detected from the project when omitted | | `--path ` | Where SwiftUI or Compose files go, relative to the project | | `-c, --cwd ` | 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. ```bash title="Terminal" npx @esuiss/ui@latest add npx @esuiss/ui@latest add patterns ``` 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: ```bash title="Terminal" npx @esuiss/ui@latest add --platform swift ``` 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. ```bash title="Terminal" npx @esuiss/ui add patterns date-picker npx @esuiss/ui add patterns --all ``` ### 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. ```bash title="Terminal" npx @esuiss/ui add interactions swipe-actions npx @esuiss/ui add interactions --all ``` ### Charts Charts are ready-made charts built on the `chart` component. The `chart` component and anything else a chart uses are added with it. ```bash title="Terminal" npx @esuiss/ui add charts npx @esuiss/ui add charts --all ``` ### Blocks Blocks are ready-made sections of a page built from the components. The components a block uses are added with it. ```bash title="Terminal" npx @esuiss/ui add blocks npx @esuiss/ui add blocks --all ``` > **Note:** Patterns, interactions, charts and blocks are optional extras. Neither `init` nor `add --all` adds them; add them by name, or all at once with `--all`. ## 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: ```bash title="Terminal" npx @esuiss/ui@latest init --base radix npx @esuiss/ui@latest add sidebar --base radix npx @esuiss/ui@latest init --base aria ``` The files, folders and names are the same for all three. See [Installation](https://ui.suiss.app/docs/installation#choose-the-primitive-base). ## 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//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.