stratum-uikit add

stratum-uikit add copies a component — and all the components it depends on — into your project as source files you own.

Usage

npx stratum-uikit add <layer>/<ComponentName>

Run stratum-uikit init first if you haven’t already.

Examples

npx stratum-uikit add atom/Button
npx stratum-uikit add atom/Input
npx stratum-uikit add atom/Card

npx stratum-uikit add molecule/FormField
npx stratum-uikit add molecule/SettingsRow
npx stratum-uikit add molecule/SearchBar

npx stratum-uikit add organism/AuthForm
npx stratum-uikit add organism/SettingsGroup
npx stratum-uikit add organism/TopNavBar

npx stratum-uikit add template/AuthLayout
npx stratum-uikit add template/SettingsLayout

Dependency resolution

Stratum components depend on each other. add resolves the full dependency tree automatically — you only need to name the component you want:

npx stratum-uikit add organism/AuthForm

Adding organism/AuthForm...

Files created:
  ✓ src/components/1-atoms/Input.tsx       (dependency)
  ✓ src/components/2-molecules/FormField.tsx (dependency)
  ✓ src/components/3-organisms/AuthForm.tsx

Skipped (already exist):
  – src/components/1-atoms/Text.tsx        (dependency)
  – src/components/1-atoms/Button.tsx      (dependency)

Options

Flag	Description
`--overwrite`	Replace files that already exist in your project

By default, existing files are skipped. This is safe to re-run after updating the CLI.

Available components

Atoms

Key	Description
`atom/Badge`	Status labels — success, warning, error, info, neutral
`atom/Button`	Primary, secondary, ghost, outline, destructive
`atom/Card`	Themed container with shadow and padding scale
`atom/Checkbox`	Accessible checkbox with label
`atom/Chip`	Compact tag — filled or outline, optional dismiss
`atom/Heading`	Heading levels 1–4
`atom/Icon`	Phosphor icon wrapper — size and color from theme
`atom/IconButton`	Icon-only pressable with accessibility label
`atom/Input`	Single-line text input
`atom/Radio`	Radio button with label
`atom/Slider`	Range slider
`atom/Surface`	Universal themed container (handles Quartz BlurView)
`atom/Switch`	Toggle switch
`atom/Text`	Body text with semantic variants
`atom/TextArea`	Multi-line text input

Molecules

Key	Description
`molecule/FormField`	Input + label + error — above or floating label
`molecule/ListItem`	Content list row with optional icon and accessory
`molecule/SearchBar`	Search input with icon, clearable
`molecule/SettingsRow`	Preference row — switch, chevron, value, or badge
`molecule/TagInput`	Multi-value tag input
`molecule/ToggleRow`	Labeled switch row

Organisms

Key	Description
`organism/AuthForm`	Login/register form — controlled, email + password
`organism/ListSection`	Titled list of ListItem rows
`organism/SettingsGroup`	Titled group of SettingsRow molecules
`organism/TopNavBar`	Navigation bar with title, back, and action buttons

Templates

Key	Description
`template/AuthLayout`	Full-screen auth shell with logo, title, content slots
`template/SettingsLayout`	Settings/detail screen shell with nav bar + scroll

How it works

add reads stratum.config.json to find your component directory, resolves the dependency graph from the built-in manifest, and copies source .tsx files into your project. You own these files — modify them freely.

Files use @/ imports (@/tokens, @/components, @/hooks) which resolve correctly as long as you have the @/*: ["./src/*"] path alias in tsconfig.json.

stratum-uikit init — scaffold tokens and infrastructure first
stratum-uikit theme list — available themes
Project Structure — where files land