/kit-list

Browse the component catalogue or inspect a specific component’s props, CSS tokens, dependencies, and generation contract. This command is entirely read-only — it never writes files.

Syntax

/kit-list [component]

Arguments

Argument	Required	Description
component	No	Component name to inspect. If omitted, shows the full catalogue.

Examples

List all available components:

/kit-list

Inspect a specific component:

/kit-list dialog
/kit-list button
/kit-list card

Output: full catalogue

Without a component name, /kit-list prints every available component organized by category. As of v0.11.1, components whose static-HTML output has been Verified (i.e. /kit-add-html can generate them today) are marked [HTML]:

Available Components (acss-kit)

Simple (no dependencies):
  badge       — Status indicator with count or text
  tag         — Categorical label with optional removal
  heading     — Semantic heading (h1-h6) with styles
  text        — Inline/block text with variants

Interactive (useDisabledState pattern):
  button      — Primary interactive element (all variants)              [HTML]
  link        — Accessible anchor with hover/visited states

Layout:
  card        — Compound component (Card.Title, Card.Content, Card.Footer)  [HTML]
  nav         — Navigation landmark with compound Nav.List, Nav.Item

Complex (multiple dependencies):
  alert       — Severity-aware notification (needs icon)                 [HTML]
  dialog      — Modal dialog with focus trap (needs button, icon)        [HTML]
  form        — Form controls (input, textarea, select, checkbox, toggle)

Run /kit-add <component> to generate React components, or /kit-add-html <component> for static HTML versions of the [HTML]-marked entries.

Components without [HTML] exist as React only — /kit-add-html will warn if you try to generate them.

Output: component inspect

With a component name, /kit-list shows the full specification including a dedicated HTML output line:

Component: Button
File: button.tsx + button.scss
Dependencies: none (simple component)
HTML output: Verified (/kit-add-html can generate this component)

Props:
  children   ReactNode         required  Button content
  variant    primary|secondary|ghost|danger  optional  default: 'primary'
  size       sm|md|lg          optional  default: 'md'
  disabled   boolean           optional  default: false
  onClick    MouseEventHandler  optional  Click handler
  className  string            optional  Additional CSS classes

CSS tokens:
  --btn-bg           Background color       var(--color-primary, #4f46e5)
  --btn-color        Text color             var(--color-text-inverse, #fff)
  --btn-border       Border color           transparent
  --btn-radius       Border radius          var(--radius-md, 0.375rem)
  --btn-padding-x    Horizontal padding     1rem
  --btn-padding-y    Vertical padding       0.5rem
  --btn-font-size    Font size              1rem
  --btn-font-weight  Font weight            600

Usage:
  <Button variant="primary" onClick={handler}>Save</Button>
  <Button variant="secondary">Cancel</Button>
  <Button disabled>Unavailable</Button>

For a component without HTML support the line reads: HTML output: Not yet — React only (/kit-add-html will warn).

Reading the generation contract

The generation contract tells you exactly what /kit-add <component> will create, including the resolved dependency tree. This lets you preview the output before running the write command.

Tip

Use /kit-list <component> as a planning step before /kit-add. You can see the full dependency chain and all CSS tokens without touching your project files.

No side effects

/kit-list never creates, modifies, or deletes any file. It’s safe to run at any time, in any project state.