Init Nocta UI
Bootstrap workspaces so they can consume and share Nocta UI components.
init bootstraps the current workspace so it can consume Nocta UI components. It analyses your project structure, writes nocta.config.json, ensures the repository manifest is updated, and prepares shared helpers. The command respects monorepo layouts and only creates files in the workspace that should own them.
npx @nocta-ui/cli init
# Preview without touching the filesystem
npx @nocta-ui/cli init --dry-runPrerequisites
- Node.js 18+ and an existing React project (Next.js, Vite + React, React Router 7, or TanStack Start). Custom apps are supported for shared UI workspaces.
- Tailwind CSS v4 declared (and installed when possible). The command aborts with guidance if v4 is missing.
- Network access to fetch the registry, helper assets, and CSS tokens.
- A clean or at least recoverable working tree -- the CLI performs partial rollback if something fails after writing files.
Command Options
| Flag | Description |
|---|---|
--dry-run | Reports every action (files, dependencies, manifest changes) without touching disk or running package managers. |
--help | Displays command-specific help. |
You can also point the CLI at a custom registry with --registry-url or NOCTA_REGISTRY_URL.
Interactive Prompts
init inspects your repository and asks extra questions only when needed:
- Workspace kind - If the repo looks like a monorepo and the current folder is not yet registered, choose between Application, Shared UI, or Library. Defaults are inferred from folder names (for example
packages/uibecomes Shared UI). - Workspace package name - In monorepos you can provide the npm workspace or package name so other commands can target it precisely. Leave blank to skip.
- Linked workspaces - When configuring an Application workspace inside a monorepo, link one or more existing Shared UI workspaces. Linked workspaces receive shared files and dependency updates when you later run
add.
Initialization Flow
- Existing config check - If
nocta.config.jsonalready exists, the command exits without touching anything. - Repository resolution - Detects the repo root, loads
nocta.workspace.json(creating it later if missing), and determines whether multiple workspaces exist. - Framework detection - Locates the supported framework. For Application workspaces the command aborts with a helpful message when the framework is unknown.
- Tailwind verification - Ensures Tailwind CSS v4 is declared or installed.
- Configuration synthesis - Builds a
nocta.config.jsontailored to the detected framework. The file includes:tailwind.cssentry where design tokens will be inserted.aliases.componentsandaliases.utilspointing at the default component and utility folders.aliasPrefixes(usually@,~for React Router).workspaceblock containing the workspace kind, root, package name, and any links you selected.
- Dependency handling - Reads the registry requirements (React, Tailwind helpers, Ariakit, and more) and only installs them when the current workspace manages its own dependencies. Application workspaces linked to a shared UI package skip these installs because the shared package already owns them.
- Helper assets - When the current workspace manages its own components, the CLI writes:
lib/utils.tswith the canonicalcn()helper.components/ui/icons.tswith the base icon map. Linked Application workspaces reuse the helpers from the shared UI package and therefore skip these files.
- Design tokens - Adds Nocta semantic color tokens to the configured Tailwind CSS file when the workspace manages its own components. Linked applications skip this step because the shared UI package already owns the tokens.
- Workspace manifest - Creates or updates
nocta.workspace.jsonat the repo root so other workspaces can discover this configuration. Package manager detection (npm, pnpm, yarn, bun) is stored here as well. - Summary - Prints a concise report including created files, dependency actions, and linked workspaces. Dry runs label each item as "would do".
Generated Files
nocta.config.json- Main project configuration (always written unless--dry-run).nocta.workspace.json- Repository manifest (created or updated once per repo).lib/utils.ts- Shared utility helper (skipped in linked application workspaces).components/ui/icons.ts- Base icons module (skipped in linked application workspaces).- Tailwind CSS entry file - Updated with Nocta design tokens.
All generated paths are made relative to the current workspace. Failures during execution trigger a rollback that deletes any newly created files.
Re-running the Command
Re-run init when you:
- Change framework routing structure (for example, move from Pages Router to App Router).
- Add or rename linked workspaces in a monorepo.
- Want to regenerate the config after manual edits.
Existing files are preserved: helper files are skipped when already present, and design tokens are only inserted once.
Troubleshooting
- Tailwind CSS v4 missing - Install or upgrade Tailwind, then run
initagain. - Unsupported framework detected - Ensure your project matches one of the supported setups or initialise the shared UI package separately before linking from an app.
- Package manager mismatch - The CLI honours the lockfile at the repo root; delete stale lockfiles if you intentionally switch managers.