# 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
```

## Get Started

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

# Install any component in one line

Pick a component, copy its install command, run it. The CLI fetches the source from `ui.vllnt.ai/r/<name>.json` and writes it directly into your repo — you own the code.

## Install (pick your package manager)

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

# npm
npx shadcn@latest add https://ui.vllnt.ai/r/button.json

# yarn
yarn dlx shadcn@latest add https://ui.vllnt.ai/r/button.json

# bun
bunx --bun shadcn@latest add https://ui.vllnt.ai/r/button.json
```

Replace `button.json` with any component name from the [registry](/components).

## No CLI to install

There is no `@vllnt/cli`. The shadcn CLI already speaks the registry format — running it against `ui.vllnt.ai/r/<name>.json` is the supported install path. Same UX, less to maintain.

## Usage after install

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

export function MyComponent() {
  return <Button>Click me</Button>;
}
```

The CLI installs source files into your project under `components/ui/` (configurable via `components.json`), so updates are explicit — re-run the install command when you want a newer version.

## Why this works for agents

Every component is also exposed as a machine-readable JSON descriptor. AI coding agents can read them directly:

- `https://ui.vllnt.ai/r/registry.json` — index of all 225 components
- `https://ui.vllnt.ai/r/<name>.json` — one component
- `https://ui.vllnt.ai/llms.txt` — concise index per the [llmstxt.org](https://llmstxt.org) spec
- `https://ui.vllnt.ai/llms-full.txt` — full agent context in one fetch

## Next steps

- Browse [all 225 components](/components)
- Read the [philosophy](/philosophy) behind the library
- Read the [docs](/docs)

## Documentation

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

# Getting Started

Welcome to VLLNT UI. This is a component registry built with shadcn/ui.

## Installation

Install components using the shadcn CLI:

```bash
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/[component-name].json
```

## Usage

Import components from `@vllnt/ui`:

```tsx
import { Button } from '@vllnt/ui'

export function MyComponent() {
  return <Button>Click me</Button>
}
```

## Philosophy

Source: https://ui.vllnt.ai/philosophy

# Philosophy

VLLNT UI is built on a set of core principles that guide every design decision and implementation choice.

## Minimalist Design

Less is more. Every component is designed with simplicity at its core. We believe that good design should be invisible—it should work seamlessly without drawing unnecessary attention to itself. Our components are:

- Clean and uncluttered
- Focused on essential functionality
- Free from decorative elements
- Purposeful in every detail

## Dark Mode First

Dark mode isn't an afterthought—it's the primary design direction. Every component is crafted with dark backgrounds in mind, ensuring optimal readability and visual comfort. Light mode is available, but dark mode is where VLLNT UI truly shines.

- Designed for low-light environments
- Reduced eye strain
- Modern aesthetic
- Professional appearance

## No Emoji Style

We maintain a professional, text-based approach. Emojis and decorative icons are kept to a minimum, ensuring our components remain timeless and universally applicable.

- Text-first communication
- Professional tone
- Universal compatibility
- Clean typography

## Fast Components

Performance is not negotiable. Every component is optimized for speed and efficiency:

- Lightweight implementations
- Minimal dependencies
- Optimized rendering
- Fast load times

## Technical Excellence

Beyond aesthetics, VLLNT UI prioritizes:

- **Type Safety**: Built with TypeScript for reliability
- **Accessibility**: WCAG compliant components
- **Customization**: Easy to extend and modify
- **Modern Standards**: Built on latest web technologies

## Getting Started

All components follow these principles. When you use VLLNT UI, you're not just adding components—you're adopting a philosophy of clean, fast, and purposeful design.

## Design Guide

Source: https://ui.vllnt.ai/design
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. The full
machine-readable token set lives in `packages/design/tokens.json`, is documented
in `packages/design/README.md`, and is mirrored publicly at `/r/design.json`.
The site rendering at `/design` reads this file directly.

---

## 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. Roadmap (this file)

This document is the **v1 brand baseline** for VLLNT UI. Expansions tracked
separately:

- `packages/design/tokens.json` — machine-readable tokens (same source of truth, JSON form). Follow-up.
- `/design` site route — human-browsable rendering of this file with live token previews. Follow-up.
- `/r/design.json` — JSON endpoint mirroring tokens for agent consumption. Follow-up.
- `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/)

## 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`