Getting Started

CLI reference

v0.2

The disenio.studio CLI is the only runtime piece of the toolkit. Everything else is source code in your repo.

Run anywhere

The CLI runs via npx /pnpm dlx /bunx. You don't need to install it as a project dependency.

bash

# pick a manager
pnpm dlx disenio.studio add button input
npx     disenio.studio add button input
bunx    disenio.studio add button input

Recipes

The add command takes any number of ids, plus three bulk flags for when you want a batch.

Interactive setup (recommended)recipe

Run init with no flags. You'll be prompted to pick a Feel and how many components to install up front.

npx disenio.studio init

One-shot install (CI / scripts)recipe

All choices passed as flags — no prompts, no surprises. Auto-skipped in non-TTY environments too.

npx disenio.studio init --yes --theme stark --all

Just scaffold, add laterrecipe

Skip the bulk install. You'll add components one at a time as you go.

npx disenio.studio init --skip-install

Install just onerecipe

Pick a single primitive when you know what you need.

npx disenio.studio add button

Install a fewrecipe

Pass any number of ids — components and pairs both work.

npx disenio.studio add button input card form-field

Install everything laterrecipe

If you scaffolded empty, this fills the registry into your repo.

npx disenio.studio add --all

Switch themes anytimerecipe

Apply a different Feel to your existing theme.css. Optional --accent overrides the brand color.

npx disenio.studio theme apply playful --accent "#ff5e3a"

Bring your own gradientrecipe

By default the brand gradient auto-derives from --ds-accent via color-mix. Pass --gradient with 2–5 hex stops to ship your own (skips the auto-derive).

npx disenio.studio init --yes --accent "#ff5e3a" --gradient "ff8a4c,ff5e3a,b91d2e"

Re-install with overwriterecipe

Force a clean copy from the registry, replacing any local edits.

npx disenio.studio add --all --overwrite

Commands

disenio.studio init

Interactive scaffold. Prompts for a Feel and an install scope. Writes disenio.json, the cn util, and theme.css. Use --yes to skip prompts.

disenio.studio add <component...>

Copy one or more components into your repo. Pass --overwrite to replace existing files.

disenio.studio add --all

Install every component and every pair in one shot. Mix with names to add extras (e.g. --pairs button).

disenio.studio add --components

Install all components, skip pairs.

disenio.studio add --pairs

Install all pairs, skip components.

disenio.studio theme list

List all available Feels. The active one is marked ✓.

disenio.studio theme apply <name>

Switch your theme.css to a different Feel. Use --accent <hex> to override the accent.

disenio.studio list

List all available components and pairs by id.

disenio.studio diff [id...]

Compare local copies against upstream + your lockfile. Classifies each file as in-sync, local-edit, upstream-update, or both.

disenio.studio update [id...]

Pull the latest upstream into your repo. Refuses to clobber locally-edited files unless --force is passed.

Themes

Six built-in Feels. Pick at init, or switch anytime with theme apply. The active Feel is stored in disenio.json.

— Brand gradient

By default --ds-brand-gradient auto-derives from --ds-accent via CSS color-mix() — so changing the accent re-tunes the gradient automatically.

Pass --gradient "hex,hex,hex" to ship your own stops (skips the derive). Use 2 stops for a clean fade or 3+ for a richer transition.

modernDark

Modern · Dark — Pure black, gradient brand, electric. (default)

modern

Modern — Crisp white, geometric sans, violet→blue accent.

editorial

Editorial — Warm paper, ink type, generous restraint.

playful

Playful — Bouncy springs, soft pastels, rounded everything.

stark

Stark — Hard edges, mono type, no apology.

clinical

Clinical — Cool grays, precise spacing, subtle motion.

Flags

--yes, -y

Used with `init`. Skip prompts, use defaults. Auto-applied in non-TTY environments (CI, piped scripts).

--theme <id>

Used with `init` or `theme apply`. Pick a Feel by id. See Themes above for the list.

--accent <hex>

Used with `init` or `theme apply`. Override the brand accent (default `#6d4cf2`). The gradient auto-derives from this via color-mix unless you pass --gradient.

--gradient <hex,hex,...>

Used with `init` or `theme apply`. Explicit brand gradient stops (2–5 hex values, comma-separated). Skips the auto-derive. Example: `--gradient "ff8a4c,ff5e3a,b91d2e"`.

--all

Used with `init` or `add`. Install every component and every pair.

--components

Used with `init` or `add`. Install all components, skip pairs.

--pairs

Used with `init` or `add`. Install all pairs, skip components.

--skip-install

Used with `init`. Scaffold only — no components or pairs copied.

--overwrite

Used with `init` or `add`. Replace existing files instead of skipping.

--force

Used with `update`. Overwrite even files you've locally edited.