Solid Tiny UI CLI

CLI for adding Solid Tiny UI theme components to your project as source code.

The CLI copies component source files from a bundled registry into your app and prints the runtime dependencies required by the installed components. Generated source uses relative imports for internal component dependencies.

Installation

You can run the CLI with your package manager:

pnpm dlx @solid-tiny-ui/cli init
pnpm dlx @solid-tiny-ui/cli add button

Or install it as a development dependency:

pnpm add -D @solid-tiny-ui/cli
pnpm solid-tiny-ui init
pnpm solid-tiny-ui add button

The generated components depend on @solid-tiny-ui/core, solid-js, and other packages reported by the CLI after installation. Install the reported dependencies in your app if they are not already present.

Quick start

Create a components.json file:

solid-tiny-ui init

Add a component:

solid-tiny-ui add button

Use the installed component from wherever your app keeps UI source files:

import { Button } from "./components/ui/button";

export function Example() {
  return <Button>Click me</Button>;
}

If your app already has a path alias, you can also import the installed component through that alias. The generated component source itself uses relative imports for its internal dependencies.

Commands

init

Creates a components.json config file in the current working directory.

solid-tiny-ui init

Options:

| Option | Description | | --- | --- | | --cwd <cwd> | Run the command in another working directory. | | --force | Overwrite an existing components.json. |

add <component>

Copies a component and its registry dependencies into your project.

solid-tiny-ui add button
solid-tiny-ui add calendar
solid-tiny-ui add form-components/checkbox
solid-tiny-ui add unocss-preset

Options:

| Option | Description | | --- | --- | | --cwd <cwd> | Run the command in another working directory. | | --theme <theme> | Use a specific bundled theme registry. Defaults to the configured theme. | | --overwrite | Replace existing component files. | | -y, --yes | Skip prompts and use default answers. Existing files are skipped unless --overwrite is also passed. |

When a component has registry dependencies, they are installed first. For example, adding button also installs spin because the button theme uses the spin component for loading states.

If files already exist, the CLI prompts before overwriting in an interactive terminal. In CI or non-interactive shells, existing files are skipped unless --overwrite is passed.

add unocss-preset

Copies tiny-ui-unocss-preset.ts like a normal registry component. With the default outDir, it is written to src/components/ui/unocss-preset:

solid-tiny-ui add unocss-preset

Then import it manually in your uno.config.ts:

import { defineConfig } from "unocss";
import { presetTinyUi } from "./src/components/ui/unocss-preset/tiny-ui-unocss-preset";

export default defineConfig({
  presets: [presetTinyUi()],
});

The CLI only creates the preset source file. It does not modify your existing UnoCSS config automatically.

list

Lists available registry items grouped as components, collections, and presets. Internal items are omitted.

solid-tiny-ui list

Options:

| Option | Description | | --- | --- | | --cwd <cwd> | Run the command in another working directory. | | --theme <theme> | List components from a specific bundled theme registry. |

Configuration

solid-tiny-ui init creates this default components.json:

{
  "$schema": "./node_modules/@solid-tiny-ui/cli/components.schema.json",
  "theme": "default",
  "outDir": "src/components/ui"
}

The schema is published as @solid-tiny-ui/cli/components.schema.json and is also exported from the package. It provides editor validation and autocomplete for components.json.

$schema

Editor-only JSON Schema reference. It is not used by the CLI at runtime.

theme

The bundled registry theme to use. The current registry is default.

outDir

The directory where component source files are written.

For example, with the default outDir, adding button creates files under:

src/components/ui/button
src/components/ui/spin

Generated components use relative imports when they reference other installed UI components, so you do not need to configure a path alias for the copied source to work. Your application code can still import those components through any alias configured in your own project.

Styling

Theme components are installed as source code and keep their colocated styles. Components import SCSS files directly:

import "./button.scss";

Your project must support importing SCSS from TypeScript/TSX files.

Root provider

Some components rely on the registry root-provider. Install it directly when you need theme/global color setup:

solid-tiny-ui add root-provider

Then wrap your app:

import { RootProvider } from "./components/ui/root-provider";

export function App() {
  return <RootProvider>{/* routes */}</RootProvider>;
}

Development in this repository

Build the CLI package:

pnpm --filter @solid-tiny-ui/cli build

Run the built CLI locally:

pnpm --filter @solid-tiny-ui/cli cli -- --help
pnpm --filter @solid-tiny-ui/cli cli -- list

The registry source lives in packages/cli/registry/default.