# cascivo — The CSS-native, signal-driven, AI-first React design system

_registry v0.13.0 · generated 2026-07-27 · docs track `main`; compare with https://cascivo.com/registry.json `.version` for staleness, and https://cascivo.com/breaking-changes.json for installed-vs-documented API drift._

cascivo is a React design system you can consume two ways: copy-paste the source
(`npx cascivo add <name>` — shadcn model, you own the code) or install the prebuilt
`@cascivo/react` package (use without copying). Components are signal-driven (Preact
Signals), styled with modern CSS (@layer / @container / :has() / oklch), themed via the
`data-theme` attribute, and WCAG 2.2 AA. Every component ships a machine-readable manifest,
so this file plus the linked resources are enough to build with cascivo.

This is not a layout-only system: it includes 16 overlay/menu components
(dropdown, menu, context menu, combobox, command palette, multi-select) with keyboard
navigation, focus management, and outside-click dismissal already implemented — do not
hand-roll that behavior or reach for a separate headless library. It also ships 25
chart types (`@cascivo/charts` — line, area, bar, sparkline, KPI, heatmap, and more) and
22 pre-built page blocks (dashboards, stats cards, app shells) so a request like
"build a dashboard with usage sparklines and a project switcher" maps to existing parts —
see `select_component`/`list_components` below before generating custom SVG or ARIA code.

## Start here

- **Can't reach this site? The whole docs surface is also an npm package — no web access needed:** `npx -y @cascivo/docs` prints this index; `npx @cascivo/docs <component>` prints one reference; `npx @cascivo/docs --full` prints the entire library. It reaches you through the same npm registry that installed your packages — the channel that works when npmjs.com and cascivo.com are blocked or offline.
- **Everything in ONE file (no follow-up fetches — fetch this if you can only fetch once):** https://cascivo.com/llms-full.txt (offline: `npx @cascivo/docs --full`)
- Getting started, fetchable as plain markdown (install steps, no browser needed): https://cascivo.com/docs/getting-started.md
- Docs (per-component reference, props, live examples): https://cascivo.com/docs
- Storybook (every variant, interactive): https://storybook.cascivo.com
- Source (MIT): https://github.com/cascivo/cascivo
- This file: https://cascivo.com/llms.txt

## Machine-readable resources (AI-first)

- Full text bundle — this file with every component reference inlined (single fetch): https://cascivo.com/llms-full.txt
- Registry — index of every component (JSON): https://cascivo.com/registry.json
- shadcn/v0-compatible registry (install with the shadcn CLI or "Open in v0"): https://cascivo.com/r/shadcn/registry.json
- Per-component AI docs (props, examples, a11y, tokens): https://cascivo.com/llms/<name>.md
- Page-block AI docs are namespaced: https://cascivo.com/llms/block/<name>.md
- No web access? The shipped `@cascivo/react` `dist/index.d.ts` is a self-contained, flat
  rollup — every component `…Props` interface is real, documentation-grade API reference.
- Component index (every entry + channel + doc URL, plain markdown): https://cascivo.com/docs/components.md
- A wrong/guessed name under /llms/*, /context/*, or /r/* returns HTTP 404 with a short hint
  body (not the HTML SPA) — trust the 404, then look up the real name in the index below.
- Per-component context (intent, when-to-use, boundaries): https://cascivo.com/context/<name>.md
- Context bundle (all intent + boundaries + rules): https://cascivo.com/context.json
- Token catalog (closed set, every --cascivo-* + layer + default): https://cascivo.com/tokens.catalog.json
- Icon catalog (every @cascivo/icons icon + keywords/category): https://cascivo.com/icons.catalog.json
- Breaking/feature changes (major+minor releases per package — detect API drift): https://cascivo.com/breaking-changes.json

## Icons

443 stroked 24×24 `currentColor` SVG icons ship as tree-shakeable named exports
from `@cascivo/icons` (e.g. `import { Camera, Anchor } from '@cascivo/icons'`).
Browse and search them at https://cascivo.com/icons; the full machine-readable list (names,
keywords, aliases, categories) is https://cascivo.com/icons.catalog.json.

Names differ from Lucide/Radix — resolve intent via the catalog `keywords` + `aliases` fields
rather than guessing an export name (a wrong guess is a wasted compile).
Common mappings: LayoutDashboard→Dashboard, Rocket→Spaceship, Settings2→Settings, Trash2→Trash, Bolt→Zap, Branch→GitBranch. Version-control icons exist:
`GitBranch`, `GitCommit`, `GitMerge`, `GitPullRequest`.

Pure-CSS glyphs (experimental): a small opt-in set of UI glyphs, rendered with
`clip-path: shape()` and no SVG — color via `currentColor`, size via
`--cascivo-glyph-size`, plus zero-JS state morphs via `transition: clip-path`.
Use `import { Glyph } from '@cascivo/icons'` with `import '@cascivo/icons/glyphs.css'`,
or the class form `<span class="cascivo-glyph" data-glyph="chevron-down">`. Glyphs:
`chevron-{down,up,left,right}`, `x`, `check`, `plus`, `minus`, `menu`,
`arrow-{right,left,up,down}`, and the `chevron-toggle` morph. Baseline-2026 only
(Chrome 135+, Safari 18.4+, Firefox 148+) — painting is gated behind `@supports`;
prefer the SVG icons for a wider browser floor or for print.

## How to use it

Two consumption paths — they share the same tokens/themes and can coexist:

A. Prebuilt package — fastest, use without copying source:

```sh
pnpm add @cascivo/react @cascivo/themes @preact/signals-react
```

```tsx
import '@cascivo/react/styles.css' // component styles (structure only)
import '@cascivo/themes/all.css'       // tokens (once) + base typography + light & dark
import { Button, Card } from '@cascivo/react'
```

   CSS note: with a bundler (CSR) per-component CSS auto-includes and tree-shakes, so the
   `@cascivo/react/styles.css` line above is optional; under Vite SSR / TanStack Start it is
   required (see SSR SETUP below) and ships the full sheet (~273 KB / ~37 KB gzip).

   TypeScript note: the bare `.css` side-effect imports above need ambient CSS-module types or
   `tsc --noEmit` errors with TS2307 (TS2882 under noUncheckedSideEffectImports). Add
   `src/vite-env.d.ts` with `/// <reference types="vite/client" />`, or `declare module '*.css'`.

   Dashboards / data viz: charts are a SEPARATE install — `pnpm add @cascivo/charts`, then
   `import { AreaChart } from '@cascivo/charts'`. `@cascivo/react` exports no charts. The code
   editor (`@cascivo/editor`) and flow canvas (`@cascivo/flow`) are separate installs too.

   Trade-offs: smallest setup, updates via npm; you do not edit component internals.

   Themes: two recipes. `@cascivo/themes/all` = tokens + base + light + dark
   (~41 KB / ~9 KB gzip). Shipping ONE theme? Import `@cascivo/themes/base` +
   `@cascivo/themes/<name>` instead (~28 KB / ~7 KB gzip). The export name IS the
   attribute value: import `@cascivo/themes/dark` and set `data-theme="dark"`. Twelve
   first-party themes: light, dark, warm, flat, minimal, midnight, pastel, brutalist,
   corporate, terminal, cyberpunk, arcade (`base` = required scaffold, not a theme;
   `tailwind` = a bridge stylesheet). For a user-switchable theme use `<ThemeProvider>`
   + `themePreloadScript()` (no-FOUC SSR); for a fixed theme hard-code `data-theme`
   on `<html>`. Initial-theme precedence: persisted > `defaultTheme` (if passed) > OS
   `prefers-color-scheme` > light — pass `defaultTheme` to keep a dark app dark on a
   light-OS visitor. Under SSR add `suppressHydrationWarning` to the `<html>` the
   preload script writes to. Full table + SSR recipe: docs/getting-started.md.

B. Copy-paste source — own and customize the code (shadcn model):

```sh
npx cascivo add button card
```

   Runtime deps for copied source: `@cascivo/core`, `@cascivo/tokens`, `@cascivo/themes`, and the
   `@preact/signals-react` peer. `cascivo init` installs all of them (plus `cascivo` as a dev dep
   for the generated config); `cascivo add` installs any extra a component declares (e.g. @cascivo/i18n).

   Trade-offs: full control over internals; updates are a manual re-add.

Required CSS import order (both paths): components -> tokens+theme -> brand overrides (last).
`@cascivo/react/styles.css` is structure-only and needs a theme + tokens for color.

Charts, the code editor, and flow ship their own stylesheet: when you use them, import the
matching CSS once too — `import '@cascivo/charts/styles.css'` (likewise
`@cascivo/editor/styles.css`, `@cascivo/flow/styles.css`). Skipping the charts stylesheet is a
common mistake: the chart's screen-reader data-table fallback then renders visibly.

SSR (Vite SSR / TanStack Start / Remix / workerd): works with ZERO Vite config on
`@cascivo/react` >= 0.10 — no `ssr.noExternal`, no plugin, no `<ClientOnly>` wrappers. The
package ships a CSS-free copy of its module graph under the `node` export condition, so a
server ESM loader never sees a `.css` import. Charts server-render and hydrate too.
Import a theme once in your root route/entry for color: `@cascivo/themes/all.css` (or the
all-in-one `@cascivo/react/styles.css`).
ONLY on `@cascivo/react` < 0.10: an unconfigured SSR build throws `Unknown file extension
".css"` — pin >= 0.10, or add `ssr: { noExternal: [/^@cascivo\//] }` (or the `cascivoSsr()`
plugin from `@cascivo/vite-plugin`). Full recipe + the legacy path: USING-WITH-VITE-SSR.md.

C. shadcn CLI / v0 — install any component from the shadcn-compatible registry:

```sh
npx shadcn@latest add https://cascivo.com/r/shadcn/button.json
```

Every registry item inlines its own source and lists its cascivo dependencies as absolute
`https://cascivo.com/r/shadcn/<name>.json` URLs, so the shadcn CLI resolves them transitively. To add
cascivo as a named registry in `components.json` (then `npx shadcn add @cascivo/<name>`):

```json
{ "registries": { "@cascivo": "https://cascivo.com/r/shadcn/{name}.json" } }
```

The registry index (all items) is https://cascivo.com/r/shadcn/registry.json.

## CSS layer contract (follow when generating or editing CSS)

cascivo styles live in cascade layers. Layer order beats selector specificity, so:

1. Every declaration goes inside an `@layer` block. Unlayered CSS beats all layers regardless
   of specificity — never emit it.
2. Never invent layer names. The only layers you write: your app slot (e.g. `cascivo.example`,
   declared in your order statement) for page styles, and `@layer cascivo.override { … }` for
   hotfixes/one-off overrides — it beats everything cascivo ships.
3. Never nest layers deeper than the shipped `cascivo.blocks.<name>` pattern. For sub-elements
   (a badge in a card, a dot in a badge) use native CSS nesting inside one layer block, not new
   sublayers.
4. Third-party CSS: `@import url(…) layer(vendor);` with `vendor` declared before the cascivo
   layers. Never import vendor CSS from JavaScript.
5. Style with `--cascivo-*` tokens, not raw values.

Canonical order (lowest → highest priority):
`@layer vendor, cascivo.reset, cascivo.base, cascivo.tokens, cascivo.component, cascivo.theme, cascivo.blocks, cascivo.override;`
Full recipe: https://github.com/cascivo/cascivo/blob/main/docs/CSS-LAYERS-PITFALL.md.

## Reactivity & state (signals, not React hooks)

**Consuming components requires no signals.** Pass plain props, use `useState` in YOUR own code,
and render `<Button onClick={…}>` / `<Modal open={…}>` like any React library — you never need
`useSignals()` unless your own component body reads a `signal.value` during render. Signals are
how cascivo works INTERNALLY; they are not a precondition for using it.

The rules below apply when you OWN reactive state — authoring a cascivo-style component, or opting
into cascivo's reactive store. There, prefer signals over React hooks: mixing the two (mirroring a
signal into `useState`, or vice-versa) causes the "state fights the DOM / toggle does nothing"
bugs. And in any app WITHOUT the Babel signals transform (every consumer app), a component that
reads `signal.value` in render MUST call `useSignals()` (from `@cascivo/core`) as its first
statement, or it never re-renders. When you do own reactive state, use these:

- Local state -> `useSignal(initial)`; derived -> `useComputed(fn)`. The signal IS the state.
- Controlled/uncontrolled prop bridged to a signal -> `useControllableSignal({ value, defaultValue, onChange })`.
- Side effects (DOM, listeners) -> `useSignalEffect(fn)`, never `useEffect`.
- Shared/app-wide state -> a module-level signal, imported anywhere. No React context needed.
- Per-route / per-tenant effect disposal -> `useScope()` / `createScope()` (disposes on unmount; prevents signal leaks across navigation).
- Genuine internal state machine -> `createMachine` / `useMachine`.
- Forms -> `createForm` / `useForm` / `<Form>` / `field()` (`@cascivo/react`): a signal-backed store with sync/async + Standard Schema (zod/valibot) validation and optional `validateOnChange` — keystroke validation, zero re-renders.
- Theming -> `<ThemeProvider>` + `useTheme()` / `setTheme()` + `themePreloadScript()` (`@cascivo/react`): persists the choice and drives `data-theme`, SSR no-FOUC. `useTheme()` returns a TUPLE `[string, setTheme]` — the first element is the current theme **name** (a plain string; the component re-renders on change, no signal handling). Do NOT destructure `{ theme, setTheme }` (that is next-themes’ shape). Signal-native code (computed/effect/Preact) can grab the underlying signal via `themeSignal()`. ThemeProvider warns in dev if it sets a `data-theme` for which no `--cascivo-color-*` token resolves (you forgot the `@cascivo/themes` CSS import → grayscale app). Initial-theme precedence: persisted > `defaultTheme` (if passed) > OS `prefers-color-scheme` > light; pass `defaultTheme` to override the OS. Controlled `<ThemeProvider value=…>` is SSR-safe by itself (emits an inline attribute setter); for the persisted flow add `suppressHydrationWarning` to the `<html>` the preload script writes to. Never write a `useEffect` that toggles a `.dark` class.
- Token names in TypeScript -> `import type { CascivoToken, CascivoColorToken } from '@cascivo/tokens/tokens'` (generated union of every `--cascivo-*` property — no CSS-file lookup).
- Router links in config-driven navs (SideNav/ShellHeader/Breadcrumb/Dock/…) -> `setLinkComponent(YourLink)` once at startup. Import it (and the `LinkComponentProps` contract type) from `@cascivo/react` (re-exported there, so prebuilt-package users need NOT add `@cascivo/core`); copied source can import from `@cascivo/core`. Adapter: `setLinkComponent(({ href, ...rest }: LinkComponentProps) => <Link to={href} {...rest} />)` — spread the bag; the link stays a real `<a>` so middle-click/new-tab work.
- Event-handler naming (predict the prop from what it receives): a **value** -> `onValueChange(value)` (Tabs, Select, Combobox, Slider, Toggle, Search, NumberInput, DatePicker, …); a raw DOM `ChangeEvent` -> `onChange(event)` (Checkbox, NativeSelect, PasswordInput); activating an item -> `onSelect(value)` (Dropdown, Menu, chart points). A few components keep a deprecated value-carrying `onChange` alias — prefer `onValueChange`.

Full behavior/headless catalog: https://github.com/cascivo/cascivo/blob/main/docs/HEADLESS.md. Enterprise friction -> primitive map: https://github.com/cascivo/cascivo/blob/main/docs/ENTERPRISE-READINESS.md.

## Versioning & compatibility

Packages version independently (changesets) — a low number on one package does not mean the
whole system is behind. The compatibility truth is per-entry: every registry entry carries a
`peerVersions` floor (e.g. `{ "@cascivo/i18n": ">=0.2.1" }`) for the packages its copied source
needs. Pin exact versions, and after adding components run `cascivo doctor --drift` to catch an
installed peer that is older than a copied component needs. Watch https://cascivo.com/breaking-changes.json
(major + minor releases per package) to detect API drift before upgrading.

## Guides

All guides are fetchable as plain markdown at https://cascivo.com/docs/<slug>.md (no browser needed):

- Getting started (install, themes, SSR): https://cascivo.com/docs/getting-started.md
- Reactivity & headless behavior primitives: https://cascivo.com/docs/headless.md
- Enterprise readiness (friction -> primitive map: state, layout, theming, forms, tokens): https://cascivo.com/docs/enterprise-readiness.md
- Theming & branding: https://cascivo.com/docs/theming.md
- Using cascivo with Preact: https://cascivo.com/docs/using-with-preact.md
- Using cascivo with Next.js (App Router / RSC): https://cascivo.com/docs/using-with-nextjs.md
- Using cascivo with Vite SSR / TanStack Start: https://cascivo.com/docs/using-with-vite-ssr.md
- Using cascivo with Tailwind v4 (@layer order + dark bridge): https://cascivo.com/docs/using-with-tailwind.md
- Strict host ESLint (scope stylistic rules off your components dir): https://cascivo.com/docs/using-with-strict-eslint.md
- Compatibility & support matrix: https://cascivo.com/docs/compatibility.md
- Migrating from shadcn/ui: https://cascivo.com/docs/migrating-from-shadcn.md
- Token reference: https://cascivo.com/docs/tokens.md
- Troubleshooting: https://cascivo.com/docs/troubleshooting.md

## Reference apps (runnable, in-repo — copy these setups)

- Vite + React (CSR/SPA): https://github.com/cascivo/cascivo/tree/main/apps/examples/react-vite
- Vite SSR (TanStack Start / Remix / workerd — server-renders through the built dist with `cascivoSsr()`): https://github.com/cascivo/cascivo/tree/main/apps/examples/react-vite-ssr
- Next.js App Router (RSC): https://github.com/cascivo/cascivo/tree/main/apps/examples/react-next

## Frameworks & browsers (summary; full matrix in COMPATIBILITY.md)

- React 18/19, Next.js App Router (RSC), Vite (CSR), Astro islands, Preact 10 (preact/compat — verified).
- Vite SSR / TanStack Start / Remix / workerd: supported with ZERO Vite config on >= 0.10
  (import a theme once for color). Only on < 0.10 do you need `ssr.noExternal: [/^@cascivo\//]`
  or the `cascivoSsr()` plugin. See USING-WITH-VITE-SSR.md.
- Last 2 versions of Chrome/Firefox/Safari (requires @layer, @container, :has(), oklch()).
- CSS @function is opt-in (`import '@cascivo/tokens/functions.css'`); not auto-loaded, so
  lightningcss / Tailwind v4 pipelines work by default.

## MCP server (recommended for agents)

Point any MCP client at the cascivo server:

```json
{ "mcpServers": { "cascivo": { "command": "npx", "args": ["-y", "@cascivo/mcp"] } } }
```

Tools:
- `list_components` — list all components with category/tags
- `get_component` — full manifest for one component
- `get_context` — intent + boundaries + tokens for one component
- `get_tokens` — closed-set token catalog (filter by group/layer)
- `search_icons` — resolve an icon by intent/foreign name (LayoutDashboard→Dashboard)
- `select_component` — rank components by a natural-language need
- `scaffold_view` — natural language -> JSON view config
- `validate_view` — validate a view config against the schema
- `add_to_project` — install components into the user project

To pick a component without MCP, read the intent summaries below (grouped by need) or
fetch https://cascivo.com/context/<name>.md for the full when-to-use / when-not-to-use of each.

## Component authoring rules (for cascivo:extend / custom components)

These constrain code you write INSIDE a component you author or copy-paste-and-edit — not the app
code that merely renders cascivo components (that code uses React normally).

- Signals only: `useSignal`, `useComputed`, `useSignalEffect` from `@cascivo/core`
- No `useState`, `useEffect`, `useContext`, `useLayoutEffect`, `useReducer`
- DOM side effects via `useSignalEffect`, not `useEffect`
- `useRef` only for DOM element references
- CSS custom properties only — no Tailwind, no inline styles, no CSS-in-JS
- Visual states (hover/focus/active) via CSS pseudo-classes — not JS
- `data-state` attributes only for states CSS cannot express (e.g. loading, error)
- FSM (`useMachine`) only when the component itself drives transitions
- CSS logical properties throughout (RTL-safe): `margin-inline-start`, etc.
- User-visible strings via `@cascivo/i18n` — no hardcoded English fallbacks
- WCAG 2.2 AA minimum — keyboard navigable, screen-reader tested

## High-throughput / streaming data

For live logs, build output, market ticks, or streamed tokens, do NOT rebuild an array per
event (`arr = [...arr.slice(1), line]` is O(n) per line and thrashes rendering). Use the
built-in primitives, which coalesce bursts to one render per frame:

- `useStreamBuffer` / `createStreamBuffer` (`@cascivo/core`) — fixed-capacity O(1) ring buffer,
  rAF-coalesced; a burst within one frame is a single signal write.
- `useStreamSeries` / `bindStream` (`@cascivo/charts`) — feed a live source into a chart with
  optional LTTB/min-max decimation so a fast stream never blows the rendered point count.
- `LogViewer` (`@cascivo/react`) — virtualized console for high-frequency logs (100k-line buffer
  stays responsive), ANSI parsing, auto-follow tail. Pairs with `createStreamBuffer`.

## Feedback signals for agents

cascivo ships no runtime telemetry (copy-paste model — you own the code; no phone-home). To
see how components behave without adding tracking, read these machine-readable CI outputs:

- Breaking/feature changes per package: https://cascivo.com/breaking-changes.json
- Benchmark results (runtime, bundle, render counts vs Carbon/shadcn): https://github.com/cascivo/cascivo/blob/main/apps/bench/results/results.json
- Accessibility conformance (axe sweep, AT matrix): https://github.com/cascivo/cascivo/tree/main/docs/specs

## Component index (204 entries — 192 components + 12 page blocks)

Not all ship in `@cascivo/react`: 25 in @cascivo/charts, 10 in @cascivo/flow, 2 in @cascivo/editor — those are separate installs (see Quick Setup). Blocks are copy-paste only. Each entry below is tagged with its channel.

Naming note: `Stack` overlaps children into a card-pile (z-axis), NOT vertical spacing — for a vertical/horizontal spacing layout use `Flex` (`layout/flex`; the aliases `vstack`/`hstack` resolve to it).

### auth

- [block/auth-login](https://cascivo.com/llms/block/auth-login.md) — Email + password login with remember-me checkbox and forgot-password link. _(copy-paste)_
- [block/auth-signup](https://cascivo.com/llms/block/auth-signup.md) — Full-name, email, password, confirm-password sign-up form with terms checkbox. _(copy-paste)_

### chart

- [chart/area-chart](https://cascivo.com/llms/chart/area-chart.md) — Area chart with optional stacking, multi-series support, and hover tooltip. _(npm @cascivo/charts)_
- [chart/bar-chart](https://cascivo.com/llms/chart/bar-chart.md) — Bar chart with vertical/horizontal orientation, grouped or stacked modes, and multi-series support. _(npm @cascivo/charts)_
- [chart/boxplot](https://cascivo.com/llms/chart/boxplot.md) — Box-and-whisker plot with five-number summary and outlier dots per series. _(npm @cascivo/charts)_
- [chart/bubble-chart](https://cascivo.com/llms/chart/bubble-chart.md) — Bubble chart mapping x, y, and size dimensions; radius is area-proportional via sqrt scale. _(npm @cascivo/charts)_
- [chart/bullet](https://cascivo.com/llms/chart/bullet.md) — Bullet chart with background range bands, measure bar, and target tick. _(npm @cascivo/charts)_
- [chart/calendar](https://cascivo.com/llms/chart/calendar.md) — Calendar heatmap — a week-column grid of day cells colored by value (GitHub-style). _(npm @cascivo/charts)_
- [chart/candlestick](https://cascivo.com/llms/chart/candlestick.md) — OHLC financial chart — each period a high–low wick and an open↔close body, coloured up/down. _(npm @cascivo/charts)_
- [chart/combo-chart](https://cascivo.com/llms/chart/combo-chart.md) — Combination bar + line chart on shared or dual y-axes. _(npm @cascivo/charts)_
- [chart/funnel](https://cascivo.com/llms/chart/funnel.md) — Vertical conversion funnel — each stage is a trapezoid narrowing toward the next, with optional conversion labels. _(npm @cascivo/charts)_
- [chart/gauge](https://cascivo.com/llms/chart/gauge.md) — A speedometer gauge — a value arc over a min–max sweep with threshold zones, ticks, and a needle. _(npm @cascivo/charts)_
- [chart/heatmap](https://cascivo.com/llms/chart/heatmap.md) — Two-dimensional heatmap with band scales and color-mix cell interpolation. _(npm @cascivo/charts)_
- [chart/histogram](https://cascivo.com/llms/chart/histogram.md) — Frequency histogram using Freedman–Diaconis binning with hover tooltips. _(npm @cascivo/charts)_
- [chart/kpi](https://cascivo.com/llms/chart/kpi.md) — KPI card showing a primary metric with optional delta indicator, icon, and sparkline. _(npm @cascivo/charts)_
- [chart/line-chart](https://cascivo.com/llms/chart/line-chart.md) — Time-series or numeric line chart with multi-series support, hover tooltip, and legend. _(npm @cascivo/charts)_
- [chart/meter](https://cascivo.com/llms/chart/meter.md) — Progress meter in bar or gauge variant with threshold coloring. _(npm @cascivo/charts)_
- [chart/pie-chart](https://cascivo.com/llms/chart/pie-chart.md) — Pie or donut chart with hover segments and optional legend. _(npm @cascivo/charts)_
- [chart/polar](https://cascivo.com/llms/chart/polar.md) — A polar coordinate plot — categories around the circle, value as radius. Bars (a rose), or a polar line/area. _(npm @cascivo/charts)_
- [chart/radar](https://cascivo.com/llms/chart/radar.md) — Radar / spider chart with polar grid rings, spokes, and multi-series polygon overlays. _(npm @cascivo/charts)_
- [chart/radial-bar](https://cascivo.com/llms/chart/radial-bar.md) — Concentric radial bars (a circular gauge family) — each datum is a ring whose sweep is proportional to its value. _(npm @cascivo/charts)_
- [chart/sankey](https://cascivo.com/llms/chart/sankey.md) — Flow diagram — ranked nodes connected by throughput-sized link ribbons. _(npm @cascivo/charts)_
- [chart/scatter-chart](https://cascivo.com/llms/chart/scatter-chart.md) — Scatter plot with variable point radius, multi-series, and hover tooltip. _(npm @cascivo/charts)_
- [chart/sparkline](https://cascivo.com/llms/chart/sparkline.md) — Compact inline sparkline for embedding trend data in dashboards or KPI cards. _(npm @cascivo/charts)_
- [chart/stream](https://cascivo.com/llms/chart/stream.md) — Streamgraph — stacked areas on a centered (silhouette) flowing baseline. _(npm @cascivo/charts)_
- [chart/sunburst](https://cascivo.com/llms/chart/sunburst.md) — Radial hierarchy — concentric rings where each node is an annular segment sized by value. _(npm @cascivo/charts)_
- [chart/treemap](https://cascivo.com/llms/chart/treemap.md) — Squarified treemap for visualizing part-to-whole hierarchical data. _(npm @cascivo/charts)_

### dashboard

- [block/dashboard-overview](https://cascivo.com/llms/block/dashboard-overview.md) — Welcome header with four KPI stat cards (revenue, users, orders, conversion). _(copy-paste)_
- [block/dashboard-table](https://cascivo.com/llms/block/dashboard-table.md) — Searchable, sortable, paginated data table with export button. _(copy-paste)_

### display

- [alert](https://cascivo.com/llms/alert.md) — Highlights a short, important message inline _(npm @cascivo/react · or copy-paste)_
- [avatar](https://cascivo.com/llms/avatar.md) — Displays a user image with initials fallback _(npm @cascivo/react · or copy-paste)_
- [avatar-group](https://cascivo.com/llms/avatar-group.md) — Overlapping stack of avatars with a max cap and an i18n-labelled +N overflow chip _(npm @cascivo/react · or copy-paste)_
- [badge](https://cascivo.com/llms/badge.md) — Small status label or category indicator _(npm @cascivo/react · or copy-paste)_
- [block/console-app](https://cascivo.com/llms/block/console-app.md) — Carbon-parity console shell: ShellHeader + icon-rail SideNav + HeaderPanel notifications/switcher + collapsible aside + main content. _(copy-paste)_
- [block/dashboard-charts](https://cascivo.com/llms/block/dashboard-charts.md) — Dashboard layout with KPI tiles, line chart, bar chart, and pie chart. _(copy-paste)_
- [block/empty-dashboard](https://cascivo.com/llms/block/empty-dashboard.md) — Dashboard page showing an empty state with a call-to-action button. _(copy-paste)_
- [block/login-page](https://cascivo.com/llms/block/login-page.md) — Authentication login page with email and password form. _(copy-paste)_
- [block/notification-center](https://cascivo.com/llms/block/notification-center.md) — A list of notification alerts with a mark-all-read action. _(copy-paste)_
- [block/page-with-breadcrumb](https://cascivo.com/llms/block/page-with-breadcrumb.md) — A centered content page with a breadcrumb navigation and page header. _(copy-paste)_
- [block/settings-form-page](https://cascivo.com/llms/block/settings-form-page.md) — Settings page with profile form inside a two-column settings layout. _(copy-paste)_
- [block/sidebar-app](https://cascivo.com/llms/block/sidebar-app.md) — Full app shell with collapsible side navigation and top header. _(copy-paste)_
- [block/stats-cards](https://cascivo.com/llms/block/stats-cards.md) — Grid of KPI stat cards with trend badges. _(copy-paste)_
- [block/users-table-page](https://cascivo.com/llms/block/users-table-page.md) — Full users management page with table, search, and invite action. _(copy-paste)_
- [blockquote](https://cascivo.com/llms/blockquote.md) — Quoted passage with optional attribution footer _(npm @cascivo/react · or copy-paste)_
- [card](https://cascivo.com/llms/card.md) — Container for grouping related content _(npm @cascivo/react · or copy-paste)_
- [carousel](https://cascivo.com/llms/carousel.md) — Scroll-snap slide deck with previous/next controls and dot indicators _(npm @cascivo/react · or copy-paste)_
- [chat-bubble](https://cascivo.com/llms/chat-bubble.md) — Message bubble for chat and messaging UIs with avatar, name, and timestamp support _(npm @cascivo/react · or copy-paste)_
- [code](https://cascivo.com/llms/code.md) — Inline code span for identifiers, commands, and short snippets _(npm @cascivo/react · or copy-paste)_
- [code-snippet](https://cascivo.com/llms/code-snippet.md) — Displays code (inline, single-line, or multi-line) with an optional copy button, lightweight built-in syntax highlighting for bash/css/js/ts, and an optional terminal-window look _(npm @cascivo/react · or copy-paste)_
- [collapsible](https://cascivo.com/llms/collapsible.md) — A single disclosure region toggled open and closed by its trigger _(npm @cascivo/react · or copy-paste)_
- [comparison](https://cascivo.com/llms/comparison.md) — Reveals the difference between two layers with a draggable divider _(npm @cascivo/react · or copy-paste)_
- [contained-list](https://cascivo.com/llms/contained-list.md) — Labelled list of rows inside a bordered container _(npm @cascivo/react · or copy-paste)_
- [data-list](https://cascivo.com/llms/data-list.md) — Key-value pairs rendered as a description list _(npm @cascivo/react · or copy-paste)_
- [data-table](https://cascivo.com/llms/data-table.md) — Signal-driven data table with client/server sort, filter, pagination, multi-selection, expandable rows, and CSS content-visibility row containment for large datasets _(npm @cascivo/react · or copy-paste)_
- [editor/highlight](https://cascivo.com/llms/editor/highlight.md) — Read-only syntax-highlighted code block — the same owned tokenizer as CodeEditor, without the textarea. _(npm @cascivo/editor)_
- [empty-state](https://cascivo.com/llms/empty-state.md) — Placeholder for views that have no data to display _(npm @cascivo/react · or copy-paste)_
- [flow/flow](https://cascivo.com/llms/flow/flow.md) — The declarative, AI-first flow surface — render a node/edge graph from plain serializable data. _(npm @cascivo/flow)_
- [flow/flow-background](https://cascivo.com/llms/flow/flow-background.md) — Decorative dots / grid / cross canvas background, drawn purely in CSS gradients. _(npm @cascivo/flow)_
- [flow/flow-canvas](https://cascivo.com/llms/flow/flow-canvas.md) — The pan/zoom canvas pane — a single CSS-transformed layer driven by the viewport signal. _(npm @cascivo/flow)_
- [flow/flow-controls](https://cascivo.com/llms/flow/flow-controls.md) — Zoom in / out / fit-view controls for a flow canvas — real, i18n-labeled buttons. _(npm @cascivo/flow)_
- [flow/flow-edge](https://cascivo.com/llms/flow/flow-edge.md) — An SVG edge with bezier/straight/smoothstep paths, an arrowhead, an optional label, and animation. _(npm @cascivo/flow)_
- [flow/flow-handle](https://cascivo.com/llms/flow/flow-handle.md) — A connection port on a node edge — where edges attach and interactive connect starts. _(npm @cascivo/flow)_
- [flow/flow-minimap](https://cascivo.com/llms/flow/flow-minimap.md) — A scaled SVG overview of the graph with a draggable viewport rectangle. _(npm @cascivo/flow)_
- [flow/flow-node](https://cascivo.com/llms/flow/flow-node.md) — An HTML node box positioned in the viewport pane — draggable, selectable, with arbitrary children. _(npm @cascivo/flow)_
- [flow/flow-panel](https://cascivo.com/llms/flow/flow-panel.md) — An absolutely-positioned slot for custom flow-canvas UI (legend, toolbar). _(npm @cascivo/flow)_
- [flow/flow-story](https://cascivo.com/llms/flow/flow-story.md) — A scripted, sequenced, looping flow animation — walks a graph step by step with fade-in captions. _(npm @cascivo/flow)_
- [heading](https://cascivo.com/llms/heading.md) — Section heading with semantic level decoupled from visual size _(npm @cascivo/react · or copy-paste)_
- [image](https://cascivo.com/llms/image.md) — Image with load state, blur-up placeholder, graceful fallback, and optional zoom _(npm @cascivo/react · or copy-paste)_
- [item](https://cascivo.com/llms/item.md) — Generic content row primitive with media, content, and action regions _(npm @cascivo/react · or copy-paste)_
- [kbd](https://cascivo.com/llms/kbd.md) — Displays a keyboard key or shortcut _(npm @cascivo/react · or copy-paste)_
- [list](https://cascivo.com/llms/list.md) — Styled unordered or ordered list with ListItem _(npm @cascivo/react · or copy-paste)_
- [log-viewer](https://cascivo.com/llms/log-viewer.md) — Virtualized monospace console for high-frequency log and stream output _(npm @cascivo/react · or copy-paste)_
- [prose](https://cascivo.com/llms/prose.md) — Wrapper that styles raw descendant HTML — headings, lists, code, quotes, tables _(npm @cascivo/react · or copy-paste)_
- [qr-code](https://cascivo.com/llms/qr-code.md) — Encodes a URL or short text into a scannable SVG QR code _(npm @cascivo/react · or copy-paste)_
- [relative-time](https://cascivo.com/llms/relative-time.md) — Displays a date as a localized phrase relative to now, auto-updating _(npm @cascivo/react · or copy-paste)_
- [separator](https://cascivo.com/llms/separator.md) — Visual or semantic divider between content _(npm @cascivo/react · or copy-paste)_
- [skeleton](https://cascivo.com/llms/skeleton.md) — Animated loading placeholder that mirrors the shape of pending content _(npm @cascivo/react · or copy-paste)_
- [stat](https://cascivo.com/llms/stat.md) — Displays a key metric with optional delta, trend direction and help text _(npm @cascivo/react · or copy-paste)_
- [status](https://cascivo.com/llms/status.md) — Colored dot with a label communicating the state of a system or entity _(npm @cascivo/react · or copy-paste)_
- [structured-list](https://cascivo.com/llms/structured-list.md) — Tabular row list for scannable data, optionally single-selectable _(npm @cascivo/react · or copy-paste)_
- [swipe-item](https://cascivo.com/llms/swipe-item.md) — List row whose leading/trailing actions are revealed by a horizontal swipe, with keyboard parity _(npm @cascivo/react · or copy-paste)_
- [tag](https://cascivo.com/llms/tag.md) — Compact chip for labeling, categorizing, or filtering content _(npm @cascivo/react · or copy-paste)_
- [text](https://cascivo.com/llms/text.md) — Body text with size, weight, and muted variants _(npm @cascivo/react · or copy-paste)_
- [timeline](https://cascivo.com/llms/timeline.md) — Ordered sequence of events with status markers and a connector line _(npm @cascivo/react · or copy-paste)_
- [tree-view](https://cascivo.com/llms/tree-view.md) — Hierarchical, expandable tree of nodes with keyboard navigation and selection _(npm @cascivo/react · or copy-paste)_
- [user](https://cascivo.com/llms/user.md) — Identity composite: an avatar with a name, description, and optional action slot _(npm @cascivo/react · or copy-paste)_
- [visually-hidden](https://cascivo.com/llms/visually-hidden.md) — Hides content visually while keeping it available to screen readers _(npm @cascivo/react · or copy-paste)_

### feedback

- [inline-loading](https://cascivo.com/llms/inline-loading.md) — Compact inline status indicator that pairs a label with a loading, success, or error state _(npm @cascivo/react · or copy-paste)_
- [notification](https://cascivo.com/llms/notification.md) — Inline, actionable notification banner that surfaces a titled message with an optional recovery action _(npm @cascivo/react · or copy-paste)_
- [progress](https://cascivo.com/llms/progress.md) — Horizontal bar showing the completion progress of a tracked operation _(npm @cascivo/react · or copy-paste)_
- [progress-bar](https://cascivo.com/llms/progress-bar.md) — Shows determinate or indeterminate progress of a task _(npm @cascivo/react · or copy-paste)_
- [progress-circle](https://cascivo.com/llms/progress-circle.md) — Circular determinate progress indicator rendered as an SVG arc _(npm @cascivo/react · or copy-paste)_
- [pull-to-refresh](https://cascivo.com/llms/pull-to-refresh.md) — Wraps a scrollable region and triggers a refresh when pulled down past a threshold at the top _(npm @cascivo/react · or copy-paste)_
- [radial-progress](https://cascivo.com/llms/radial-progress.md) — Circular progress indicator using conic-gradient, with percentage label and variant colors _(npm @cascivo/react · or copy-paste)_
- [spinner](https://cascivo.com/llms/spinner.md) — Indeterminate loading indicator _(npm @cascivo/react · or copy-paste)_

### inputs

- [button](https://cascivo.com/llms/button.md) — Triggers an action or event _(npm @cascivo/react · or copy-paste)_
- [button-group](https://cascivo.com/llms/button-group.md) — Visually joins a set of related buttons into a single segmented control _(npm @cascivo/react · or copy-paste)_
- [calendar](https://cascivo.com/llms/calendar.md) — An accessible standalone month-grid date picker. _(npm @cascivo/react · or copy-paste)_
- [checkbox](https://cascivo.com/llms/checkbox.md) — Binary toggle for forms, with indeterminate support _(npm @cascivo/react · or copy-paste)_
- [checkbox-card](https://cascivo.com/llms/checkbox-card.md) — Multi-selectable card backed by a native checkbox. Use multiple independent CheckboxCards for multi-select scenarios. _(npm @cascivo/react · or copy-paste)_
- [color-picker](https://cascivo.com/llms/color-picker.md) — Interactive color selection widget with saturation/lightness area, hue and alpha sliders _(npm @cascivo/react · or copy-paste)_
- [combobox](https://cascivo.com/llms/combobox.md) — Filterable single-select with an animated custom listbox, built on the dropdown open/close machine _(npm @cascivo/react · or copy-paste)_
- [copy-button](https://cascivo.com/llms/copy-button.md) — Icon button that copies a value to the clipboard with copied feedback _(npm @cascivo/react · or copy-paste)_
- [date-picker](https://cascivo.com/llms/date-picker.md) — An accessible date-picker with a calendar popover. _(npm @cascivo/react · or copy-paste)_
- [date-range-picker](https://cascivo.com/llms/date-range-picker.md) — A dual-calendar picker for selecting a contiguous date range. _(npm @cascivo/react · or copy-paste)_
- [editable](https://cascivo.com/llms/editable.md) — Inline click-to-edit text field _(npm @cascivo/react · or copy-paste)_
- [editor/code-editor](https://cascivo.com/llms/editor/code-editor.md) — Lightweight code editor — a native textarea overlaid on a syntax-highlighted layer, with line numbers and Tab indent. _(npm @cascivo/editor)_
- [fab](https://cascivo.com/llms/fab.md) — Floating action button anchored to a screen corner, with an optional speed-dial of secondary actions _(npm @cascivo/react · or copy-paste)_
- [field](https://cascivo.com/llms/field.md) — Form-field wrapper composing label, control, description, and error _(npm @cascivo/react · or copy-paste)_
- [file-uploader](https://cascivo.com/llms/file-uploader.md) — Drag-and-drop file upload zone with file list and status indicators. _(npm @cascivo/react · or copy-paste)_
- [filter](https://cascivo.com/llms/filter.md) — A group of toggleable pill or outline buttons for filtering content by category _(npm @cascivo/react · or copy-paste)_
- [form](https://cascivo.com/llms/form.md) — Typed signal-based form store (createForm/useForm) with sync/async validation and a thin Form element wrapper _(npm @cascivo/react · or copy-paste)_
- [icon-button](https://cascivo.com/llms/icon-button.md) — Square, icon-only button with a required accessible label _(npm @cascivo/react · or copy-paste)_
- [input](https://cascivo.com/llms/input.md) — Text input field with optional label, hint, and error state _(npm @cascivo/react · or copy-paste)_
- [input-group](https://cascivo.com/llms/input-group.md) — Prefix/suffix addon wrapper for Input; InputGroupAddon renders inline icons/units inside the field border; ButtonGroup collapses adjacent button borders _(npm @cascivo/react · or copy-paste)_
- [label](https://cascivo.com/llms/label.md) — Accessible caption for a form control _(npm @cascivo/react · or copy-paste)_
- [multi-select](https://cascivo.com/llms/multi-select.md) — Searchable multi-value select with popover listbox _(npm @cascivo/react · or copy-paste)_
- [native-select](https://cascivo.com/llms/native-select.md) — A styled native <select> that keeps platform form/keyboard behavior with a custom chevron and focus ring _(npm @cascivo/react · or copy-paste)_
- [number-input](https://cascivo.com/llms/number-input.md) — Numeric input with stepper buttons, clamping, precision, and locale formatting _(npm @cascivo/react · or copy-paste)_
- [otp-input](https://cascivo.com/llms/otp-input.md) — Segmented one-time code input _(npm @cascivo/react · or copy-paste)_
- [password-input](https://cascivo.com/llms/password-input.md) — Password input with reveal toggle and optional strength meter _(npm @cascivo/react · or copy-paste)_
- [radio](https://cascivo.com/llms/radio.md) — Single choice from a set, grouped with RadioGroup _(npm @cascivo/react · or copy-paste)_
- [radio-card](https://cascivo.com/llms/radio-card.md) — Selectable card backed by a native radio input. Use RadioCardGroup for single-select groups. _(npm @cascivo/react · or copy-paste)_
- [rating-group](https://cascivo.com/llms/rating-group.md) — Star rating input with accessible radio group pattern _(npm @cascivo/react · or copy-paste)_
- [search](https://cascivo.com/llms/search.md) — Search input with debounced search callback and clear button _(npm @cascivo/react · or copy-paste)_
- [segmented-control](https://cascivo.com/llms/segmented-control.md) — Mutually exclusive toggle group _(npm @cascivo/react · or copy-paste)_
- [select](https://cascivo.com/llms/select.md) — Native select menu styled to match the design system _(npm @cascivo/react · or copy-paste)_
- [slider](https://cascivo.com/llms/slider.md) — Range input for selecting a value within bounds _(npm @cascivo/react · or copy-paste)_
- [swap](https://cascivo.com/llms/swap.md) — Animated toggle between two icon/content states with rotate or flip transition _(npm @cascivo/react · or copy-paste)_
- [tags-input](https://cascivo.com/llms/tags-input.md) — Free-form multi-value chip input _(npm @cascivo/react · or copy-paste)_
- [textarea](https://cascivo.com/llms/textarea.md) — Multi-line text input with optional label, hint, and error state _(npm @cascivo/react · or copy-paste)_
- [tile](https://cascivo.com/llms/tile.md) — A selectable card with radio (single) or checkbox (multi) semantics, toggled by click or keyboard _(npm @cascivo/react · or copy-paste)_
- [time-picker](https://cascivo.com/llms/time-picker.md) — Native time input wrapper with label, hint, error, and size variants _(npm @cascivo/react · or copy-paste)_
- [toggle](https://cascivo.com/llms/toggle.md) — On/off switch built as an accessible button _(npm @cascivo/react · or copy-paste)_
- [toggle-group](https://cascivo.com/llms/toggle-group.md) — A set of toggle buttons for single or multiple selection _(npm @cascivo/react · or copy-paste)_

### layout

- [app-shell](https://cascivo.com/llms/app-shell.md) — Sticky-header + full-height side-nav + single-scroll-container layout with an animated, accessible nav toggle. _(npm @cascivo/react · or copy-paste)_
- [aspect-ratio](https://cascivo.com/llms/aspect-ratio.md) — Constrains content to a fixed width-to-height ratio _(npm @cascivo/react · or copy-paste)_
- [indicator](https://cascivo.com/llms/indicator.md) — Positions an overlay element (badge, dot, count) at a corner of its child _(npm @cascivo/react · or copy-paste)_
- [join](https://cascivo.com/llms/join.md) — Groups adjacent children into a seamless joined element by removing interior borders and radii _(npm @cascivo/react · or copy-paste)_
- [layout/app-shell](https://cascivo.com/llms/layout/app-shell.md) — Full-page application shell with persisted collapsible sidebar. Includes a signal-driven top progress bar with determinate progress, error state, and dismissible error strip. _(npm @cascivo/react · or copy-paste)_
- [layout/auth-layout](https://cascivo.com/llms/layout/auth-layout.md) — Centered card layout for authentication pages (login, register, forgot password). _(copy-paste)_
- [layout/auto-grid](https://cascivo.com/llms/layout/auto-grid.md) — Media-query-free responsive grid — columns auto-fill based on available space. _(npm @cascivo/react · or copy-paste)_
- [layout/center](https://cascivo.com/llms/layout/center.md) — Horizontally centered container with a configurable max-width. _(npm @cascivo/react · or copy-paste)_
- [layout/columns](https://cascivo.com/llms/layout/columns.md) — Equal-width multi-column layout that collapses to single column on narrow viewports. _(npm @cascivo/react · or copy-paste)_
- [layout/dashboard-layout](https://cascivo.com/llms/layout/dashboard-layout.md) — Dashboard page layout with stats strip, main content area, and optional aside. _(copy-paste)_
- [layout/flex](https://cascivo.com/llms/layout/flex.md) — Flex layout primitive for vertical or horizontal stacking with gap control. ⚠ Unlike CSS `flex-direction`, `direction` defaults to `vertical` — pass `direction="horizontal"` for a row. _(npm @cascivo/react · or copy-paste)_
- [layout/grid](https://cascivo.com/llms/layout/grid.md) — CSS grid layout primitive with responsive column collapsing. Establishes its own containment, so responsive `cols` adapt to the grid’s own slot width with no wrapper or container ancestor required. _(npm @cascivo/react · or copy-paste)_
- [layout/masonry](https://cascivo.com/llms/layout/masonry.md) — Masonry layout — native CSS masonry where supported, multi-column fallback elsewhere (fallback orders items top-to-bottom per column). _(copy-paste)_
- [layout/page-header](https://cascivo.com/llms/layout/page-header.md) — Page-level header with title, description, breadcrumb, and actions slots. _(npm @cascivo/react · or copy-paste)_
- [layout/section](https://cascivo.com/llms/layout/section.md) — Page-section shell with block padding, centered inner width, and stack gap. _(copy-paste)_
- [layout/settings-layout](https://cascivo.com/llms/layout/settings-layout.md) — Two-column settings page layout with a fixed-width menu and fluid content area. _(copy-paste)_
- [layout/spacer](https://cascivo.com/llms/layout/spacer.md) — Fixed-height spacing block using design token steps. _(npm @cascivo/react · or copy-paste)_
- [layout/split-view](https://cascivo.com/llms/layout/split-view.md) — Resizable two-pane split layout with keyboard and pointer drag support. _(copy-paste)_
- [resizable](https://cascivo.com/llms/resizable.md) — Two-pane splitter whose divider can be dragged or keyboard-nudged to reallocate space _(npm @cascivo/react · or copy-paste)_
- [scroll-area](https://cascivo.com/llms/scroll-area.md) — A scroll container with styled, slim scrollbars and overflow shadows _(npm @cascivo/react · or copy-paste)_
- [section/cta](https://cascivo.com/llms/section/cta.md) — Call-to-action band — quiet hairline-bordered section with title, description, and centered actions. Replace demo content before shipping. _(copy-paste)_
- [section/feature-grid](https://cascivo.com/llms/section/feature-grid.md) — Feature section — AutoGrid of items with optional title, description, and icon slots. Icons are optional; the grid works text-only. Replace demo content before shipping. _(copy-paste)_
- [section/hero](https://cascivo.com/llms/section/hero.md) — Page hero section — centered or split layout with eyebrow, title, description, actions and media slots. Replace demo content before shipping. _(copy-paste)_
- [section/media-masonry](https://cascivo.com/llms/section/media-masonry.md) — Masonry gallery section — native CSS masonry where supported, multi-column fallback elsewhere (fallback orders tiles top-to-bottom per column). Tiles style themselves; section provides only the layout shell. _(copy-paste)_
- [section/page-footer](https://cascivo.com/llms/section/page-footer.md) — Site footer — AutoGrid of link groups with a brand/meta bottom row. Renders a <footer> element with a <nav aria-label="Footer"> wrapping the link columns. _(copy-paste)_
- [section/stats-band](https://cascivo.com/llms/section/stats-band.md) — KPI strip — horizontal band of stats with optional delta and inline sparkline trend. Wraps via AutoGrid on narrow containers. No visible heading; provide aria-label for accessibility. _(copy-paste)_
- [stack](https://cascivo.com/llms/stack.md) — Overlaps children in a CSS grid stack with a configurable offset to create a card-pile effect _(npm @cascivo/react · or copy-paste)_

### marketing

- [block/faq](https://cascivo.com/llms/block/faq.md) — Frequently-asked-questions section composed from the Accordion component, with a centered, readable measure. _(copy-paste)_
- [block/marketing-features](https://cascivo.com/llms/block/marketing-features.md) — Three-column responsive feature grid with icon, title, and description per cell. _(copy-paste)_
- [block/marketing-hero](https://cascivo.com/llms/block/marketing-hero.md) — Full-width hero with headline, subtitle, CTA pair, and trust badges. _(copy-paste)_
- [block/pricing](https://cascivo.com/llms/block/pricing.md) — Responsive three-tier pricing section composed from Card, Badge, and Button, with a highlighted featured plan. _(copy-paste)_
- [block/site-footer](https://cascivo.com/llms/block/site-footer.md) — Multi-column site footer composed from Link and Separator, with a brand blurb, link columns, and a legal row. _(copy-paste)_
- [block/testimonials](https://cascivo.com/llms/block/testimonials.md) — Responsive testimonial grid composed from Card and Avatar, with a quote and attribution per card. _(copy-paste)_

### navigation

- [accordion](https://cascivo.com/llms/accordion.md) — Vertically stacked, collapsible content sections _(npm @cascivo/react · or copy-paste)_
- [breadcrumb](https://cascivo.com/llms/breadcrumb.md) — Shows the current page location within a navigation hierarchy _(npm @cascivo/react · or copy-paste)_
- [dock](https://cascivo.com/llms/dock.md) — Fixed bottom navigation bar for mobile app shells with up to 5 items _(npm @cascivo/react · or copy-paste)_
- [header](https://cascivo.com/llms/header.md) — App top bar with brand, primary navigation links, and an actions slot _(npm @cascivo/react · or copy-paste)_
- [header-panel](https://cascivo.com/llms/header-panel.md) — Non-modal panel anchored below the shell header at the inline-end edge — hosts notifications, app switcher, user settings _(npm @cascivo/react · or copy-paste)_
- [link](https://cascivo.com/llms/link.md) — Styled anchor for navigation, standalone or inline within prose _(npm @cascivo/react · or copy-paste)_
- [menu-button](https://cascivo.com/llms/menu-button.md) — A button that opens an anchored action menu of one-shot commands _(npm @cascivo/react · or copy-paste)_
- [menubar](https://cascivo.com/llms/menubar.md) — Horizontal application menu bar with keyboard-navigable dropdown menus _(npm @cascivo/react · or copy-paste)_
- [navigation-menu](https://cascivo.com/llms/navigation-menu.md) — Site navigation bar with links and dropdown flyout panels _(npm @cascivo/react · or copy-paste)_
- [pagination](https://cascivo.com/llms/pagination.md) — Controls for navigating paged data sets, with page size selection _(npm @cascivo/react · or copy-paste)_
- [progress-indicator](https://cascivo.com/llms/progress-indicator.md) — Shows progress through the steps of a multi-step flow _(npm @cascivo/react · or copy-paste)_
- [shell-header](https://cascivo.com/llms/shell-header.md) — Console application header: brand with prefix, dropdown nav menus, global icon actions, hamburger, skip-to-content _(npm @cascivo/react · or copy-paste)_
- [side-nav](https://cascivo.com/llms/side-nav.md) — Collapsible sidebar navigation with optional icons and one level of grouping _(npm @cascivo/react · or copy-paste)_
- [skip-nav](https://cascivo.com/llms/skip-nav.md) — Skip link that jumps keyboard users past the navigation to the main content _(npm @cascivo/react (SkipNavLink, SkipNavLinkProps, SkipNavTarget, SkipNavTargetProps) · the SkipNav component itself is copy-paste)_
- [steps](https://cascivo.com/llms/steps.md) — Visual progress indicator for multi-step flows with horizontal and vertical orientations _(npm @cascivo/react · or copy-paste)_
- [switcher](https://cascivo.com/llms/switcher.md) — App/product switcher list — lives inside HeaderPanel, renders links with active indicator and optional dividers _(npm @cascivo/react · or copy-paste)_
- [tabs](https://cascivo.com/llms/tabs.md) — Switch between related panels of content _(npm @cascivo/react · or copy-paste)_
- [toc](https://cascivo.com/llms/toc.md) — Table of contents with scroll-spy highlighting of the active section _(npm @cascivo/react · or copy-paste)_

### overlay

- [action-sheet](https://cascivo.com/llms/action-sheet.md) — Bottom-rising sheet of discrete actions (iOS action-sheet pattern) with a Cancel button _(npm @cascivo/react · or copy-paste)_
- [alert-dialog](https://cascivo.com/llms/alert-dialog.md) — Confirmation dialog requiring explicit user action; no light-dismiss _(npm @cascivo/react · or copy-paste)_
- [bottom-sheet](https://cascivo.com/llms/bottom-sheet.md) — Mobile bottom sheet with drag-to-resize detents, velocity-projected snapping, and drag-to-dismiss _(npm @cascivo/react · or copy-paste)_
- [command-menu](https://cascivo.com/llms/command-menu.md) — Cmd+K command palette with fuzzy search over grouped commands _(npm @cascivo/react · or copy-paste)_
- [context-menu](https://cascivo.com/llms/context-menu.md) — Right-click context menu anchored at pointer coordinates via CSS custom properties _(npm @cascivo/react · or copy-paste)_
- [drawer](https://cascivo.com/llms/drawer.md) — Edge-anchored dialog panel that slides in from a screen edge with CSS-only enter/exit motion _(npm @cascivo/react · or copy-paste)_
- [dropdown](https://cascivo.com/llms/dropdown.md) — Menu of actions revealed from a trigger _(npm @cascivo/react · or copy-paste)_
- [hover-card](https://cascivo.com/llms/hover-card.md) — Hover-triggered popover with configurable open/close delay _(npm @cascivo/react · or copy-paste)_
- [menu](https://cascivo.com/llms/menu.md) — Dropdown menu with keyboard navigation, built on usePopover _(npm @cascivo/react · or copy-paste)_
- [modal](https://cascivo.com/llms/modal.md) — Accessible dialog overlay using native <dialog> element _(npm @cascivo/react · or copy-paste)_
- [overflow-menu](https://cascivo.com/llms/overflow-menu.md) — Kebab icon button revealing a menu of row-level actions _(npm @cascivo/react · or copy-paste)_
- [popover](https://cascivo.com/llms/popover.md) — Anchored floating panel built on CSS Anchor Positioning + Popover API _(npm @cascivo/react · or copy-paste)_
- [sheet](https://cascivo.com/llms/sheet.md) — Slide-in panel from any edge, using popover=manual and @starting-style animations _(npm @cascivo/react · or copy-paste)_
- [toast](https://cascivo.com/llms/toast.md) — Transient notification surfaced via the useToast hook _(npm @cascivo/react (ToastOptions, ToastProvider, ToastVariant, dismissAllToasts, useToast) · the Toast component itself is copy-paste)_
- [toggletip](https://cascivo.com/llms/toggletip.md) — A click-triggered info popover for supplementary, selectable content _(npm @cascivo/react · or copy-paste)_
- [tooltip](https://cascivo.com/llms/tooltip.md) — Contextual label shown on hover or focus _(npm @cascivo/react · or copy-paste)_

### shell

- [block/app-shell](https://cascivo.com/llms/block/app-shell.md) — Two-column layout with collapsible sidebar, nav links, and content area. _(copy-paste)_
- [block/settings-profile](https://cascivo.com/llms/block/settings-profile.md) — Two-section settings form: personal info fields + preference toggles. _(copy-paste)_

## Component intent summaries (use when…)

- [Accordion](https://cascivo.com/context/accordion.md) — Use when: Progressively disclosing sections of related content the user reads top to bottom
- [ActionSheet](https://cascivo.com/context/action-sheet.md) — Use when: A short list of discrete actions on a touch surface, rising from the bottom
- [Alert](https://cascivo.com/context/alert.md) — Use when: Surfacing a persistent, contextual message inline within a view (warning, error, info, success)
- [AlertDialog](https://cascivo.com/context/alert-dialog.md) — Use when: Confirming a destructive or irreversible action (delete, overwrite, sign out) before it happens
- [AppShell](https://cascivo.com/context/app-shell.md) — Use when: Building an application screen with a persistent header and side navigation
- [AspectRatio](https://cascivo.com/context/aspect-ratio.md) — Use when: Reserving a stable box for media that loads asynchronously, avoiding layout shift
- [Avatar](https://cascivo.com/context/avatar.md) — Use when: Representing a person or entity with a thumbnail image and initials fallback
- [AvatarGroup](https://cascivo.com/context/avatar-group.md) — Use when: Showing several people compactly as an overlapping stack (collaborators, attendees, reviewers)
- [Badge](https://cascivo.com/context/badge.md) — Use when: Labeling an item with a short, static status or category (e.g. "New", "Beta")
- [App Shell](https://cascivo.com/context/block/app-shell.md) — Use when: Frame for an authenticated app: persistent sidebar nav on desktop, drawer nav on mobile
- [Login Form](https://cascivo.com/context/block/auth-login.md) — Use when: Sign-in page for returning users with email + password credentials
- [Sign Up Form](https://cascivo.com/context/block/auth-signup.md) — Use when: Registration page collecting name, email, and password with confirmation
- [ConsoleApp](https://cascivo.com/context/block/console-app.md) — Use when: A Carbon-parity console shell with icon-rail nav, header panels, and aside
- [DashboardCharts](https://cascivo.com/context/block/dashboard-charts.md) — Use when: A prebuilt dashboard with KPI tiles, line, bar, and pie charts
- [Dashboard Overview](https://cascivo.com/context/block/dashboard-overview.md) — Use when: Landing view of a dashboard summarizing headline KPIs (revenue, users, orders, conversion) at a glance
- [Dashboard Table](https://cascivo.com/context/block/dashboard-table.md) — Use when: Admin views listing records (customers, orders) with text search, column sorting, and pagination
- [EmptyDashboard](https://cascivo.com/context/block/empty-dashboard.md) — Use when: A first-run or zero-data dashboard with an empty state and primary CTA
- [FAQ Accordion](https://cascivo.com/context/block/faq.md) — Use when: Pre-sales or support question sections on marketing and pricing pages
- [LoginPage](https://cascivo.com/context/block/login-page.md) — Use when: A complete login page with email and password form
- [Feature Grid](https://cascivo.com/context/block/marketing-features.md) — Use when: Landing-page section detailing product capabilities right after the hero
- [Hero Section](https://cascivo.com/context/block/marketing-hero.md) — Use when: The opening section of a landing page: headline, supporting subtitle, and a primary/secondary CTA pair
- [NotificationCenter](https://cascivo.com/context/block/notification-center.md) — Use when: A list of notification alerts with a mark-all-read action
- [PageWithBreadcrumb](https://cascivo.com/context/block/page-with-breadcrumb.md) — Use when: A centered content page with breadcrumb navigation and a page header
- [Pricing Tiers](https://cascivo.com/context/block/pricing.md) — Use when: Subscription products with a small number of tiers, each with a price, feature list, and its own CTA
- [SettingsFormPage](https://cascivo.com/context/block/settings-form-page.md) — Use when: A settings page with a profile form inside a two-column settings layout
- [Settings — Profile](https://cascivo.com/context/block/settings-profile.md) — Use when: Account settings page combining editable profile fields (name, email, bio) with notification toggles
- [SidebarApp](https://cascivo.com/context/block/sidebar-app.md) — Use when: A ready-made app shell with opinionated collapsible sidebar and top header
- [Site Footer](https://cascivo.com/context/block/site-footer.md) — Use when: Global footer for a marketing or docs site with grouped secondary navigation columns
- [StatsCards](https://cascivo.com/context/block/stats-cards.md) — Use when: A grid of KPI stat cards with trend badges
- [Testimonials](https://cascivo.com/context/block/testimonials.md) — Use when: Social-proof section on a landing or pricing page with short customer quotes
- [UsersTablePage](https://cascivo.com/context/block/users-table-page.md) — Use when: A full user-management page with table, search, and invite action
- [Blockquote](https://cascivo.com/context/blockquote.md) — Use when: Setting off a quoted passage from another source with visual emphasis
- [BottomSheet](https://cascivo.com/context/bottom-sheet.md) — Use when: A mobile surface that rises from the bottom and can be resized between detents by dragging
- [Breadcrumb](https://cascivo.com/context/breadcrumb.md) — Use when: Showing the user where the current page sits in a navigation hierarchy
- [Button](https://cascivo.com/context/button.md) — Use when: Triggering an action or navigation the user initiates by click/press
- [ButtonGroup](https://cascivo.com/context/button-group.md) — Use when: Presenting several related, independent actions that read as one control (e.g. an editor toolbar)
- [Calendar](https://cascivo.com/context/calendar.md) — Use when: Showing an always-visible month grid for picking a single date (inline, not a popover)
- [Card](https://cascivo.com/context/card.md) — Use when: Grouping related content into a visually distinct surface with border/shadow
- [Carousel](https://cascivo.com/context/carousel.md) — Use when: Presenting a sequence of media or cards the user pages through one at a time
- [AreaChart](https://cascivo.com/context/chart/area-chart.md) — Use when: Showing cumulative volume or magnitude of a trend over continuous time
- [BarChart](https://cascivo.com/context/chart/bar-chart.md) — Use when: Comparing discrete categorical values across groups
- [Boxplot](https://cascivo.com/context/chart/boxplot.md) — Use when: Comparing the distribution spread, median, and quartiles across groups
- [BubbleChart](https://cascivo.com/context/chart/bubble-chart.md) — Use when: Plotting three dimensions at once — x, y, and a size-encoded magnitude
- [Bullet](https://cascivo.com/context/chart/bullet.md) — Use when: Showing a single measure against a target with qualitative range bands
- [Calendar](https://cascivo.com/context/chart/calendar.md) — Use when: Showing a daily value over weeks/months (activity, contributions)
- [Candlestick](https://cascivo.com/context/chart/candlestick.md) — Use when: Showing open/high/low/close price movement over time
- [ComboChart](https://cascivo.com/context/chart/combo-chart.md) — Use when: Overlaying two related metrics with different scales (e.g. volume bars + rate line)
- [Funnel](https://cascivo.com/context/chart/funnel.md) — Use when: Showing drop-off across the ordered stages of a process (signup, checkout)
- [Gauge](https://cascivo.com/context/chart/gauge.md) — Use when: A single value against a range with a needle and threshold zones
- [Heatmap](https://cascivo.com/context/chart/heatmap.md) — Use when: Showing magnitude across two categorical dimensions as a color-coded matrix
- [Histogram](https://cascivo.com/context/chart/histogram.md) — Use when: Showing the frequency distribution of a single continuous variable
- [Kpi](https://cascivo.com/context/chart/kpi.md) — Use when: Highlighting a single headline metric with an optional change delta
- [LineChart](https://cascivo.com/context/chart/line-chart.md) — Use when: Showing trends and precise values over continuous time or a numeric range
- [Meter](https://cascivo.com/context/chart/meter.md) — Use when: Showing a rated or gauged value within a known min/max range
- [PieChart](https://cascivo.com/context/chart/pie-chart.md) — Use when: Showing part-of-whole proportions with five or fewer slices
- [Polar](https://cascivo.com/context/chart/polar.md) — Use when: Cyclical/directional categories where the circle is meaningful (wind, hours, months)
- [Radar](https://cascivo.com/context/chart/radar.md) — Use when: Comparing several entities across the same set of quantitative dimensions
- [RadialBar](https://cascivo.com/context/chart/radial-bar.md) — Use when: Showing a few progress-to-goal values in a compact circular form
- [Sankey](https://cascivo.com/context/chart/sankey.md) — Use when: Showing flow/throughput between stages or categories
- [ScatterChart](https://cascivo.com/context/chart/scatter-chart.md) — Use when: Revealing correlation or clustering between two numeric variables
- [Sparkline](https://cascivo.com/context/chart/sparkline.md) — Use when: Embedding a compact micro-trend inline in text, tables, or KPI cards
- [Stream](https://cascivo.com/context/chart/stream.md) — Use when: Showing how several series ebb and flow over time as proportions of a whole
- [Sunburst](https://cascivo.com/context/chart/sunburst.md) — Use when: Showing a part-of-whole hierarchy across multiple levels
- [Treemap](https://cascivo.com/context/chart/treemap.md) — Use when: Showing part-to-whole proportions across many segments in a compact area
- [ChatBubble](https://cascivo.com/context/chat-bubble.md) — Use when: Chat UIs and messaging features showing conversation history
- [Checkbox](https://cascivo.com/context/checkbox.md) — Use when: Selecting zero or more options from a list where each choice is independent
- [CheckboxCard](https://cascivo.com/context/checkbox-card.md) — Use when: Multi-select where each option needs a title and supporting description (feature toggles, add-ons)
- [Code](https://cascivo.com/context/code.md) — Use when: Marking up an inline identifier, command, path, or token within prose
- [CodeSnippet](https://cascivo.com/context/code-snippet.md) — Use when: Showing a command, token, or path the user is expected to copy
- [Collapsible](https://cascivo.com/context/collapsible.md) — Use when: Hiding a single secondary block until the user asks for it
- [ColorPicker](https://cascivo.com/context/color-picker.md) — Use when: Letting a user choose an arbitrary color via a visual saturation/lightness area plus hue control
- [Combobox](https://cascivo.com/context/combobox.md) — Use when: Single-select from a long list where type-to-filter makes finding an option faster
- [CommandMenu](https://cascivo.com/context/command-menu.md) — Use when: Giving power users a global Cmd/Ctrl+K palette to search and run actions or navigate
- [Comparison](https://cascivo.com/context/comparison.md) — Use when: Showing the difference between two versions of similar content (before/after edits, original vs processed)
- [ContainedList](https://cascivo.com/context/contained-list.md) — Use when: Grouping a short set of related rows under a visible heading in a bordered surface
- [ContextMenu](https://cascivo.com/context/context-menu.md) — Use when: Offering actions contextual to an element via right-click (rename, delete, copy on a row or canvas item)
- [CopyButton](https://cascivo.com/context/copy-button.md) — Use when: Letting users copy a short value to the clipboard — install commands, API keys, tokens, share links
- [DataList](https://cascivo.com/context/data-list.md) — Use when: Displaying read-only key-value metadata (profile fields, record summaries)
- [DataTable](https://cascivo.com/context/data-table.md) — Use when: Displaying tabular data with columns the user sorts, filters, or pages through
- [DatePicker](https://cascivo.com/context/date-picker.md) — Use when: Picking a single calendar date in a form where a visual month grid helps (due dates, bookings)
- [DateRangePicker](https://cascivo.com/context/date-range-picker.md) — Use when: Selecting a contiguous start–end date range (reporting windows, bookings, filters)
- [Dock](https://cascivo.com/context/dock.md) — Use when: Mobile app-shell navigation with 3–5 top-level destinations
- [Drawer](https://cascivo.com/context/drawer.md) — Use when: A side or edge panel for navigation, filters, or detail views that needs full-height space
- [Dropdown](https://cascivo.com/context/dropdown.md) — Use when: Revealing a short menu of actions from a trigger button (row actions, "More" overflow, account menu)
- [Editable](https://cascivo.com/context/editable.md) — Use when: Editing a single piece of text in place where the value is normally read-only — titles, names, labels
- [CodeEditor](https://cascivo.com/context/editor/code-editor.md) — Use when: Editing code or config inline — JSON, snippets, web languages — with line numbers and syntax colors
- [Highlight](https://cascivo.com/context/editor/highlight.md) — Use when: Displaying non-editable code or config with syntax colors — docs, snippets, examples
- [EmptyState](https://cascivo.com/context/empty-state.md) — Use when: Filling a view that has no data with guidance and a primary next step
- [Fab](https://cascivo.com/context/fab.md) — Use when: A single, high-emphasis primary action that floats above scrolling content (e.g. Compose, Add)
- [Field](https://cascivo.com/context/field.md) — Use when: Pairing a single control with its label, helper text, and validation message
- [FileUploader](https://cascivo.com/context/file-uploader.md) — Use when: Letting users attach one or more files via click-to-browse or drag-and-drop
- [Filter](https://cascivo.com/context/filter.md) — Use when: Tag or category filtering on listing pages where the active filters must remain visible
- [Flow](https://cascivo.com/context/flow/flow.md) — Use when: Rendering a graph from data — the common case and the agent-emittable surface
- [FlowBackground](https://cascivo.com/context/flow/flow-background.md) — Use when: Giving a flow canvas a sense of space and scale with a dotted or grid backdrop
- [FlowCanvas](https://cascivo.com/context/flow/flow-canvas.md) — Use when: Hosting a hand-composed flow from low-level FlowNode/FlowEdge primitives
- [FlowControls](https://cascivo.com/context/flow/flow-controls.md) — Use when: Giving users explicit zoom/fit controls on a flow canvas
- [FlowEdge](https://cascivo.com/context/flow/flow-edge.md) — Use when: Connecting two nodes with a directed path and arrowhead
- [FlowHandle](https://cascivo.com/context/flow/flow-handle.md) — Use when: Marking where edges connect to a node
- [FlowMiniMap](https://cascivo.com/context/flow/flow-minimap.md) — Use when: Orienting users in a large graph
- [FlowNode](https://cascivo.com/context/flow/flow-node.md) — Use when: Representing a unit in a graph that holds arbitrary themed content
- [FlowPanel](https://cascivo.com/context/flow/flow-panel.md) — Use when: Overlaying custom UI (a legend, a toolbar) on a flow canvas
- [FlowStory](https://cascivo.com/context/flow/flow-story.md) — Use when: Explaining how a flow works step by step, not just showing a static diagram
- [Form](https://cascivo.com/context/form.md) — Use when: Collecting and submitting a set of related field values together
- [Header](https://cascivo.com/context/header.md) — Use when: Providing a simple marketing or app top bar with brand, links, and actions
- [HeaderPanel](https://cascivo.com/context/header-panel.md) — Use when: Hosting a non-modal panel anchored under the shell header (notifications, switcher, settings)
- [Heading](https://cascivo.com/context/heading.md) — Use when: Titling a page or section as part of the document outline
- [HoverCard](https://cascivo.com/context/hover-card.md) — Use when: Showing a rich preview (avatar, summary, links) when a user hovers or focuses a trigger
- [IconButton](https://cascivo.com/context/icon-button.md) — Use when: A compact, recognizable action where an icon alone communicates intent (close, edit, more)
- [Image](https://cascivo.com/context/image.md) — Use when: Displaying a content image that should show a placeholder while loading and degrade gracefully on error
- [Indicator](https://cascivo.com/context/indicator.md) — Use when: Notification counts on icon buttons
- [InlineLoading](https://cascivo.com/context/inline-loading.md) — Use when: Showing the progress of a single inline action — a Save button that becomes "Saving… / Saved / Failed"
- [Input](https://cascivo.com/context/input.md) — Use when: Collecting a single line of free-form text from the user
- [InputGroup](https://cascivo.com/context/input-group.md) — Use when: Attaching a prefix/suffix addon (protocol, currency, unit) to an Input so it reads as one field
- [Item](https://cascivo.com/context/item.md) — Use when: Composing a single content row with leading media, a text block, and trailing actions
- [Join](https://cascivo.com/context/join.md) — Use when: Input + button search groups where the two controls should appear as one unit
- [Kbd](https://cascivo.com/context/kbd.md) — Use when: Showing a keyboard key or shortcut the user should press
- [Label](https://cascivo.com/context/label.md) — Use when: Naming a single form control (input, select, checkbox) so clicking the text focuses it
- [AppShell](https://cascivo.com/context/layout/app-shell.md) — Use when: A full-page application frame with header, collapsible sidebar, and content
- [AuthLayout](https://cascivo.com/context/layout/auth-layout.md) — Use when: Centered card layout for authentication pages — login, register, reset
- [AutoGrid](https://cascivo.com/context/layout/auto-grid.md) — Use when: Responsive card or tile grids that auto-fit columns to available width
- [Center](https://cascivo.com/context/layout/center.md) — Use when: Horizontally centering content within a configurable max-width
- [Columns](https://cascivo.com/context/layout/columns.md) — Use when: Equal-width multi-column content that collapses to one column when narrow
- [DashboardLayout](https://cascivo.com/context/layout/dashboard-layout.md) — Use when: A dashboard page with a stats strip, main content area, and optional aside
- [Flex](https://cascivo.com/context/layout/flex.md) — Use when: Arranging children vertically or horizontally with a consistent gap
- [Grid](https://cascivo.com/context/layout/grid.md) — Use when: Two-dimensional layouts with an explicit column count
- [Masonry](https://cascivo.com/context/layout/masonry.md) — Use when: Galleries of variable-height items packed into balanced columns
- [PageHeader](https://cascivo.com/context/layout/page-header.md) — Use when: A page-level header with title, description, breadcrumb, and action slots
- [Section](https://cascivo.com/context/layout/section.md) — Use when: Wrapping a page region with block padding and a centered inner width
- [SettingsLayout](https://cascivo.com/context/layout/settings-layout.md) — Use when: A two-column settings page with a fixed-width menu and fluid content
- [Spacer](https://cascivo.com/context/layout/spacer.md) — Use when: Inserting a fixed vertical gap between blocks using spacing token steps
- [SplitView](https://cascivo.com/context/layout/split-view.md) — Use when: Two side-by-side panes the user can resize via pointer or keyboard
- [Link](https://cascivo.com/context/link.md) — Use when: Navigating to another page, view, or resource via a real href
- [List](https://cascivo.com/context/list.md) — Use when: Presenting a set of related items as a bulleted or numbered list
- [LogViewer](https://cascivo.com/context/log-viewer.md) — Use when: Rendering continuous, high-volume log or stream output (build/deploy logs, server output)
- [Menu](https://cascivo.com/context/menu.md) — Use when: Presenting a list of actions or commands triggered from a button
- [MenuButton](https://cascivo.com/context/menu-button.md) — Use when: Exposing a small set of one-shot actions behind a single labeled button
- [Menubar](https://cascivo.com/context/menubar.md) — Use when: A persistent application-style command bar (File / Edit / View) where each top-level entry opens a menu of actions
- [Modal](https://cascivo.com/context/modal.md) — Use when: Presenting focused content or a task that must interrupt the current flow
- [MultiSelect](https://cascivo.com/context/multi-select.md) — Use when: Selecting several values at once from a known list of options
- [NativeSelect](https://cascivo.com/context/native-select.md) — Use when: A standard single-choice dropdown where native behavior and form integration matter most
- [NavigationMenu](https://cascivo.com/context/navigation-menu.md) — Use when: Primary site navigation where some destinations are plain links and others reveal a flyout of grouped links
- [Notification](https://cascivo.com/context/notification.md) — Use when: Surfacing a prominent, often actionable message in the page flow (sync result, failed upload, available update)
- [NumberInput](https://cascivo.com/context/number-input.md) — Use when: Collecting a bounded numeric value where increment/decrement by a known step is natural (quantity, opacity, count)
- [OtpInput](https://cascivo.com/context/otp-input.md) — Use when: Entering a fixed-length one-time code (2FA, SMS verification, email confirmation) split across per-character slots
- [OverflowMenu](https://cascivo.com/context/overflow-menu.md) — Use when: Collapsing secondary row-level or item-level actions behind a kebab trigger in dense layouts like tables and lists
- [Pagination](https://cascivo.com/context/pagination.md) — Use when: Navigating between pages of a paged dataset
- [PasswordInput](https://cascivo.com/context/password-input.md) — Use when: Collecting a secret credential that should be masked by default with an opt-in reveal toggle
- [Popover](https://cascivo.com/context/popover.md) — Use when: Showing rich, interactive content anchored to a trigger that the user must explicitly open by clicking
- [Progress](https://cascivo.com/context/progress.md) — Use when: Tracked operations with a known total (file uploads, multi-step imports)
- [ProgressBar](https://cascivo.com/context/progress-bar.md) — Use when: Showing linear determinate progress of a task with a known percentage (value)
- [ProgressCircle](https://cascivo.com/context/progress-circle.md) — Use when: Showing determinate progress compactly as a circular arc
- [ProgressIndicator](https://cascivo.com/context/progress-indicator.md) — Use when: Showing progress through the discrete steps of a multi-step flow (wizard, checkout)
- [Prose](https://cascivo.com/context/prose.md) — Use when: Styling long-form authored content (articles, docs, CMS output)
- [PullToRefresh](https://cascivo.com/context/pull-to-refresh.md) — Use when: A scrollable list or feed on touch devices that the user refreshes by pulling down from the top
- [QrCode](https://cascivo.com/context/qr-code.md) — Use when: Letting users scan a URL, contact, or short token with a phone camera
- [RadialProgress](https://cascivo.com/context/radial-progress.md) — Use when: Dashboard KPI metrics showing completion percentage
- [Radio](https://cascivo.com/context/radio.md) — Use when: Choosing exactly one option from a small, mutually exclusive set (roughly 2–6) where all options should stay visible
- [RadioCard](https://cascivo.com/context/radio-card.md) — Use when: Single-select from a few options where each choice needs a title plus supporting description (plans, tiers, shipping methods)
- [RatingGroup](https://cascivo.com/context/rating-group.md) — Use when: Capturing a discrete subjective rating on a small fixed scale (e.g. 1–5 stars)
- [RelativeTime](https://cascivo.com/context/relative-time.md) — Use when: Showing how long ago something happened in human terms ("3 minutes ago")
- [Resizable](https://cascivo.com/context/resizable.md) — Use when: Letting users reallocate space between two adjacent regions, e.g. an editor and a preview
- [ScrollArea](https://cascivo.com/context/scroll-area.md) — Use when: Constraining a region to a fixed height/width with overflow scrolling
- [Search](https://cascivo.com/context/search.md) — Use when: A query field that filters or searches content, with a built-in clear button and debounced onSearch
- [Cta](https://cascivo.com/context/section/cta.md) — Use when: A call-to-action band with title, description, and centered actions
- [FeatureGrid](https://cascivo.com/context/section/feature-grid.md) — Use when: A feature section laying out items in an auto-fitting grid
- [Hero](https://cascivo.com/context/section/hero.md) — Use when: The primary page intro with eyebrow, title, description, actions, and media
- [MediaMasonry](https://cascivo.com/context/section/media-masonry.md) — Use when: A full-width media gallery section with masonry packing
- [PageFooter](https://cascivo.com/context/section/page-footer.md) — Use when: A site footer with grouped link columns and a brand/meta bottom row
- [StatsBand](https://cascivo.com/context/section/stats-band.md) — Use when: A horizontal KPI strip with optional deltas and inline sparkline trends
- [SegmentedControl](https://cascivo.com/context/segmented-control.md) — Use when: A compact inline single choice among a few mutually exclusive options (2–5) such as view modes or time ranges
- [Select](https://cascivo.com/context/select.md) — Use when: Choosing exactly one value from a known, finite list inside a form
- [Separator](https://cascivo.com/context/separator.md) — Use when: Dividing groups of content within a section or menu
- [Sheet](https://cascivo.com/context/sheet.md) — Use when: Showing secondary content or a form in a panel that slides in from a screen edge
- [ShellHeader](https://cascivo.com/context/shell-header.md) — Use when: Building console/admin app chrome with brand, dropdown nav, and global icon actions
- [SideNav](https://cascivo.com/context/side-nav.md) — Use when: Persistent primary navigation along the side of an app shell
- [Skeleton](https://cascivo.com/context/skeleton.md) — Use when: Indicating loading by mirroring the shape of the content that will appear
- [SkipNav](https://cascivo.com/context/skip-nav.md) — Use when: Letting keyboard users jump past repeated navigation to the main content
- [Slider](https://cascivo.com/context/slider.md) — Use when: Selecting a value within a continuous or stepped numeric range where approximate adjustment is fine
- [Spinner](https://cascivo.com/context/spinner.md) — Use when: Indicating indeterminate work where duration and progress are unknown
- [Stack](https://cascivo.com/context/stack.md) — Use when: Card pile UI where depth and layering should be visible
- [Stat](https://cascivo.com/context/stat.md) — Use when: Highlighting a single key metric with a clear label
- [Status](https://cascivo.com/context/status.md) — Use when: Communicating the live state of a system or entity (operational, deploying, down)
- [Steps](https://cascivo.com/context/steps.md) — Use when: Checkout flows where the user moves through a fixed sequence of screens
- [StructuredList](https://cascivo.com/context/structured-list.md) — Use when: Presenting a set of related records in aligned columns the user scans top to bottom
- [Swap](https://cascivo.com/context/swap.md) — Use when: Theme toggles where an icon animates between two states (sun/moon)
- [SwipeItem](https://cascivo.com/context/swipe-item.md) — Use when: List rows on touch surfaces where secondary actions (archive, delete) should hide until swiped
- [Switcher](https://cascivo.com/context/switcher.md) — Use when: Listing sibling apps/products the user can switch between
- [Tabs](https://cascivo.com/context/tabs.md) — Use when: Switching between peer panels of related content in the same context
- [Tag](https://cascivo.com/context/tag.md) — Use when: Labeling, categorizing, or filtering content with a compact chip
- [TagsInput](https://cascivo.com/context/tags-input.md) — Use when: Collecting an open-ended set of free-text values the user types themselves (keywords, emails, labels)
- [Text](https://cascivo.com/context/text.md) — Use when: Rendering body copy, paragraphs, and inline text in app UI
- [Textarea](https://cascivo.com/context/textarea.md) — Use when: Capturing multi-line free text such as messages, descriptions, or comments
- [Tile](https://cascivo.com/context/tile.md) — Use when: A visually rich, clickable choice card in a single- or multi-select group
- [TimePicker](https://cascivo.com/context/time-picker.md) — Use when: Capturing a time of day (HH:mm) in a form, such as a meeting or reminder time
- [Timeline](https://cascivo.com/context/timeline.md) — Use when: Showing an ordered sequence of events over time (activity feeds, order tracking)
- [Toast](https://cascivo.com/context/toast.md) — Use when: Confirming that a background or just-completed action succeeded or failed (e.g. "Saved")
- [Toc](https://cascivo.com/context/toc.md) — Use when: Long-form pages (docs, articles) that benefit from in-page jump links
- [Toggle](https://cascivo.com/context/toggle.md) — Use when: Flipping a single binary setting that takes effect immediately (e.g. notifications on/off)
- [ToggleGroup](https://cascivo.com/context/toggle-group.md) — Use when: Choosing one value from a small, mutually exclusive set that should stay visible (type="single")
- [Toggletip](https://cascivo.com/context/toggletip.md) — Use when: Revealing brief supplementary information on demand when the user clicks an info affordance
- [Tooltip](https://cascivo.com/context/tooltip.md) — Use when: Labeling an icon-only control or clarifying a terse element on hover or focus
- [TreeView](https://cascivo.com/context/tree-view.md) — Use when: Showing nested, parent/child data the user expands and collapses (file trees, org charts, nav)
- [User](https://cascivo.com/context/user.md) — Use when: Showing a person with their name and a secondary line (email, role) next to an avatar
- [VisuallyHidden](https://cascivo.com/context/visually-hidden.md) — Use when: Giving an icon-only control an accessible name without showing text

_Generated: 2026-07-27 from registry v0.13.0_