# VLLNT UI - Full Reference

> One-fetch, complete agent context for the VLLNT UI registry. 225 components, install via shadcn CLI against /r/<name>.json. Site: https://ui.vllnt.ai

## Install

```bash
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/<name>.json
# Or with npm: npx shadcn@latest add https://ui.vllnt.ai/r/<name>.json
```

## Installation

Source: https://ui.vllnt.ai/docs/installation

# Installation

VLLNT UI ships as both an npm package and a shadcn-compatible registry. Most teams should install individual components from the registry so the source lands in their app and can be adapted locally.

## Prerequisites

- Node.js 20 or newer.
- pnpm for this repository and for examples in this documentation.
- A React application with TypeScript.
- Tailwind CSS configured in the application.

## Install the package

Use the package when you want to import prebuilt exports from `@vllnt/ui`:

```bash
pnpm add @vllnt/ui
```

Then import the full package stylesheet once from your app entry, such as `app/layout.tsx` or `src/main.tsx`:

```tsx
import "@vllnt/ui/styles.css";
```

Add the VLLNT UI Tailwind preset and keep your application source in Tailwind content scanning:

```ts
// tailwind.config.ts
import uiPreset from "@vllnt/ui/tailwind-preset";

export default {
  presets: [uiPreset],
  content: ["./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
};
```

Then import a component:

```tsx
import { Button } from "@vllnt/ui";

export function SaveButton() {
  return <Button>Save</Button>;
}
```

## Add a registry component

Use the shadcn CLI when you want the component source copied into your project:

```bash
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button.json
```

Replace `button` with any component slug from the [component index](/components).

## Tailwind setup

Package installs and registry installs need slightly different setup:

- Package installs import `@vllnt/ui/styles.css` once, use `@vllnt/ui/tailwind-preset`, and scan your app source files in `content`.
- Registry installs copy component source into your app. Keep Tailwind configured for your app styles, and make sure Tailwind content scanning includes the destination paths where the shadcn CLI writes those copied components.

```ts
// tailwind.config.ts
export default {
  content: [
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./registry/**/*.{ts,tsx}",
  ],
};
```

The exact registry paths depend on your shadcn `components.json` aliases. Include whichever local directories receive copied VLLNT UI components.

Use `@vllnt/ui/themes/default.css` instead of `@vllnt/ui/styles.css` only when you intentionally want the package theme variables without Tailwind base layer styles. The theme file is variables-only; it is not a substitute for the full package stylesheet. Keep registry-generated utility classes intact unless you know the rendered states no longer need them.

## First component checklist

- Install one small component, such as `button` or `badge`.
- Import it from the copied local path or from `@vllnt/ui`, depending on your chosen install mode.
- Render it in a page with light and dark mode enabled.
- Run your app lint and typecheck before adding more components.

## CLI

Source: https://ui.vllnt.ai/docs/cli

# CLI

The VLLNT UI registry uses the same JSON descriptor shape expected by the shadcn CLI. You can install components directly from public URLs without adding a custom package dependency.

## Add one component

```bash
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button.json
```

The CLI reads the descriptor, installs dependencies, and writes source files into your configured component directory.

## Add multiple components

Install components one at a time so diffs are easy to review:

```bash
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/dialog.json
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/toast.json
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/form.json
```

## Inspect the registry first

Use the registry index when scripting:

```bash
curl https://ui.vllnt.ai/r/registry.json
```

Each item includes its slug, title, description, category, dependencies, and file list. Per-component descriptors live at:

```text
https://ui.vllnt.ai/r/<name>.json
```

## Team workflow

- Pin component additions in pull requests instead of installing during deployment.
- Review generated files like normal application code.
- Keep local edits close to the copied component so future updates are easy to reconcile.
- Re-run the CLI only when you intentionally accept upstream changes.

## Custom registries

If you build a private registry on top of VLLNT UI, keep the same descriptor fields and stable URL shape. Consumers should be able to swap only the host:

```bash
pnpm dlx shadcn@latest add https://your-registry.example.com/r/button.json
```

## Theming

Source: https://ui.vllnt.ai/docs/theming

# Theming

VLLNT UI components are styled with Tailwind utilities that read semantic CSS variables. The goal is to keep component source portable while allowing each application to define its own brand surface.

## Token model

Use semantic tokens for component intent:

- `background` and `foreground` for page surfaces.
- `card` and `card-foreground` for contained panels.
- `primary`, `secondary`, `muted`, and `accent` for interaction states.
- `border`, `input`, and `ring` for control chrome.
- `destructive` for destructive actions.

Avoid hard-coding product colors inside component internals. Prefer mapping brand color decisions into variables once.

## Dark mode

Use a class-based dark mode strategy so server-rendered markup and client hydration agree:

```tsx
<html className="dark">
  <body>{children}</body>
</html>
```

The site uses `ThemeProvider` for the registry app, but copied components only need the variables and Tailwind utilities available in their host application.

## Custom themes

Define theme variables at the application boundary:

```css
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
}
```

Keep custom themes semantic. If a component needs a new recurring intent, add a token for the intent instead of scattering one-off utility colors.

## Motion and density

Components should remain usable in dense product surfaces. Use motion to communicate state changes, not as decoration. Respect `prefers-reduced-motion` when adding new animation.

## Registry

Source: https://ui.vllnt.ai/docs/registry

# Registry

The public registry is the machine-readable contract behind the component site. It exposes a top-level index and one descriptor per component.

## Endpoints

- `/r/registry.json` lists every component and registry-level metadata.
- `/r/<name>.json` returns the install descriptor for a single component.
- `/components/<name>` is the human documentation page for the same component.

## Item shape

Registry items include:

- `name`: stable slug used in URLs.
- `title`: human-readable component name.
- `description`: short summary for search, agents, and docs.
- `type`: registry item kind.
- `category`: component category.
- `files`: source files installed by the CLI.
- `dependencies`: npm dependencies required by the component.
- `registryDependencies`: other registry components needed at runtime.
- `version` and `stability`: release metadata stamped during registry build.

## Building on top

A compatible registry should keep stable component slugs, serve JSON with cache-friendly URLs, and preserve the `files` contract expected by the shadcn CLI. If you wrap VLLNT UI in a private registry, keep your custom metadata additive so standard tooling can still read the descriptor.

## Generated files

The registry app generates shims and metadata from the package source. Do not hand-edit generated output. Change the source component, then run the documented registry build or shim sync script.

## Agent usage

Agents should prefer `/r/registry.json` for discovery and `/r/<name>.json` for implementation details. Use `/llms-full.txt` when a single text context is easier than fetching many JSON endpoints.

## Components

Source: https://ui.vllnt.ai/docs/components

# Components

VLLNT UI components are designed as accessible primitives for real application surfaces. Each component should expose predictable DOM, semantic state, and enough composition hooks to fit product workflows.

## Anatomy

Most components live under:

```text
packages/ui/src/components/<name>/
```

Common files include:

- `<name>.tsx` for source.
- `<name>.test.tsx` for Vitest coverage.
- `<name>.stories.tsx` for Storybook examples.
- `<name>.visual.tsx` for component-test screenshots when applicable.
- `index.ts` for exports.

## Composition

Prefer explicit subcomponents when a component has multiple regions. Keep root elements semantic: dialogs are dialogs, lists are lists, navigation is navigation, and controls expose native button or input behavior whenever possible.

## Accessibility

Every interactive component should support keyboard operation, visible focus, ARIA only where native semantics are not enough, and stable labels for assistive technology. Components built on Radix primitives should preserve the primitive's accessibility contract.

## Testing

Tests should cover rendering, prop forwarding, key interactions, and accessibility-critical state. When a component persists state or listens to browser events, include regression tests for storage and event behavior.

## Registry copies

Registry files are generated from package source. Fix source first, then regenerate the registry output instead of editing `apps/registry/registry/default` by hand.

## Agents

Source: https://ui.vllnt.ai/docs/agents

# Agents

VLLNT UI exposes agent-readable surfaces so coding agents can discover components, inspect install contracts, and cite current documentation without scraping the rendered site.

## llms.txt

Use `/llms.txt` for a compact overview of the registry. It includes install guidance, core docs links, and component links grouped by category.

```text
https://ui.vllnt.ai/llms.txt
```

## llms-full.txt

Use `/llms-full.txt` when the agent needs one larger text context. It includes the main docs pages and component metadata summaries.

```text
https://ui.vllnt.ai/llms-full.txt
```

## Registry JSON

Use `/r/registry.json` for discovery and `/r/<name>.json` for exact install descriptors. JSON is the most reliable source for file paths, dependencies, and registry dependencies.

## MCP

The `/mcp` route is reserved for agent workflows that need a structured protocol endpoint. Treat registry JSON as the canonical install contract and MCP as an integration surface.

## Safe agent workflow

- Fetch `/llms.txt` for orientation.
- Fetch `/r/registry.json` to choose components.
- Fetch individual `/r/<name>.json` descriptors before editing code.
- Prefer package source over generated registry files when contributing upstream.
- Run the project gates before opening a PR.

## Contributing

Source: https://ui.vllnt.ai/docs/contributing

# Contributing

The repository is a pnpm and Turborepo workspace. The package source lives in `packages/ui`, and the registry/docs site lives in `apps/registry`.

## Setup

```bash
pnpm install --frozen-lockfile
```

Use pnpm only. Do not use npm, yarn, or bun for workspace commands.

## Local dev loop

Useful commands from the repo root:

```bash
pnpm -F @vllnt/ui lint
pnpm -F @vllnt/ui exec tsc --noEmit --project tsconfig.build.json
pnpm build
pnpm test:once
pnpm check:circular
```

Run narrower tests while developing, then run the full gates before opening or updating a PR.

## Stories

Stories should demonstrate realistic states, not only default rendering. Include disabled, loading, empty, error, and long-content states when those states exist.

## Registry output

Do not hand-edit generated registry files. Update source files under `packages/ui/src/components`, then regenerate registry output through the documented scripts.

## Pull requests

Every PR should link an issue, keep the body aligned with the current head, and include validation evidence. Keep unrelated refactors out of feature PRs so review can focus on the issue being closed.

## Changelog

Source: https://ui.vllnt.ai/docs/changelog

# Changelog

This page includes the repository and package changelogs at build time. The published package changelog remains the source for package-level release notes, while the root changelog tracks site, registry, CI, and agent-surface changes.

## Sources

- Root `CHANGELOG.md`: repo-wide changes and current release target.
- `packages/ui/CHANGELOG.md`: published `@vllnt/ui` package changes.
- GitHub Releases: release artifacts and announcement notes.

## Current generated changelog

## FAQ

Source: https://ui.vllnt.ai/docs/faq

# FAQ

## What license does VLLNT UI use?

The project is released under the repository license. Check `LICENSE` in the repo for the canonical license text.

## Is this a package or a shadcn registry?

Both. You can import from `@vllnt/ui`, or you can copy component source into your app with the shadcn CLI and `/r/<name>.json` descriptors.

## What are the peer dependencies?

React, React DOM, Tailwind CSS, and Radix primitives are the important runtime expectations. Individual registry descriptors list their npm dependencies.

## Does it support React Server Components?

Components that use hooks or browser APIs are client components. Server-safe exports can be rendered from server components, but interactive components should keep their `"use client"` directive.

## Does it support Tailwind v4?

The registry site uses Tailwind-compatible utility classes and semantic variables. Check component source and your app's Tailwind setup when copying components into a Tailwind v4 project.

## Can I customize component source?

Yes. Registry installation copies source into your app. Keep changes local, and re-run the CLI only when you intentionally reconcile upstream updates.

## Are components accessible?

Accessibility is a core requirement. Components use native semantics and Radix primitives where appropriate, and tests cover important roles and interactions.

## How do I report a bug?

Use the report link on the component page or open a GitHub issue with reproduction details, expected behavior, and environment information.

## Can AI agents use the registry?

Yes. Use `/llms.txt`, `/llms-full.txt`, `/r/registry.json`, and `/r/<name>.json` for agent-friendly context.

## How often is the registry updated?

The registry is rebuilt during site deployment. Registry JSON includes version and generated metadata so consumers can compare changes.

## Design Guide

Source: https://ui.vllnt.ai/design
Raw: https://ui.vllnt.ai/DESIGN.md
Tokens: https://ui.vllnt.ai/r/design.json

# DESIGN.md

> Single source of truth for VLLNT UI's brand and design conventions.
> Humans read this file. Agents read it too — every UI suggestion must follow it.

This is the **canonical** brand & design guideline for the library. Read it on
the web at three public surfaces, all generated from this one file:

- [`/DESIGN.md`](https://ui.vllnt.ai/DESIGN.md) — this file as raw markdown (canonical for agents).
- [`/design`](https://ui.vllnt.ai/design) — human-browsable rendering with a contents nav.
- [`/r/design.json`](https://ui.vllnt.ai/r/design.json) — machine-readable token set.

The full token set lives in `packages/design/tokens.json` and is documented in
`packages/design/README.md`.

---

## 1. Brand

| Attribute | Value |
|-----------|-------|
| Name | **VLLNT UI** (always two words, both capitalised) |
| Voice | Direct. No marketing fluff. Short sentences. |
| Mission | Agent-first React components — copy-paste, you own them. |
| Tone | Confident, technical, honest about tradeoffs. |

**Voice rules**
- Sentence case for headings, button labels, tooltips. Title Case only for proper nouns.
- Avoid superlatives ("the best", "blazingly fast"). State facts.
- Avoid em-dash chains. One per sentence max.
- Use `…` (ellipsis glyph), not `...`.
- No emoji in shipped UI. Lucide icons handle anything visual.

**Banned phrases**
- "Click here"
- "Submit" as a button label (use the verb of the action)
- "Loading…" without a context noun ("Loading components…")
- "Sign up to learn more"

---

## 2. Logo

`VLLNT UI` set in the system font stack at the brand weight. There is no
standalone wordmark file; the type itself is the mark.

**Clear space** — at minimum, height of the cap-height of the logotype.
**Min size** — 14px equivalent. Below that, omit "UI" and show only "VLLNT".
**Misuse** — never stretch, recolor, italicise, or add a tagline beneath.

---

## 3. Color

Tokens live as CSS variables in `packages/ui/themes/default.css`. Components
**always** consume tokens — never raw hex. The token set is versioned with the
library.

Machine clients use `packages/design/tokens.json`. The JSON schema is
documented in `packages/design/tokens.schema.json` and groups tokens by color,
typography, spacing, radius, elevation, motion, and iconography.

### Semantic tokens (consumer-facing)

| Token | Light role | Dark role |
|-------|------------|-----------|
| `--background` | Surface | Surface |
| `--foreground` | Primary text | Primary text |
| `--muted` | Subtle surface | Subtle surface |
| `--muted-foreground` | Secondary text | Secondary text |
| `--border` | Hairline divider | Hairline divider |
| `--ring` | Focus ring | Focus ring |
| `--accent` / `--accent-foreground` | Active / hover surface | Same |
| `--destructive` / `--destructive-foreground` | Danger surface / text | Same |

### Anti-patterns
- **Never** use `bg-black` / `text-white` / `bg-white`. Use `bg-background` / `bg-foreground` / `text-foreground` so dark mode works.
- **Never** use `bg-gray-500` / Tailwind palette literals. Pick a semantic token.
- **Pure black** (`#000`) is banned for backgrounds — use `--background`.

### Contrast
WCAG **AA** minimum. Body text against any surface ≥ **4.5:1**, large text ≥ **3:1**, non-text UI ≥ **3:1**. The default theme passes; new themes must verify before merging.

---

## 4. Typography

| Token | Size | Weight | Line height |
|-------|------|--------|-------------|
| Display (H1) | 3rem (48px) | 600 (semibold) | 1.1 |
| H2 | 2rem (32px) | 600 | 1.2 |
| H3 | 1.5rem (24px) | 600 | 1.25 |
| H4 | 1.25rem (20px) | 600 | 1.3 |
| Body large | 1.125rem (18px) | 400 | 1.6 |
| Body | 1rem (16px) | 400 | 1.6 |
| Body small | 0.875rem (14px) | 400 | 1.5 |
| Caption | 0.75rem (12px) | 500 | 1.4 |
| Code | inherit | 400 mono | 1.5 |

**Rules**
- Headings use `font-semibold` (600), **never** `font-bold` (700+) at display sizes — letter shapes crush.
- Code uses the system mono stack via `font-mono`.
- Tabular numerals for data tables, charts, transactions: `font-variant-numeric: tabular-nums`.

---

## 5. Spacing

4-pt scale. Tailwind classes map 1:1.

| Token | Value | Use |
|-------|-------|-----|
| `space-1` | 4px | Icon padding |
| `space-2` | 8px | Tight stack, inline gap |
| `space-3` | 12px | Comfortable inline gap |
| `space-4` | 16px | Default block stack |
| `space-6` | 24px | Section break |
| `space-8` | 32px | Major section |
| `space-12` | 48px | Page section |
| `space-16` | 64px | Hero / landing block |

**Rules**
- Stay on the scale. Never `gap-[7px]` etc.
- One axis at a time on flex children — use `gap-y-N` or `gap-x-N`, not `gap-N` when only one axis is needed.

---

## 6. Radius

| Token | Value |
|-------|-------|
| `radius-none` | 0 |
| `radius-sm` | 4px |
| `radius-md` | 8px (default) |
| `radius-lg` | 12px |
| `radius-full` | 9999px |

Cards, popovers, dialogs use `radius-md`. Pills, avatars use `radius-full`. Long surfaces (panels, sheets) use `radius-lg`.

---

## 7. Elevation

Use sparingly. Most components are flat with `border` + `bg-background`.

| Token | Value |
|-------|-------|
| `shadow-none` | none |
| `shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` |
| `shadow-md` | `0 4px 6px -1px rgba(0,0,0,0.1)` |
| `shadow-lg` | `0 10px 15px -3px rgba(0,0,0,0.1)` (popovers, dialogs) |

No coloured shadows. No multi-layered glow effects.

---

## 8. Motion

**Principles**
1. **Purposeful** — every animation must explain a state change. No decoration.
2. **Fast** — under 200ms unless the motion communicates distance or volume.
3. **Subtle** — translate < 8px, scale ±2%. No bounces (`spring` easings strip fidelity at small distances).

| Token | Duration | Easing | Use |
|-------|----------|--------|-----|
| `duration-fast` | 100ms | `ease-out` | Micro-interactions (button press) |
| `duration-base` | 200ms | `ease-out` | Open / close, hover, focus |
| `duration-slow` | 300ms | `ease-in-out` | Layout shifts, modal entry |

`prefers-reduced-motion` — when `reduce`, durations collapse to 1ms or motion is skipped entirely.

**Banned**
- Bounce easings (`cubic-bezier(0.68, -0.55, 0.265, 1.55)`).
- Auto-playing entrance animations on initial page load (jarring).
- `animation: spin` on anything except a true loading spinner.

---

## 9. Iconography

- **Library**: `lucide-react` (only). Match its line-art aesthetic.
- **Default size**: 16px (`h-4 w-4`).
- **Stroke**: 2px (lucide default).
- **Color**: inherits `currentColor`. Don't hardcode.
- **Spacing**: 8px (`gap-2`) between icon and adjacent text.

---

## 10. Component patterns

| Use | Pattern |
|-----|---------|
| Inline action | `Button` |
| Single binary choice | `Switch` |
| One of N | `Select` (≤ 8 options) or `Combobox` (> 8 / searchable) |
| Many of N | `MultiSelect` |
| Free text | `Input` (single line) or `Textarea` |
| Confirmation | `AlertDialog` (destructive) or `Dialog` (informational) |
| Side panel | `Sheet` |
| Hover help | `Tooltip` (≤ 80 chars) |
| Stepper / wizard | `Stepper` + `MultiStepForm` |
| Tabular data | `DataTable` |
| Hierarchical data | `TreeView` |
| Status chip | `Badge` |
| Notification (transient) | `Toast` |
| Notification (persistent) | `Banner` |
| Empty state | `EmptyState` |

**Anti-patterns**
- `<div onClick>` — always use `Button` for click semantics.
- Tooltips on disabled buttons — wrap in a `<span>` with `aria-disabled` instead, since browsers swallow events on `disabled` elements.
- Modal-on-modal — restructure the flow.
- Polymorphic children + items props on the same component — pick one.

---

## 11. Accessibility (WCAG AA minimum)

- Every interactive element is keyboard-reachable.
- Focus rings visible (`--ring` token), never `outline-none` without a replacement.
- Form inputs always labelled (`<label>` or `aria-label`).
- Live regions for async state changes (`aria-live="polite"` for toasts, `assertive` for errors).
- Color is **never** the only signal — pair with icon, text, or pattern.
- Animations respect `prefers-reduced-motion`.
- Components shipping a defined ARIA pattern (combobox, dialog, menu, tabs) declare their full keyboard map in `meta.json` per #255.

---

## 12. Voice & writing

- Buttons: name the action. "Save changes" not "Submit", "Send invite" not "OK".
- Errors: state what happened + what to do. "Couldn't reach the API. Check your connection and retry."
- Empty states: explain why empty + what unblocks the user. "No components match. Try a different filter or [request a component](/request-component)."
- Inputs: placeholder = example, label = field meaning. They are not interchangeable.
- Don't hide failures. If something fails silently, you have a bug.

---

## 13. Anti-patterns (banned)

| Pattern | Why banned |
|---------|------------|
| `font-bold` on display headings | Crushes letter shapes; use `font-semibold` |
| `bg-black` / `bg-white` | Breaks dark mode; use `bg-background` / `bg-foreground` |
| Tailwind palette literals (`bg-zinc-500`) | Bypasses tokens; breaks theming |
| Bounce easings | Visual noise; doesn't scale to small distances |
| `<div>` with `onClick` | Loses keyboard + a11y semantics; use `Button` |
| Em-dash chains in copy (3+ in a row) | Unreadable |
| `Submit` / `OK` / `Click here` button labels | Don't name the action |
| Pure black backgrounds | Eye strain in dark mode |
| Auto-play hero video | Performance + motion sensitivity |
| Modal on modal | Restructure the flow |
| `eslint-disable` to bypass a rule | Fix the root cause |

---

## 14. Surfaces and roadmap

This document is the **v1 brand baseline** for VLLNT UI. It ships on these
surfaces today:

- [`/DESIGN.md`](https://ui.vllnt.ai/DESIGN.md) — this file as raw markdown.
- [`/design`](https://ui.vllnt.ai/design) — human-browsable rendering with a contents nav.
- [`/r/design.json`](https://ui.vllnt.ai/r/design.json) — JSON token set, mirroring `packages/design/tokens.json`.

Still planned:

- Live token previews inline on the `/design` page.
- `meta.json` a11y schemas per component (#255) — keyboard / ARIA / focus rules surfaced via the registry.

---

## 15. References

- [Apple Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines)
- [Material Design 3](https://m3.material.io)
- [IBM Carbon](https://carbondesignsystem.com)
- [Shopify Polaris](https://polaris.shopify.com)
- [Atlassian Design System](https://atlassian.design)
- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/)

## Latest Release Notes

Full release cards are available at https://ui.vllnt.ai/releases and feeds at https://ui.vllnt.ai/rss.xml or https://ui.vllnt.ai/atom.xml.

### v0.2.1

- Version: `0.2.1`
- Page: https://ui.vllnt.ai/releases#v0-2-1
- GitHub: https://github.com/vllnt/ui/releases/tag/v0.2.1
- Date: 2026-04-21

### Fixed

- **Public API:** `ProgressCard` now re-exported from `@vllnt/ui` — it shipped in `0.2.0`'s tarball but was missing from the barrel, so `import { ProgressCard } from "@vllnt/ui"` resolved to `undefined`.

### Docs

- Correct casing for the AI family (`AIChatInput`, `AIMessageBubble`, `AISourceCitation`, `AIStreamingText`, `AIToolCallDisplay`) and `SocialFAB` across README, package README, CHANGELOG, and `llms-full.txt`.

### v0.2.0

- Version: `0.2.0`
- Page: https://ui.vllnt.ai/releases#v0-2-0
- GitHub: https://github.com/vllnt/ui/releases/tag/v0.2.0
- Date: 2026-04-20

### Added

- **AI family** — `AIChatInput`, `AIMessageBubble`, `AISourceCitation`, `AIStreamingText`, `AIToolCallDisplay`, `ThinkingBlock`, `ModelSelector`.
- **Financial family** — `CandlestickChart`, `MarketTreemap`, `OrderBook`, `TickerTape`, `SparklineGrid`, `WalletCard`, `Watchlist`.
- **Ops / Status family** — `StatusBoard`, `StatusIndicator`, `LiveFeed`, `WorldClockBar`, `SeverityBadge`, `RoleBadge`, `ScopeSelector`.
- **Billing & Plans family** — `SubscriptionCard`, `PlanBadge`, `CreditBadge`, `UsageBreakdown`.
- **Animation family** — `AnimatedText`, `BorderBeam`, `Marquee`, `NumberTicker`, and a standalone spinner library exported via `Spinner`.
- **Educational family** — `Flashcard`, `Stepper`, `Tour`, `Annotation`, `CompletionDialog`, `TruncatedText`, `TableOfContentsPanel`.
- **Form additions** — `DatePicker`, `FileUpload`, `NumberInput`, `PasswordInput`, `InlineInput`, `Combobox`, `Rating`.
- **Data / metric additions** — `DataTable`, `DataList`, `StatCard`, `MetricGauge`, `ActivityHeatmap`, `ActivityLog`.
- **App shell additions** — `CategoryFilter`, `FilterBar`, `CookieConsent`, `Slideshow`, `CountdownTimer`, `AvatarGroup`, `FloatingActionButton`, `SocialFab`, `KeyboardShortcutsHelp`, `ShareDialog`, `HorizontalScrollRow`, `ViewSwitcher`.
- Total component count: **144** (up from 93).
- Full Storybook integration with E2E smoke tests in CI.
- OG image generation for every registry page.
- Signed provenance attestations on every published artifact (sigstore).

### Changed

- Documentation domain moved to `ui.vllnt.ai` / `storybook.vllnt.ai`.
- Default package registry is the public npm registry (no longer GitHub Packages).
- README component tables expanded to cover all 144 components organized by family.

### Fixed

- Publish workflow now uses `npx --yes npm@latest publish` so OIDC trusted publishing survives GitHub runners that ship pre-11.5.1 npm.

### v0.1.11 — Fix Publish Pipeline

- Version: `0.1.11`
- Page: https://ui.vllnt.ai/releases#v0-1-11
- GitHub: https://github.com/vllnt/ui/releases/tag/v0.1.11
- Date: 2026-03-10

### Fixed

- Re-extract tarball path from `pnpm pack` output for publish step.

### v0.1.8 — HorizontalScrollRow, ViewSwitcher, CI Pipeline [DEPRECATED]

- Version: `0.1.8`
- Page: https://ui.vllnt.ai/releases#v0-1-8
- GitHub: https://github.com/vllnt/ui/releases/tag/v0.1.8
- Date: 2026-03-10

### Fixed

- Annotated tags + `--notes-file` for release creation.

### v0.1.0 — Initial Release

- Version: `v0.1.0`
- Page: https://ui.vllnt.ai/releases#v0-1-0
- GitHub: https://github.com/vllnt/ui/releases/tag/v0.1.0
- Date: 2026-03-06

## @vllnt/ui v0.1.0

Initial open-source release of the React component library.

### Highlights

- **93 components** built on Radix UI primitives, Tailwind CSS, and CVA
- Full Tailwind preset with theme colors, animations, and dark mode
- CSS variable theming system
- Tree-shakeable ESM build
- TypeScript strict mode with full type exports

### Install

```bash
pnpm add @vllnt/ui
```

### Components

Form controls, layout, feedback & overlays, navigation, data display, app shells, and content/tutorial components. See [README](https://github.com/vllnt/ui/blob/main/packages/ui/README.md) for full list.

### Requirements

- React >= 18
- Tailwind CSS >= 3
- Next.js >= 14 (optional)
- next-themes >= 0.4 (optional)

## Templates

Starter kits pairing complete app shapes with component lists and source paths.

### Next Starter

- Slug: `next-starter`
- Page: https://ui.vllnt.ai/templates/next-starter
- Audience: Teams starting a production App Router project.
- Components: button, card, form, input, tabs, navbar-saas, theme-provider

### Dashboard

- Slug: `dashboard`
- Page: https://ui.vllnt.ai/templates/dashboard
- Audience: Internal tools, ops consoles, and product analytics surfaces.
- Components: activity-log, area-chart, bar-chart, button, calendar, card, category-filter, checkbox, command, data-list, data-table, date-picker, dropdown-menu, filter-bar, line-chart, metric-cluster, metric-gauge, pagination, popover, progress-bar, scroll-area, select, sidebar, stat-card, status-board, status-indicator, table, tabs, toast, tooltip, view-switcher, workspace-switcher

### SaaS

- Slug: `saas`
- Page: https://ui.vllnt.ai/templates/saas
- Audience: SaaS products that need marketing plus authenticated app UI.
- Components: badge, banner, button, card, dialog, form, input, navbar-saas, pricing-table, profile-section, subscription-card, tabs, toast

### AI Chat

- Slug: `ai-chat`
- Page: https://ui.vllnt.ai/templates/ai-chat
- Audience: AI products, chat surfaces, agent consoles, and assistants.
- Components: ai-artifact, ai-chat-input, ai-message-bubble, ai-sidebar, ai-source-citation, ai-streaming-text, ai-tool-call-display, prompt-templates

### Docs Site

- Slug: `docs-site`
- Page: https://ui.vllnt.ai/templates/docs-site
- Audience: Library authors and teams publishing component documentation.
- Components: accordion, breadcrumb, callout, code-block, copy-button, document-sibling-nav, mdx-content, navigation-menu, search-dialog, sidebar, table-of-contents, tabs

## Components

225 components total. Each entry links to a machine-readable JSON descriptor at /r/<name>.json.

### Accordion

- Slug: `accordion`
- Category: `content`
- Description: Collapsible content sections supporting single or multiple open items.
- Page: https://ui.vllnt.ai/components/accordion
- Schema: https://ui.vllnt.ai/r/accordion.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/accordion.json`

### Activity Heatmap

- Slug: `activity-heatmap`
- Category: `data`
- Description: Contribution-style grid for visualizing operational activity over time.
- Page: https://ui.vllnt.ai/components/activity-heatmap
- Schema: https://ui.vllnt.ai/r/activity-heatmap.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/activity-heatmap.json`

### Activity Log

- Slug: `activity-log`
- Category: `data`
- Description: Paginated activity feed for audit history and analytics changes.
- Page: https://ui.vllnt.ai/components/activity-log
- Schema: https://ui.vllnt.ai/r/activity-log.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/activity-log.json`

### Agent Activity

- Slug: `agent-activity`
- Category: `ai`
- Description: Visual display of an AI agent's execution chain — steps, tools, decisions, progress.
- Page: https://ui.vllnt.ai/components/agent-activity
- Schema: https://ui.vllnt.ai/r/agent-activity.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/agent-activity.json`

### AI Artifact

- Slug: `ai-artifact`
- Category: `ai`
- Description: Rendered output area for AI-generated content with toolbar, copy/edit/download/fullscreen actions, and version chips.
- Page: https://ui.vllnt.ai/components/ai-artifact
- Schema: https://ui.vllnt.ai/r/ai-artifact.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-artifact.json`

### AI Chat Input

- Slug: `ai-chat-input`
- Category: `learning`
- Description: Prompt composer for conversational interfaces with helper text, toolbar actions, and submit states.
- Page: https://ui.vllnt.ai/components/ai-chat-input
- Schema: https://ui.vllnt.ai/r/ai-chat-input.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-chat-input.json`

### AI Message Bubble

- Slug: `ai-message-bubble`
- Category: `learning`
- Description: Chat bubble for assistant, user, tool, and system messages using the current design system surfaces.
- Page: https://ui.vllnt.ai/components/ai-message-bubble
- Schema: https://ui.vllnt.ai/r/ai-message-bubble.json
- npm deps: @vllnt/ui@^0.2.1, class-variance-authority
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-message-bubble.json`

### AI Sidebar

- Slug: `ai-sidebar`
- Category: `ai`
- Description: Slide-out AI assistant panel with provider, header / content / footer slots, and a standalone trigger.
- Page: https://ui.vllnt.ai/components/ai-sidebar
- Schema: https://ui.vllnt.ai/r/ai-sidebar.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-sidebar.json`

### AI Source Citation

- Slug: `ai-source-citation`
- Category: `learning`
- Description: Compact source reference card for AI answers with a title, origin label, and optional excerpt.
- Page: https://ui.vllnt.ai/components/ai-source-citation
- Schema: https://ui.vllnt.ai/r/ai-source-citation.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-source-citation.json`

### AI Streaming Text

- Slug: `ai-streaming-text`
- Category: `learning`
- Description: Readable text block for partial assistant output with an optional live cursor while tokens stream in.
- Page: https://ui.vllnt.ai/components/ai-streaming-text
- Schema: https://ui.vllnt.ai/r/ai-streaming-text.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-streaming-text.json`

### AI Tool Call Display

- Slug: `ai-tool-call-display`
- Category: `learning`
- Description: Structured card for tool invocation traces, statuses, serialized input, and returned output.
- Page: https://ui.vllnt.ai/components/ai-tool-call-display
- Schema: https://ui.vllnt.ai/r/ai-tool-call-display.json
- npm deps: @vllnt/ui@^0.2.1, class-variance-authority, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ai-tool-call-display.json`

### Alert

- Slug: `alert`
- Category: `data`
- Description: Displays an alert message to the user.
- Page: https://ui.vllnt.ai/components/alert
- Schema: https://ui.vllnt.ai/r/alert.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/alert.json`

### Alert Dialog

- Slug: `alert-dialog`
- Category: `overlay`
- Description: Modal dialog for confirming destructive or important actions.
- Page: https://ui.vllnt.ai/components/alert-dialog
- Schema: https://ui.vllnt.ai/r/alert-dialog.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/alert-dialog.json`

### Alert Pulse

- Slug: `alert-pulse`
- Category: `utility`
- Description: Pulsing ring overlay for alerting canvas objects, with severity tones.
- Page: https://ui.vllnt.ai/components/alert-pulse
- Schema: https://ui.vllnt.ai/r/alert-pulse.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/alert-pulse.json`

### Anchor Port

- Slug: `anchor-port`
- Category: `utility`
- Description: Port marker for object inputs, outputs, and bidirectional links on the canvas.
- Page: https://ui.vllnt.ai/components/anchor-port
- Schema: https://ui.vllnt.ai/r/anchor-port.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/anchor-port.json`

### Animated Text

- Slug: `animated-text`
- Category: `utility`
- Description: Staggered text reveal for headings, pull quotes, and short supporting copy.
- Page: https://ui.vllnt.ai/components/animated-text
- Schema: https://ui.vllnt.ai/r/animated-text.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/animated-text.json`

### Annotation

- Slug: `annotation`
- Category: `learning`
- Description: Inline highlight with an attached contextual note.
- Page: https://ui.vllnt.ai/components/annotation
- Schema: https://ui.vllnt.ai/r/annotation.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/annotation.json`

### Area Chart

- Slug: `area-chart`
- Category: `data`
- Description: Renders an area chart for data visualization.
- Page: https://ui.vllnt.ai/components/area-chart
- Schema: https://ui.vllnt.ai/r/area-chart.json
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/area-chart.json`

### Aspect Ratio

- Slug: `aspect-ratio`
- Category: `utility`
- Description: Constrains content to a specified aspect ratio.
- Page: https://ui.vllnt.ai/components/aspect-ratio
- Schema: https://ui.vllnt.ai/r/aspect-ratio.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/aspect-ratio.json`

### Auto Reload

- Slug: `auto-reload`
- Category: `billing`
- Description: Toggle + collapsible threshold/amount form for automatic credit reloading with locale-aware currency.
- Page: https://ui.vllnt.ai/components/auto-reload
- Schema: https://ui.vllnt.ai/r/auto-reload.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/auto-reload.json`

### Avatar

- Slug: `avatar`
- Category: `core`
- Description: Displays a user avatar image with fallback initials.
- Page: https://ui.vllnt.ai/components/avatar
- Schema: https://ui.vllnt.ai/r/avatar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/avatar.json`

### Avatar Group

- Slug: `avatar-group`
- Category: `data`
- Description: Overlapping avatar stack for participants, assignees, and collaborative contexts.
- Page: https://ui.vllnt.ai/components/avatar-group
- Schema: https://ui.vllnt.ai/r/avatar-group.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/avatar-group.json`

### Badge

- Slug: `badge`
- Category: `core`
- Description: Small status label with variant styles.
- Page: https://ui.vllnt.ai/components/badge
- Schema: https://ui.vllnt.ai/r/badge.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/badge.json`

### Banner

- Slug: `banner`
- Category: `core`
- Description: Full-width announcement bar with variants, dismissal, and an optional action slot.
- Page: https://ui.vllnt.ai/components/banner
- Schema: https://ui.vllnt.ai/r/banner.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react, class-variance-authority, @radix-ui/react-slot
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/banner.json`

### Bar Chart

- Slug: `bar-chart`
- Category: `data`
- Description: Renders a bar chart for data visualization.
- Page: https://ui.vllnt.ai/components/bar-chart
- Schema: https://ui.vllnt.ai/r/bar-chart.json
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/bar-chart.json`

### Blog Card

- Slug: `blog-card`
- Category: `content`
- Description: Card layout for displaying blog post previews.
- Page: https://ui.vllnt.ai/components/blog-card
- Schema: https://ui.vllnt.ai/r/blog-card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/blog-card.json`

### Border Beam

- Slug: `border-beam`
- Category: `utility`
- Description: Animated accent beam that travels around the border of a highlighted surface.
- Page: https://ui.vllnt.ai/components/border-beam
- Schema: https://ui.vllnt.ai/r/border-beam.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/border-beam.json`

### Bottom Activity Strip

- Slug: `bottom-activity-strip`
- Category: `data`
- Description: Slim horizontally-scrolling row of recent canvas events for low-noise live activity.
- Page: https://ui.vllnt.ai/components/bottom-activity-strip
- Schema: https://ui.vllnt.ai/r/bottom-activity-strip.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/bottom-activity-strip.json`

### Breadcrumb

- Slug: `breadcrumb`
- Category: `navigation`
- Description: Navigation breadcrumb trail showing the current page hierarchy.
- Page: https://ui.vllnt.ai/components/breadcrumb
- Schema: https://ui.vllnt.ai/r/breadcrumb.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/breadcrumb.json`

### Button

- Slug: `button`
- Category: `core`
- Description: Interactive button with multiple variants and sizes.
- Page: https://ui.vllnt.ai/components/button
- Schema: https://ui.vllnt.ai/r/button.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button.json`

### Calendar

- Slug: `calendar`
- Category: `form`
- Description: Date picker calendar for selecting dates.
- Page: https://ui.vllnt.ai/components/calendar
- Schema: https://ui.vllnt.ai/r/calendar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/calendar.json`

### Callout

- Slug: `callout`
- Category: `content`
- Description: Highlighted content block with variant styles for info, warning, danger, and more.
- Page: https://ui.vllnt.ai/components/callout
- Schema: https://ui.vllnt.ai/r/callout.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/callout.json`

### Candlestick Chart

- Slug: `candlestick-chart`
- Category: `data`
- Description: OHLC financial chart for session-by-session price action.
- Page: https://ui.vllnt.ai/components/candlestick-chart
- Schema: https://ui.vllnt.ai/r/candlestick-chart.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/candlestick-chart.json`

### Canvas Shell

- Slug: `canvas-shell`
- Category: `utility`
- Description: Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions.
- Page: https://ui.vllnt.ai/components/canvas-shell
- Schema: https://ui.vllnt.ai/r/canvas-shell.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/canvas-shell.json`

### Canvas View

- Slug: `canvas-view`
- Category: `utility`
- Description: Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support.
- Page: https://ui.vllnt.ai/components/canvas-view
- Schema: https://ui.vllnt.ai/r/canvas-view.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/canvas-view.json`

### Card

- Slug: `card`
- Category: `content`
- Description: Container with header, content, and footer sections.
- Page: https://ui.vllnt.ai/components/card
- Schema: https://ui.vllnt.ai/r/card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/card.json`

### Carousel

- Slug: `carousel`
- Category: `content`
- Description: Scrollable content carousel with navigation controls.
- Page: https://ui.vllnt.ai/components/carousel
- Schema: https://ui.vllnt.ai/r/carousel.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/carousel.json`

### Category Filter

- Slug: `category-filter`
- Category: `form`
- Description: Filterable category selection for content lists.
- Page: https://ui.vllnt.ai/components/category-filter
- Schema: https://ui.vllnt.ai/r/category-filter.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/category-filter.json`

### Checkbox

- Slug: `checkbox`
- Category: `core`
- Description: Toggle control for boolean input.
- Page: https://ui.vllnt.ai/components/checkbox
- Schema: https://ui.vllnt.ai/r/checkbox.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/checkbox.json`

### Checklist

- Slug: `checklist`
- Category: `learning`
- Description: Interactive checklist with progress tracking and toggleable items.
- Page: https://ui.vllnt.ai/components/checklist
- Schema: https://ui.vllnt.ai/r/checklist.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/checklist.json`

### Choropleth Map

- Slug: `choropleth-map`
- Category: `data-display`
- Description: Standalone SVG choropleth — region polygons shaded by data value with tooltip, legend, and accessible data-table fallback.
- Page: https://ui.vllnt.ai/components/choropleth-map
- Schema: https://ui.vllnt.ai/r/choropleth-map.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/choropleth-map.json`

### Chronological Timeline

- Slug: `chronological-timeline`
- Category: `data-display`
- Description: Media-rich, scroll-driven chronological timeline with alternating cards, image/video/audio media, and a progress strip.
- Page: https://ui.vllnt.ai/components/chronological-timeline
- Schema: https://ui.vllnt.ai/r/chronological-timeline.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/chronological-timeline.json`

### Civilization Card

- Slug: `civilization-card`
- Category: `educational`
- Description: Civilization overview with hero band, BCE/CE era timeline, key stats, achievements, and notable leaders.
- Page: https://ui.vllnt.ai/components/civilization-card
- Schema: https://ui.vllnt.ai/r/civilization-card.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/civilization-card.json`

### Code Block

- Slug: `code-block`
- Category: `content`
- Description: Syntax-highlighted code display with copy support.
- Page: https://ui.vllnt.ai/components/code-block
- Schema: https://ui.vllnt.ai/r/code-block.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/code-block.json`

### Code Playground

- Slug: `code-playground`
- Category: `content`
- Description: Interactive code editor with live preview.
- Page: https://ui.vllnt.ai/components/code-playground
- Schema: https://ui.vllnt.ai/r/code-playground.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/code-playground.json`

### Collapsible

- Slug: `collapsible`
- Category: `content`
- Description: Expandable and collapsible content section.
- Page: https://ui.vllnt.ai/components/collapsible
- Schema: https://ui.vllnt.ai/r/collapsible.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/collapsible.json`

### Combobox

- Slug: `combobox`
- Category: `form`
- Description: Searchable select input for choosing from a list of options.
- Page: https://ui.vllnt.ai/components/combobox
- Schema: https://ui.vllnt.ai/r/combobox.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/combobox.json`

### Command

- Slug: `command`
- Category: `overlay`
- Description: Command palette with search, groups, and keyboard navigation.
- Page: https://ui.vllnt.ai/components/command
- Schema: https://ui.vllnt.ai/r/command.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/command.json`

### Comment Pin

- Slug: `comment-pin`
- Category: `utility`
- Description: Anchored discussion pin rendered at canvas coordinates with author + unread badge.
- Page: https://ui.vllnt.ai/components/comment-pin
- Schema: https://ui.vllnt.ai/r/comment-pin.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/comment-pin.json`

### Comparison

- Slug: `comparison`
- Category: `data`
- Description: Side-by-side comparison layout for content or features.
- Page: https://ui.vllnt.ai/components/comparison
- Schema: https://ui.vllnt.ai/r/comparison.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/comparison.json`

### Completion Dialog

- Slug: `completion-dialog`
- Category: `learning`
- Description: Dialog displayed upon completing a task or workflow.
- Page: https://ui.vllnt.ai/components/completion-dialog
- Schema: https://ui.vllnt.ai/r/completion-dialog.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/completion-dialog.json`

### Connector Edge

- Slug: `connector-edge`
- Category: `utility`
- Description: Curved edge between canvas objects with optional inline label state.
- Page: https://ui.vllnt.ai/components/connector-edge
- Schema: https://ui.vllnt.ai/r/connector-edge.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/connector-edge.json`

### Content Intro

- Slug: `content-intro`
- Category: `content`
- Description: Introductory section for content pages with title and description.
- Page: https://ui.vllnt.ai/components/content-intro
- Schema: https://ui.vllnt.ai/r/content-intro.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/content-intro.json`

### Context Lens

- Slug: `context-lens`
- Category: `utility`
- Description: Vignette overlay that dims the canvas outside a circular focus region.
- Page: https://ui.vllnt.ai/components/context-lens
- Schema: https://ui.vllnt.ai/r/context-lens.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/context-lens.json`

### Context Menu

- Slug: `context-menu`
- Category: `overlay`
- Description: Right-click context menu with items and submenus.
- Page: https://ui.vllnt.ai/components/context-menu
- Schema: https://ui.vllnt.ai/r/context-menu.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/context-menu.json`

### Copy Button

- Slug: `copy-button`
- Category: `core`
- Description: Click-to-copy utility with confirmation feedback and a useCopyToClipboard hook.
- Page: https://ui.vllnt.ai/components/copy-button
- Schema: https://ui.vllnt.ai/r/copy-button.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/copy-button.json`

### Countdown Timer

- Slug: `countdown-timer`
- Category: `data`
- Description: Countdown and SLA timer for deadlines, escalations, and response windows.
- Page: https://ui.vllnt.ai/components/countdown-timer
- Schema: https://ui.vllnt.ai/r/countdown-timer.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/countdown-timer.json`

### Credit Badge

- Slug: `credit-badge`
- Category: `content`
- Description: Balance status pill for credits, wallet states, and billing health.
- Page: https://ui.vllnt.ai/components/credit-badge
- Schema: https://ui.vllnt.ai/r/credit-badge.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/credit-badge.json`

### Data List

- Slug: `data-list`
- Category: `data`
- Description: Semantic key-value metadata layout for displaying labels with values.
- Page: https://ui.vllnt.ai/components/data-list
- Schema: https://ui.vllnt.ai/r/data-list.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/data-list.json`

### Data Table

- Slug: `data-table`
- Category: `data`
- Description: Enhanced data table with sorting, filtering, selection, and pagination controls.
- Page: https://ui.vllnt.ai/components/data-table
- Schema: https://ui.vllnt.ai/r/data-table.json
- npm deps: @vllnt/ui@^0.2.1, @tanstack/react-table
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/data-table.json`

### Date Picker

- Slug: `date-picker`
- Category: `form`
- Description: Single-date picker built with the shared calendar and popover primitives.
- Page: https://ui.vllnt.ai/components/date-picker
- Schema: https://ui.vllnt.ai/r/date-picker.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/date-picker.json`

### Dialog

- Slug: `dialog`
- Category: `overlay`
- Description: Modal dialog overlay for focused content and actions.
- Page: https://ui.vllnt.ai/components/dialog
- Schema: https://ui.vllnt.ai/r/dialog.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/dialog.json`

### Document Sibling Nav

- Slug: `document-sibling-nav`
- Category: `content`
- Description: Newer/older navigator: links to the previous and next item in an ordered series.
- Page: https://ui.vllnt.ai/components/document-sibling-nav
- Schema: https://ui.vllnt.ai/r/document-sibling-nav.json
- npm deps: @vllnt/ui@^0.2.1, class-variance-authority
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/document-sibling-nav.json`

### Drawer

- Slug: `drawer`
- Category: `overlay`
- Description: Slide-out panel anchored to the screen edge.
- Page: https://ui.vllnt.ai/components/drawer
- Schema: https://ui.vllnt.ai/r/drawer.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/drawer.json`

### Dropdown Menu

- Slug: `dropdown-menu`
- Category: `overlay`
- Description: Accessible dropdown menu with items, checkboxes, radio groups, and submenus.
- Page: https://ui.vllnt.ai/components/dropdown-menu
- Schema: https://ui.vllnt.ai/r/dropdown-menu.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/dropdown-menu.json`

### Edge Label

- Slug: `edge-label`
- Category: `overlay`
- Description: Inline edge label for relationship semantics such as streams, handoffs, or policies.
- Page: https://ui.vllnt.ai/components/edge-label
- Schema: https://ui.vllnt.ai/r/edge-label.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/edge-label.json`

### Empty State

- Slug: `empty-state`
- Category: `core`
- Description: Centered placeholder for empty lists, tables, and search results with sm/md/lg sizes.
- Page: https://ui.vllnt.ai/components/empty-state
- Schema: https://ui.vllnt.ai/r/empty-state.json
- npm deps: @vllnt/ui@^0.2.1, class-variance-authority
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/empty-state.json`

### Era Comparison

- Slug: `era-comparison`
- Category: `educational`
- Description: Side-by-side comparison of historical eras with domain rows, color-themed columns, highlights, and figure chips.
- Page: https://ui.vllnt.ai/components/era-comparison
- Schema: https://ui.vllnt.ai/r/era-comparison.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/era-comparison.json`

### Exercise

- Slug: `exercise`
- Category: `learning`
- Description: Interactive exercise block for learning content.
- Page: https://ui.vllnt.ai/components/exercise
- Schema: https://ui.vllnt.ai/r/exercise.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/exercise.json`

### FAQ

- Slug: `faq`
- Category: `content`
- Description: Frequently asked questions section with expandable answers.
- Page: https://ui.vllnt.ai/components/faq
- Schema: https://ui.vllnt.ai/r/faq.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/faq.json`

### File Upload

- Slug: `file-upload`
- Category: `form`
- Description: Dropzone-style file picker with previews for selected files.
- Page: https://ui.vllnt.ai/components/file-upload
- Schema: https://ui.vllnt.ai/r/file-upload.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/file-upload.json`

### Filter Bar

- Slug: `filter-bar`
- Category: `form`
- Description: Horizontal bar with filter controls for content lists.
- Page: https://ui.vllnt.ai/components/filter-bar
- Schema: https://ui.vllnt.ai/r/filter-bar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/filter-bar.json`

### Flashcard

- Slug: `flashcard`
- Category: `learning`
- Description: Study card for active recall with prompt and answer states.
- Page: https://ui.vllnt.ai/components/flashcard
- Schema: https://ui.vllnt.ai/r/flashcard.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/flashcard.json`

### Floating Action Button

- Slug: `floating-action-button`
- Category: `utility`
- Description: Fixed-position action button for primary actions.
- Page: https://ui.vllnt.ai/components/floating-action-button
- Schema: https://ui.vllnt.ai/r/floating-action-button.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/floating-action-button.json`

### Floating Toolbar

- Slug: `floating-toolbar`
- Category: `data-display`
- Description: Compact action bar that floats above a selection — primary / ghost / destructive variants.
- Page: https://ui.vllnt.ai/components/floating-toolbar
- Schema: https://ui.vllnt.ai/r/floating-toolbar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/floating-toolbar.json`

### Flow Diagram

- Slug: `flow-diagram`
- Category: `data`
- Description: Interactive flow diagram with nodes, edges, and controls.
- Page: https://ui.vllnt.ai/components/flow-diagram
- Schema: https://ui.vllnt.ai/r/flow-diagram.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/flow-diagram.json`

### Follow Mode

- Slug: `follow-mode`
- Category: `data-display`
- Description: Follow-mode chrome — outlines a region with a participant's color and surfaces a stop-following chip.
- Page: https://ui.vllnt.ai/components/follow-mode
- Schema: https://ui.vllnt.ai/r/follow-mode.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/follow-mode.json`

### Form

- Slug: `form`
- Category: `form`
- Description: Validation wrapper for composing labels, descriptions, controls, and messages.
- Page: https://ui.vllnt.ai/components/form
- Schema: https://ui.vllnt.ai/r/form.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/form.json`

### Gantt Chart

- Slug: `gantt-chart`
- Category: `data`
- Description: Project timeline with task bars, progress overlays, milestones, and a today indicator across day/week/month/quarter scales.
- Page: https://ui.vllnt.ai/components/gantt-chart
- Schema: https://ui.vllnt.ai/r/gantt-chart.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/gantt-chart.json`

### Geography Quiz Map

- Slug: `geography-quiz-map`
- Category: `data-display`
- Description: Interactive identify-mode map quiz — click the correct region per prompt with visual feedback, score, and results panel.
- Page: https://ui.vllnt.ai/components/geography-quiz-map
- Schema: https://ui.vllnt.ai/r/geography-quiz-map.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/geography-quiz-map.json`

### Globe 3D

- Slug: `globe-3d`
- Category: `data-display`
- Description: Standalone SVG pseudo-3D globe — orthographic projection with auto-rotation, drag interaction, lat/lng markers, and great-circle arcs.
- Page: https://ui.vllnt.ai/components/globe-3d
- Schema: https://ui.vllnt.ai/r/globe-3d.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/globe-3d.json`

### Group Hull

- Slug: `group-hull`
- Category: `utility`
- Description: Durable boundary wrapper for related runtime objects sharing context or ownership.
- Page: https://ui.vllnt.ai/components/group-hull
- Schema: https://ui.vllnt.ai/r/group-hull.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/group-hull.json`

### Handoff Beacon

- Slug: `handoff-beacon`
- Category: `data-display`
- Description: Attention-routing beacon with pulsing ring and optional source / message card for live canvases.
- Page: https://ui.vllnt.ai/components/handoff-beacon
- Schema: https://ui.vllnt.ai/r/handoff-beacon.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/handoff-beacon.json`

### Heat Map Overlay

- Slug: `heat-map-overlay`
- Category: `data-display`
- Description: Standalone SVG geographic heat map — radial-gradient blobs with configurable radius, blur, gradient, and opacity.
- Page: https://ui.vllnt.ai/components/heat-map-overlay
- Schema: https://ui.vllnt.ai/r/heat-map-overlay.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/heat-map-overlay.json`

### Heat Overlay

- Slug: `heat-overlay`
- Category: `data`
- Description: Heatmap-style overlay drawing soft radial blobs for canvas activity samples.
- Page: https://ui.vllnt.ai/components/heat-overlay
- Schema: https://ui.vllnt.ai/r/heat-overlay.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/heat-overlay.json`

### Historic Timeline

- Slug: `historic-timeline`
- Category: `data-display`
- Description: Specialized timeline for historical events spanning centuries or millennia, with era bands, period bars, and BCE/CE point markers.
- Page: https://ui.vllnt.ai/components/historic-timeline
- Schema: https://ui.vllnt.ai/r/historic-timeline.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/historic-timeline.json`

### Historical Figure Card

- Slug: `historical-figure-card`
- Category: `educational`
- Description: Profile card with portrait, lifespan timeline, fields, works, quote, connections, and an expandable biography section.
- Page: https://ui.vllnt.ai/components/historical-figure-card
- Schema: https://ui.vllnt.ai/r/historical-figure-card.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/historical-figure-card.json`

### Horizontal Scroll Row

- Slug: `horizontal-scroll-row`
- Category: `navigation`
- Description: Horizontal scroll container with snap scrolling, chevron navigation, and hidden scrollbar.
- Page: https://ui.vllnt.ai/components/horizontal-scroll-row
- Schema: https://ui.vllnt.ai/r/horizontal-scroll-row.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/horizontal-scroll-row.json`

### Hover Card

- Slug: `hover-card`
- Category: `overlay`
- Description: Card that appears on hover for previewing content.
- Page: https://ui.vllnt.ai/components/hover-card
- Schema: https://ui.vllnt.ai/r/hover-card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/hover-card.json`

### Infinite Plane

- Slug: `infinite-plane`
- Category: `utility`
- Description: Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport.
- Page: https://ui.vllnt.ai/components/infinite-plane
- Schema: https://ui.vllnt.ai/r/infinite-plane.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/infinite-plane.json`

### Inline Input

- Slug: `inline-input`
- Category: `form`
- Description: Inline text input with keyboard commit and cancel support.
- Page: https://ui.vllnt.ai/components/inline-input
- Schema: https://ui.vllnt.ai/r/inline-input.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/inline-input.json`

### Input

- Slug: `input`
- Category: `core`
- Description: Text input field for forms.
- Page: https://ui.vllnt.ai/components/input
- Schema: https://ui.vllnt.ai/r/input.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/input.json`

### Input OTP

- Slug: `input-otp`
- Category: `form`
- Description: One-time password input with segmented fields.
- Page: https://ui.vllnt.ai/components/input-otp
- Schema: https://ui.vllnt.ai/r/input-otp.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/input-otp.json`

### Interactive Timeline

- Slug: `interactive-timeline`
- Category: `data-display`
- Description: Zoomable, pannable, multi-track timeline with category filter, today marker, and click-to-select events.
- Page: https://ui.vllnt.ai/components/interactive-timeline
- Schema: https://ui.vllnt.ai/r/interactive-timeline.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/interactive-timeline.json`

### Jarvis Dock

- Slug: `jarvis-dock`
- Category: `navigation`
- Description: Floating bottom dock with quick-action buttons + a command-palette trigger.
- Page: https://ui.vllnt.ai/components/jarvis-dock
- Schema: https://ui.vllnt.ai/r/jarvis-dock.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/jarvis-dock.json`

### Kbd

- Slug: `kbd`
- Category: `core`
- Description: Keyboard key indicator with platform-aware modifier expansion via the shortcut prop.
- Page: https://ui.vllnt.ai/components/kbd
- Schema: https://ui.vllnt.ai/r/kbd.json
- npm deps: @vllnt/ui@^0.2.1, class-variance-authority
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/kbd.json`

### Key Concept

- Slug: `key-concept`
- Category: `learning`
- Description: Highlighted definition block for key terms and a glossary list.
- Page: https://ui.vllnt.ai/components/key-concept
- Schema: https://ui.vllnt.ai/r/key-concept.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/key-concept.json`

### Keyboard Shortcuts Help

- Slug: `keyboard-shortcuts-help`
- Category: `learning`
- Description: Displays available keyboard shortcuts to the user.
- Page: https://ui.vllnt.ai/components/keyboard-shortcuts-help
- Schema: https://ui.vllnt.ai/r/keyboard-shortcuts-help.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/keyboard-shortcuts-help.json`

### Knowledge Check

- Slug: `knowledge-check`
- Category: `educational`
- Description: Inline knowledge check with multiple-choice / true-false / fill-blank questions, per-answer feedback, and a final score summary.
- Page: https://ui.vllnt.ai/components/knowledge-check
- Schema: https://ui.vllnt.ai/r/knowledge-check.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/knowledge-check.json`

### Lang Provider

- Slug: `lang-provider`
- Category: `utility`
- Description: Context provider for language and internationalization.
- Page: https://ui.vllnt.ai/components/lang-provider
- Schema: https://ui.vllnt.ai/r/lang-provider.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/lang-provider.json`

### Learning Objectives

- Slug: `learning-objectives`
- Category: `learning`
- Description: Lists learning goals for educational content.
- Page: https://ui.vllnt.ai/components/learning-objectives
- Schema: https://ui.vllnt.ai/r/learning-objectives.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/learning-objectives.json`

### Left Rail

- Slug: `left-rail`
- Category: `navigation`
- Description: Compact vertical rail for canvas modes, tool actions, and secondary navigation controls.
- Page: https://ui.vllnt.ai/components/left-rail
- Schema: https://ui.vllnt.ai/r/left-rail.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/left-rail.json`

### Line Chart

- Slug: `line-chart`
- Category: `data`
- Description: Renders a line chart for data visualization.
- Page: https://ui.vllnt.ai/components/line-chart
- Schema: https://ui.vllnt.ai/r/line-chart.json
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/line-chart.json`

### Live Cursor

- Slug: `live-cursor`
- Category: `utility`
- Description: Remote user's cursor rendered at canvas coordinates with name + status chip.
- Page: https://ui.vllnt.ai/components/live-cursor
- Schema: https://ui.vllnt.ai/r/live-cursor.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/live-cursor.json`

### Live Feed

- Slug: `live-feed`
- Category: `data`
- Description: Rolling activity stream for surfacing incidents, deploys, and operational signals in real time.
- Page: https://ui.vllnt.ai/components/live-feed
- Schema: https://ui.vllnt.ai/r/live-feed.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/live-feed.json`

### Map 2D

- Slug: `map-2d`
- Category: `data-display`
- Description: Lightweight 2D map primitive — SVG canvas with equirectangular projection, markers, popups, GeoJSON polygon layers, zoom controls, and an optional backdrop image.
- Page: https://ui.vllnt.ai/components/map-2d
- Schema: https://ui.vllnt.ai/r/map-2d.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/map-2d.json`

### Map Timeline

- Slug: `map-timeline`
- Category: `data-display`
- Description: Standalone SVG map + time slider — era polygons and year-pinned events appear as the user scrubs the timeline.
- Page: https://ui.vllnt.ai/components/map-timeline
- Schema: https://ui.vllnt.ai/r/map-timeline.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/map-timeline.json`

### Market Treemap

- Slug: `market-treemap`
- Category: `data`
- Description: Sector-style market heatmap using weighted tiles and signed performance colors.
- Page: https://ui.vllnt.ai/components/market-treemap
- Schema: https://ui.vllnt.ai/r/market-treemap.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/market-treemap.json`

### Marquee

- Slug: `marquee`
- Category: `utility`
- Description: Continuously scrolling content lane for badges, logos, and status chips.
- Page: https://ui.vllnt.ai/components/marquee
- Schema: https://ui.vllnt.ai/r/marquee.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/marquee.json`

### MDX Content

- Slug: `mdx-content`
- Category: `content`
- Description: Renders MDX content with component mapping.
- Page: https://ui.vllnt.ai/components/mdx-content
- Schema: https://ui.vllnt.ai/r/mdx-content.json
- npm deps: @vllnt/ui@^0.2.1, @mdx-js/mdx@^3.1.1, react-markdown@^10.1.0, remark-gfm@^4.0.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/mdx-content.json`

### Menubar

- Slug: `menubar`
- Category: `navigation`
- Description: Horizontal menu bar with dropdown menus.
- Page: https://ui.vllnt.ai/components/menubar
- Schema: https://ui.vllnt.ai/r/menubar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/menubar.json`

### Metric Cluster

- Slug: `metric-cluster`
- Category: `data`
- Description: Compact stack of related metrics pinned to a canvas object's corner.
- Page: https://ui.vllnt.ai/components/metric-cluster
- Schema: https://ui.vllnt.ai/r/metric-cluster.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/metric-cluster.json`

### Metric Gauge

- Slug: `metric-gauge`
- Category: `data`
- Description: Real-time arc and dial display for monitored percentages and utilization.
- Page: https://ui.vllnt.ai/components/metric-gauge
- Schema: https://ui.vllnt.ai/r/metric-gauge.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/metric-gauge.json`

### Mini Map Panel

- Slug: `mini-map-panel`
- Category: `data`
- Description: Viewport overview panel showing canvas bounds, markers, and the current zoom window.
- Page: https://ui.vllnt.ai/components/mini-map-panel
- Schema: https://ui.vllnt.ai/r/mini-map-panel.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/mini-map-panel.json`

### Model Comparison

- Slug: `model-comparison`
- Category: `ai`
- Description: Side-by-side comparison of AI model responses with optional blind mode, metadata stats, and a vote bar.
- Page: https://ui.vllnt.ai/components/model-comparison
- Schema: https://ui.vllnt.ai/r/model-comparison.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/model-comparison.json`

### Model Selector

- Slug: `model-selector`
- Category: `form`
- Description: Dropdown selector for choosing AI models.
- Page: https://ui.vllnt.ai/components/model-selector
- Schema: https://ui.vllnt.ai/r/model-selector.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/model-selector.json`

### Multi Select

- Slug: `multi-select`
- Category: `form`
- Description: Popover-based multi-selection input with selected-value badges and optional search.
- Page: https://ui.vllnt.ai/components/multi-select
- Schema: https://ui.vllnt.ai/r/multi-select.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/multi-select.json`

### Multi Select Lasso

- Slug: `multi-select-lasso`
- Category: `utility`
- Description: Selection rectangle overlay for canvas multi-select gestures.
- Page: https://ui.vllnt.ai/components/multi-select-lasso
- Schema: https://ui.vllnt.ai/r/multi-select-lasso.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/multi-select-lasso.json`

### Navbar SaaS

- Slug: `navbar-saas`
- Category: `navigation`
- Description: SaaS-style navigation bar with branding and links.
- Page: https://ui.vllnt.ai/components/navbar-saas
- Schema: https://ui.vllnt.ai/r/navbar-saas.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/navbar-saas.json`

### Navigation Menu

- Slug: `navigation-menu`
- Category: `navigation`
- Description: Accessible navigation menu with links and sub-navigation.
- Page: https://ui.vllnt.ai/components/navigation-menu
- Schema: https://ui.vllnt.ai/r/navigation-menu.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/navigation-menu.json`

### Newsletter Signup

- Slug: `newsletter-signup`
- Category: `form`
- Description: Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels.
- Page: https://ui.vllnt.ai/components/newsletter-signup
- Schema: https://ui.vllnt.ai/r/newsletter-signup.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/newsletter-signup.json`

### Number Input

- Slug: `number-input`
- Category: `form`
- Description: Numeric input with increment and decrement controls.
- Page: https://ui.vllnt.ai/components/number-input
- Schema: https://ui.vllnt.ai/r/number-input.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/number-input.json`

### Number Ticker

- Slug: `number-ticker`
- Category: `utility`
- Description: Animated number transitions for stats, KPIs, and compact numeric callouts.
- Page: https://ui.vllnt.ai/components/number-ticker
- Schema: https://ui.vllnt.ai/r/number-ticker.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/number-ticker.json`

### Object Card

- Slug: `object-card`
- Category: `content`
- Description: Durable object view for agents, runs, artifacts, and tasks inside the canvas.
- Page: https://ui.vllnt.ai/components/object-card
- Schema: https://ui.vllnt.ai/r/object-card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/object-card.json`

### Object Handle

- Slug: `object-handle`
- Category: `utility`
- Description: Drag/reposition affordance for spatial objects that need a calm grab target.
- Page: https://ui.vllnt.ai/components/object-handle
- Schema: https://ui.vllnt.ai/r/object-handle.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/object-handle.json`

### Object Inspector

- Slug: `object-inspector`
- Category: `content`
- Description: Right-dock detail header — kind chip, status dot, title/subtitle, with property-section slots.
- Page: https://ui.vllnt.ai/components/object-inspector
- Schema: https://ui.vllnt.ai/r/object-inspector.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/object-inspector.json`

### Order Book

- Slug: `order-book`
- Category: `data`
- Description: Level II bid/ask depth ladder with cumulative size bars and spread readout.
- Page: https://ui.vllnt.ai/components/order-book
- Schema: https://ui.vllnt.ai/r/order-book.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/order-book.json`

### Pagination

- Slug: `pagination`
- Category: `navigation`
- Description: Page navigation controls with previous, next, and page links.
- Page: https://ui.vllnt.ai/components/pagination
- Schema: https://ui.vllnt.ai/r/pagination.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/pagination.json`

### Parallel Timeline

- Slug: `parallel-timeline`
- Category: `educational`
- Description: Multi-track timeline with shared time axis, BCE/CE event markers, and optional era bands for comparative history.
- Page: https://ui.vllnt.ai/components/parallel-timeline
- Schema: https://ui.vllnt.ai/r/parallel-timeline.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/parallel-timeline.json`

### Password Input

- Slug: `password-input`
- Category: `form`
- Description: Password field with a built-in visibility toggle.
- Page: https://ui.vllnt.ai/components/password-input
- Schema: https://ui.vllnt.ai/r/password-input.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/password-input.json`

### Plan Badge

- Slug: `plan-badge`
- Category: `content`
- Description: Subscription tier indicator for pricing, billing, and account summaries.
- Page: https://ui.vllnt.ai/components/plan-badge
- Schema: https://ui.vllnt.ai/r/plan-badge.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/plan-badge.json`

### Playback Ghost

- Slug: `playback-ghost`
- Category: `utility`
- Description: Translucent overlay marking where a canvas object was at a previous timestamp during playback.
- Page: https://ui.vllnt.ai/components/playback-ghost
- Schema: https://ui.vllnt.ai/r/playback-ghost.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/playback-ghost.json`

### Policy Delivery Panel

- Slug: `policy-delivery-panel`
- Category: `content`
- Description: Right-dock panel listing policies / guardrails active for the route or run.
- Page: https://ui.vllnt.ai/components/policy-delivery-panel
- Schema: https://ui.vllnt.ai/r/policy-delivery-panel.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/policy-delivery-panel.json`

### Popover

- Slug: `popover`
- Category: `overlay`
- Description: Floating content panel anchored to a trigger element.
- Page: https://ui.vllnt.ai/components/popover
- Schema: https://ui.vllnt.ai/r/popover.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/popover.json`

### Presence Stack

- Slug: `presence-stack`
- Category: `data`
- Description: Overlapping live-presence avatars with status dots and a sane overflow chip.
- Page: https://ui.vllnt.ai/components/presence-stack
- Schema: https://ui.vllnt.ai/r/presence-stack.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/presence-stack.json`

### Presence Sync Indicator

- Slug: `presence-sync-indicator`
- Category: `data`
- Description: Compact pill that surfaces live connection + sync health for a collaborative canvas.
- Page: https://ui.vllnt.ai/components/presence-sync-indicator
- Schema: https://ui.vllnt.ai/r/presence-sync-indicator.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/presence-sync-indicator.json`

### Pricing Table

- Slug: `pricing-table`
- Category: `billing`
- Description: Plan comparison with feature checklist, tier highlighting, CTA, and an optional monthly/annual toggle.
- Page: https://ui.vllnt.ai/components/pricing-table
- Schema: https://ui.vllnt.ai/r/pricing-table.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/pricing-table.json`

### Primary Source Viewer

- Slug: `primary-source-viewer`
- Category: `data-display`
- Description: Document viewer for historical primary sources with zoom, rotate, region annotations, transcription panel, and metadata footer.
- Page: https://ui.vllnt.ai/components/primary-source-viewer
- Schema: https://ui.vllnt.ai/r/primary-source-viewer.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/primary-source-viewer.json`

### Pro Tip

- Slug: `pro-tip`
- Category: `learning`
- Description: Highlighted tip block with variants for tips, best practices, gotchas, and more.
- Page: https://ui.vllnt.ai/components/pro-tip
- Schema: https://ui.vllnt.ai/r/pro-tip.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/pro-tip.json`

### Profile Section

- Slug: `profile-section`
- Category: `learning`
- Description: User profile display section with avatar and details.
- Page: https://ui.vllnt.ai/components/profile-section
- Schema: https://ui.vllnt.ai/r/profile-section.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/profile-section.json`

### Progress Bar

- Slug: `progress-bar`
- Category: `data`
- Description: Visual progress indicator with labels and completion state.
- Page: https://ui.vllnt.ai/components/progress-bar
- Schema: https://ui.vllnt.ai/r/progress-bar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/progress-bar.json`

### Progress Card

- Slug: `progress-card`
- Category: `data`
- Description: Card displaying progress metrics and status.
- Page: https://ui.vllnt.ai/components/progress-card
- Schema: https://ui.vllnt.ai/r/progress-card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/progress-card.json`

### Prompt Templates

- Slug: `prompt-templates`
- Category: `ai`
- Description: Searchable prompt template gallery with category filter, variable fill-in form, and onSelect.
- Page: https://ui.vllnt.ai/components/prompt-templates
- Schema: https://ui.vllnt.ai/r/prompt-templates.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/prompt-templates.json`

### Property Section

- Slug: `property-section`
- Category: `content`
- Description: Compact key/value grid for inspector panels — labels, sublabels, optional collapse.
- Page: https://ui.vllnt.ai/components/property-section
- Schema: https://ui.vllnt.ai/r/property-section.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/property-section.json`

### Quiz

- Slug: `quiz`
- Category: `learning`
- Description: Interactive multiple-choice quiz with hints, explanations, and scoring.
- Page: https://ui.vllnt.ai/components/quiz
- Schema: https://ui.vllnt.ai/r/quiz.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/quiz.json`

### Radio Group

- Slug: `radio-group`
- Category: `core`
- Description: Group of radio buttons for single-selection input.
- Page: https://ui.vllnt.ai/components/radio-group
- Schema: https://ui.vllnt.ai/r/radio-group.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/radio-group.json`

### Rating

- Slug: `rating`
- Category: `learning`
- Description: Inline star rating for lightweight learner feedback.
- Page: https://ui.vllnt.ai/components/rating
- Schema: https://ui.vllnt.ai/r/rating.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/rating.json`

### Relationship Inspector

- Slug: `relationship-inspector`
- Category: `content`
- Description: Right-dock panel listing inbound + outbound edges of the focused canvas object.
- Page: https://ui.vllnt.ai/components/relationship-inspector
- Schema: https://ui.vllnt.ai/r/relationship-inspector.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/relationship-inspector.json`

### Resizable

- Slug: `resizable`
- Category: `utility`
- Description: Resizable panel layout with draggable handles.
- Page: https://ui.vllnt.ai/components/resizable
- Schema: https://ui.vllnt.ai/r/resizable.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/resizable.json`

### Right Dock

- Slug: `right-dock`
- Category: `navigation`
- Description: Context dock for inspectors, summaries, and secondary canvas panels.
- Page: https://ui.vllnt.ai/components/right-dock
- Schema: https://ui.vllnt.ai/r/right-dock.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/right-dock.json`

### Role Badge

- Slug: `role-badge`
- Category: `content`
- Description: Account role indicator for owners, admins, members, and billing contacts.
- Page: https://ui.vllnt.ai/components/role-badge
- Schema: https://ui.vllnt.ai/r/role-badge.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/role-badge.json`

### Route Map

- Slug: `route-map`
- Category: `data-display`
- Description: Standalone SVG map with animated route paths, waypoints, and progress indicator. For trade routes, voyages, migrations, delivery tracking.
- Page: https://ui.vllnt.ai/components/route-map
- Schema: https://ui.vllnt.ai/r/route-map.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/route-map.json`

### Routing Assignment Panel

- Slug: `routing-assignment-panel`
- Category: `content`
- Description: Right-dock panel listing the agent slots an active route dispatches to.
- Page: https://ui.vllnt.ai/components/routing-assignment-panel
- Schema: https://ui.vllnt.ai/r/routing-assignment-panel.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/routing-assignment-panel.json`

### Run Timeline

- Slug: `run-timeline`
- Category: `data`
- Description: Multi-lane execution timeline showing run phases over time, with optional cursor.
- Page: https://ui.vllnt.ai/components/run-timeline
- Schema: https://ui.vllnt.ai/r/run-timeline.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/run-timeline.json`

### Runtime Overview Panel

- Slug: `runtime-overview-panel`
- Category: `content`
- Description: Top-of-dock summary tile grid for runtime health when no canvas object is selected.
- Page: https://ui.vllnt.ai/components/runtime-overview-panel
- Schema: https://ui.vllnt.ai/r/runtime-overview-panel.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/runtime-overview-panel.json`

### Scope Selector

- Slug: `scope-selector`
- Category: `form`
- Description: Multi-level scope picker for nested environments, teams, and targets.
- Page: https://ui.vllnt.ai/components/scope-selector
- Schema: https://ui.vllnt.ai/r/scope-selector.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/scope-selector.json`

### Scroll Area

- Slug: `scroll-area`
- Category: `utility`
- Description: Custom scrollable area with styled scrollbars.
- Page: https://ui.vllnt.ai/components/scroll-area
- Schema: https://ui.vllnt.ai/r/scroll-area.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/scroll-area.json`

### Search Bar

- Slug: `search-bar`
- Category: `form`
- Description: Text search input with icon and clear functionality.
- Page: https://ui.vllnt.ai/components/search-bar
- Schema: https://ui.vllnt.ai/r/search-bar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/search-bar.json`

### Search Dialog

- Slug: `search-dialog`
- Category: `learning`
- Description: Full-screen search dialog with keyboard navigation.
- Page: https://ui.vllnt.ai/components/search-dialog
- Schema: https://ui.vllnt.ai/r/search-dialog.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/search-dialog.json`

### Segmented Control

- Slug: `segmented-control`
- Category: `form`
- Description: Single-choice segmented selector for switching modes, views, or filters.
- Page: https://ui.vllnt.ai/components/segmented-control
- Schema: https://ui.vllnt.ai/r/segmented-control.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/segmented-control.json`

### Select

- Slug: `select`
- Category: `form`
- Description: Dropdown select input for choosing from a list of options.
- Page: https://ui.vllnt.ai/components/select
- Schema: https://ui.vllnt.ai/r/select.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/select.json`

### Selection Halo

- Slug: `selection-halo`
- Category: `data-display`
- Description: Local-user selection halo with corner handles + label slot for spatial canvases.
- Page: https://ui.vllnt.ai/components/selection-halo
- Schema: https://ui.vllnt.ai/r/selection-halo.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/selection-halo.json`

### Selection Presence

- Slug: `selection-presence`
- Category: `utility`
- Description: Dashed-border overlay marking what another user has selected on the canvas.
- Page: https://ui.vllnt.ai/components/selection-presence
- Schema: https://ui.vllnt.ai/r/selection-presence.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/selection-presence.json`

### Separator

- Slug: `separator`
- Category: `core`
- Description: Visual divider between content sections.
- Page: https://ui.vllnt.ai/components/separator
- Schema: https://ui.vllnt.ai/r/separator.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/separator.json`

### Severity Badge

- Slug: `severity-badge`
- Category: `data`
- Description: Operational severity label with tone variants and optional pulse for critical incidents.
- Page: https://ui.vllnt.ai/components/severity-badge
- Schema: https://ui.vllnt.ai/r/severity-badge.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/severity-badge.json`

### Share Section

- Slug: `share-section`
- Category: `content`
- Description: Social sharing buttons and link copy section.
- Page: https://ui.vllnt.ai/components/share-section
- Schema: https://ui.vllnt.ai/r/share-section.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/share-section.json`

### Sheet

- Slug: `sheet`
- Category: `overlay`
- Description: Slide-over panel from the edge of the screen.
- Page: https://ui.vllnt.ai/components/sheet
- Schema: https://ui.vllnt.ai/r/sheet.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sheet.json`

### Sidebar

- Slug: `sidebar`
- Category: `navigation`
- Description: Collapsible sidebar navigation layout.
- Page: https://ui.vllnt.ai/components/sidebar
- Schema: https://ui.vllnt.ai/r/sidebar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sidebar.json`

### Sidebar Provider

- Slug: `sidebar-provider`
- Category: `navigation`
- Description: Context provider for managing sidebar open/close state.
- Page: https://ui.vllnt.ai/components/sidebar-provider
- Schema: https://ui.vllnt.ai/r/sidebar-provider.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sidebar-provider.json`

### Sidebar Toggle

- Slug: `sidebar-toggle`
- Category: `navigation`
- Description: Responsive toggle button for opening and closing the sidebar.
- Page: https://ui.vllnt.ai/components/sidebar-toggle
- Schema: https://ui.vllnt.ai/r/sidebar-toggle.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sidebar-toggle.json`

### Skeleton

- Slug: `skeleton`
- Category: `core`
- Description: Placeholder loading animation for content.
- Page: https://ui.vllnt.ai/components/skeleton
- Schema: https://ui.vllnt.ai/r/skeleton.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/skeleton.json`

### Slider

- Slug: `slider`
- Category: `core`
- Description: Range slider input for selecting numeric values.
- Page: https://ui.vllnt.ai/components/slider
- Schema: https://ui.vllnt.ai/r/slider.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/slider.json`

### Slideshow

- Slug: `slideshow`
- Category: `content`
- Description: Step-through slideshow for presenting content sequentially.
- Page: https://ui.vllnt.ai/components/slideshow
- Schema: https://ui.vllnt.ai/r/slideshow.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/slideshow.json`

### Snap Guides

- Slug: `snap-guides`
- Category: `data-display`
- Description: Alignment guide overlay — dashed vertical and horizontal lines that surface during a drag.
- Page: https://ui.vllnt.ai/components/snap-guides
- Schema: https://ui.vllnt.ai/r/snap-guides.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/snap-guides.json`

### Sparkline Grid

- Slug: `sparkline-grid`
- Category: `data`
- Description: KPI grid of labeled value tiles each paired with a compact sparkline trend.
- Page: https://ui.vllnt.ai/components/sparkline-grid
- Schema: https://ui.vllnt.ai/r/sparkline-grid.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sparkline-grid.json`

### Spinner

- Slug: `spinner`
- Category: `utility`
- Description: Animated loading spinner indicator.
- Page: https://ui.vllnt.ai/components/spinner
- Schema: https://ui.vllnt.ai/r/spinner.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/spinner.json`

### Stat Card

- Slug: `stat-card`
- Category: `data`
- Description: Headline KPI card for metrics, trends, and supporting context.
- Page: https://ui.vllnt.ai/components/stat-card
- Schema: https://ui.vllnt.ai/r/stat-card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/stat-card.json`

### State Badge Overlay

- Slug: `state-badge-overlay`
- Category: `utility`
- Description: State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped.
- Page: https://ui.vllnt.ai/components/state-badge-overlay
- Schema: https://ui.vllnt.ai/r/state-badge-overlay.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/state-badge-overlay.json`

### Status Board

- Slug: `status-board`
- Category: `data`
- Description: Service health grid for surfacing infrastructure state, queue pressure, and incidents.
- Page: https://ui.vllnt.ai/components/status-board
- Schema: https://ui.vllnt.ai/r/status-board.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/status-board.json`

### Status Indicator

- Slug: `status-indicator`
- Category: `data`
- Description: Compact status label with tone, variant, and activity dot options.
- Page: https://ui.vllnt.ai/components/status-indicator
- Schema: https://ui.vllnt.ai/r/status-indicator.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/status-indicator.json`

### Step By Step

- Slug: `step-by-step`
- Category: `learning`
- Description: Numbered step guide with optional interactive completion tracking.
- Page: https://ui.vllnt.ai/components/step-by-step
- Schema: https://ui.vllnt.ai/r/step-by-step.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/step-by-step.json`

### Step Navigation

- Slug: `step-navigation`
- Category: `navigation`
- Description: Navigation controls for stepping through multi-page content.
- Page: https://ui.vllnt.ai/components/step-navigation
- Schema: https://ui.vllnt.ai/r/step-navigation.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/step-navigation.json`

### Stepper

- Slug: `stepper`
- Category: `learning`
- Description: Sequenced steps with complete, current, and upcoming states.
- Page: https://ui.vllnt.ai/components/stepper
- Schema: https://ui.vllnt.ai/r/stepper.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/stepper.json`

### Sticky Metric

- Slug: `sticky-metric`
- Category: `data`
- Description: Pinned metric pill that sticks to a canvas object's corner.
- Page: https://ui.vllnt.ai/components/sticky-metric
- Schema: https://ui.vllnt.ai/r/sticky-metric.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/sticky-metric.json`

### Story Map

- Slug: `story-map`
- Category: `data-display`
- Description: Standalone SVG scroll-driven narrative map — IntersectionObserver tracks the active chapter and the map shifts to its center + zoom.
- Page: https://ui.vllnt.ai/components/story-map
- Schema: https://ui.vllnt.ai/r/story-map.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/story-map.json`

### Subscription Card

- Slug: `subscription-card`
- Category: `content`
- Description: Subscription status and management card for plan, renewal, and usage details.
- Page: https://ui.vllnt.ai/components/subscription-card
- Schema: https://ui.vllnt.ai/r/subscription-card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/subscription-card.json`

### Table

- Slug: `table`
- Category: `data`
- Description: Styled data table with header, body, and footer sections.
- Page: https://ui.vllnt.ai/components/table
- Schema: https://ui.vllnt.ai/r/table.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/table.json`

### Table Of Contents

- Slug: `table-of-contents`
- Category: `utility`
- Description: Auto-generated table of contents from page headings.
- Page: https://ui.vllnt.ai/components/table-of-contents
- Schema: https://ui.vllnt.ai/r/table-of-contents.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/table-of-contents.json`

### Table Of Contents Panel

- Slug: `table-of-contents-panel`
- Category: `utility`
- Description: Side panel rendering a table of contents for page navigation.
- Page: https://ui.vllnt.ai/components/table-of-contents-panel
- Schema: https://ui.vllnt.ai/r/table-of-contents-panel.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/table-of-contents-panel.json`

### Tabs

- Slug: `tabs`
- Category: `navigation`
- Description: Tabbed content panels with keyboard-accessible tab triggers.
- Page: https://ui.vllnt.ai/components/tabs
- Schema: https://ui.vllnt.ai/r/tabs.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tabs.json`

### Tags Input

- Slug: `tags-input`
- Category: `form`
- Description: Keyboard-friendly tag editor for adding and removing string values.
- Page: https://ui.vllnt.ai/components/tags-input
- Schema: https://ui.vllnt.ai/r/tags-input.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tags-input.json`

### Terminal

- Slug: `terminal`
- Category: `content`
- Description: Terminal-style display for command output.
- Page: https://ui.vllnt.ai/components/terminal
- Schema: https://ui.vllnt.ai/r/terminal.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/terminal.json`

### Textarea

- Slug: `textarea`
- Category: `core`
- Description: Multi-line text input field.
- Page: https://ui.vllnt.ai/components/textarea
- Schema: https://ui.vllnt.ai/r/textarea.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/textarea.json`

### Theme Provider

- Slug: `theme-provider`
- Category: `utility`
- Description: Context provider for light/dark theme switching.
- Page: https://ui.vllnt.ai/components/theme-provider
- Schema: https://ui.vllnt.ai/r/theme-provider.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/theme-provider.json`

### Theme Toggle

- Slug: `theme-toggle`
- Category: `utility`
- Description: Button to toggle between light and dark themes.
- Page: https://ui.vllnt.ai/components/theme-toggle
- Schema: https://ui.vllnt.ai/r/theme-toggle.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/theme-toggle.json`

### Thinking Block

- Slug: `thinking-block`
- Category: `learning`
- Description: Collapsible block showing AI thinking/reasoning with streaming support.
- Page: https://ui.vllnt.ai/components/thinking-block
- Schema: https://ui.vllnt.ai/r/thinking-block.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/thinking-block.json`

### Thread Bubble

- Slug: `thread-bubble`
- Category: `utility`
- Description: Expanded discussion bubble for an anchored canvas comment thread.
- Page: https://ui.vllnt.ai/components/thread-bubble
- Schema: https://ui.vllnt.ai/r/thread-bubble.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/thread-bubble.json`

### Threshold Ring

- Slug: `threshold-ring`
- Category: `data`
- Description: Compact ring gauge expressing how close a value is to a threshold.
- Page: https://ui.vllnt.ai/components/threshold-ring
- Schema: https://ui.vllnt.ai/r/threshold-ring.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/threshold-ring.json`

### Ticker Tape

- Slug: `ticker-tape`
- Category: `data`
- Description: Marquee-style scrolling symbol tape with price and change badges.
- Page: https://ui.vllnt.ai/components/ticker-tape
- Schema: https://ui.vllnt.ai/r/ticker-tape.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/ticker-tape.json`

### Timeline

- Slug: `timeline`
- Category: `content`
- Description: Vertical or horizontal timeline of sequential events with completed/active/upcoming statuses and connector lines.
- Page: https://ui.vllnt.ai/components/timeline
- Schema: https://ui.vllnt.ai/r/timeline.json
- npm deps: @vllnt/ui@^0.2.1, class-variance-authority
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/timeline.json`

### Timeline Scrubber

- Slug: `timeline-scrubber`
- Category: `form`
- Description: Range slider for scrubbing through canvas state playback, with optional milestone ticks.
- Page: https://ui.vllnt.ai/components/timeline-scrubber
- Schema: https://ui.vllnt.ai/r/timeline-scrubber.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/timeline-scrubber.json`

### TLDR Section

- Slug: `tldr-section`
- Category: `content`
- Description: Summary section for quick content overview.
- Page: https://ui.vllnt.ai/components/tldr-section
- Schema: https://ui.vllnt.ai/r/tldr-section.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tldr-section.json`

### Toast

- Slug: `toast`
- Category: `overlay`
- Description: Temporary notification messages with action support.
- Page: https://ui.vllnt.ai/components/toast
- Schema: https://ui.vllnt.ai/r/toast.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/toast.json`

### Toggle

- Slug: `toggle`
- Category: `core`
- Description: Two-state toggle button.
- Page: https://ui.vllnt.ai/components/toggle
- Schema: https://ui.vllnt.ai/r/toggle.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/toggle.json`

### Toggle Group

- Slug: `toggle-group`
- Category: `core`
- Description: Group of toggle buttons for single or multiple selection.
- Page: https://ui.vllnt.ai/components/toggle-group
- Schema: https://ui.vllnt.ai/r/toggle-group.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/toggle-group.json`

### Tooltip

- Slug: `tooltip`
- Category: `overlay`
- Description: Informational popup displayed on hover or focus.
- Page: https://ui.vllnt.ai/components/tooltip
- Schema: https://ui.vllnt.ai/r/tooltip.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tooltip.json`

### Top Bar

- Slug: `top-bar`
- Category: `navigation`
- Description: Workspace header bar for titles, leading controls, centered navigation, and trailing actions.
- Page: https://ui.vllnt.ai/components/top-bar
- Schema: https://ui.vllnt.ai/r/top-bar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/top-bar.json`

### Tour

- Slug: `tour`
- Category: `learning`
- Description: Guided onboarding flow for introducing content or interface patterns.
- Page: https://ui.vllnt.ai/components/tour
- Schema: https://ui.vllnt.ai/r/tour.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tour.json`

### Transaction List

- Slug: `transaction-list`
- Category: `billing`
- Description: Chronological credit/debit history with locale-aware currency formatting and a pinned subscription row.
- Page: https://ui.vllnt.ai/components/transaction-list
- Schema: https://ui.vllnt.ai/r/transaction-list.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/transaction-list.json`

### Tree View

- Slug: `tree-view`
- Category: `data-display`
- Description: Hierarchical tree component for nested data with controlled state, single/multi-select, and keyboard navigation.
- Page: https://ui.vllnt.ai/components/tree-view
- Schema: https://ui.vllnt.ai/r/tree-view.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tree-view.json`

### Tutorial Card

- Slug: `tutorial-card`
- Category: `learning`
- Description: Card for displaying tutorial previews with metadata.
- Page: https://ui.vllnt.ai/components/tutorial-card
- Schema: https://ui.vllnt.ai/r/tutorial-card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tutorial-card.json`

### Tutorial Complete

- Slug: `tutorial-complete`
- Category: `learning`
- Description: Completion screen displayed when a tutorial is finished.
- Page: https://ui.vllnt.ai/components/tutorial-complete
- Schema: https://ui.vllnt.ai/r/tutorial-complete.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tutorial-complete.json`

### Tutorial Filters

- Slug: `tutorial-filters`
- Category: `learning`
- Description: Filter controls for browsing tutorials by category or difficulty.
- Page: https://ui.vllnt.ai/components/tutorial-filters
- Schema: https://ui.vllnt.ai/r/tutorial-filters.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tutorial-filters.json`

### Tutorial Intro Content

- Slug: `tutorial-intro-content`
- Category: `learning`
- Description: Introduction section for tutorial pages with overview and prerequisites.
- Page: https://ui.vllnt.ai/components/tutorial-intro-content
- Schema: https://ui.vllnt.ai/r/tutorial-intro-content.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tutorial-intro-content.json`

### Tutorial MDX

- Slug: `tutorial-mdx`
- Category: `learning`
- Description: MDX renderer tailored for tutorial content with custom components.
- Page: https://ui.vllnt.ai/components/tutorial-mdx
- Schema: https://ui.vllnt.ai/r/tutorial-mdx.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/tutorial-mdx.json`

### Usage Breakdown

- Slug: `usage-breakdown`
- Category: `data`
- Description: Ranked resource consumption list with relative share and trend cues.
- Page: https://ui.vllnt.ai/components/usage-breakdown
- Schema: https://ui.vllnt.ai/r/usage-breakdown.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/usage-breakdown.json`

### Video Embed

- Slug: `video-embed`
- Category: `content`
- Description: Responsive video embed for YouTube and other providers.
- Page: https://ui.vllnt.ai/components/video-embed
- Schema: https://ui.vllnt.ai/r/video-embed.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/video-embed.json`

### View Switcher

- Slug: `view-switcher`
- Category: `navigation`
- Description: URL param-based toggle between named views with pill/tab styling.
- Page: https://ui.vllnt.ai/components/view-switcher
- Schema: https://ui.vllnt.ai/r/view-switcher.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/view-switcher.json`

### Viewport Bookmarks

- Slug: `viewport-bookmarks`
- Category: `navigation`
- Description: Saved-view list for the canvas — pinned spatial locations with optional active state.
- Page: https://ui.vllnt.ai/components/viewport-bookmarks
- Schema: https://ui.vllnt.ai/r/viewport-bookmarks.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/viewport-bookmarks.json`

### Wallet Card

- Slug: `wallet-card`
- Category: `content`
- Description: Credit balance display card for available, pending, and refresh details.
- Page: https://ui.vllnt.ai/components/wallet-card
- Schema: https://ui.vllnt.ai/r/wallet-card.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/wallet-card.json`

### Watchlist

- Slug: `watchlist`
- Category: `data`
- Description: Tracked-symbol list with price, change, and advancing/declining summary.
- Page: https://ui.vllnt.ai/components/watchlist
- Schema: https://ui.vllnt.ai/r/watchlist.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/watchlist.json`

### Workspace Switcher

- Slug: `workspace-switcher`
- Category: `navigation`
- Description: Segmented workspace picker for switching between canvas views and operational contexts.
- Page: https://ui.vllnt.ai/components/workspace-switcher
- Schema: https://ui.vllnt.ai/r/workspace-switcher.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/workspace-switcher.json`

### World Breadcrumbs

- Slug: `world-breadcrumbs`
- Category: `navigation`
- Description: Spatial trail showing the canvas's current location in a hierarchy of worlds, groups, and runs.
- Page: https://ui.vllnt.ai/components/world-breadcrumbs
- Schema: https://ui.vllnt.ai/r/world-breadcrumbs.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/world-breadcrumbs.json`

### World Clock Bar

- Slug: `world-clock-bar`
- Category: `data`
- Description: Multi-timezone display for follow-the-sun teams and operational handoffs.
- Page: https://ui.vllnt.ai/components/world-clock-bar
- Schema: https://ui.vllnt.ai/r/world-clock-bar.json
- npm deps: @vllnt/ui@^0.2.1
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/world-clock-bar.json`

### Zoom HUD

- Slug: `zoom-hud`
- Category: `overlay`
- Description: Zoom controls with current percentage, increment buttons, and reset action for canvas views.
- Page: https://ui.vllnt.ai/components/zoom-hud
- Schema: https://ui.vllnt.ai/r/zoom-hud.json
- npm deps: @vllnt/ui@^0.2.1, lucide-react
- Install: `pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/zoom-hud.json`