# JDS (Jaco Design System)

> An opinionated design system for AI agent and voice interfaces. Built on Base UI, installed as source with the shadcn CLI. Registry: `https://jds-ruddy.vercel.app/r/{name}.json`, namespace `@jds`.

Install a component: `npx shadcn@latest add @jds/<name>` after adding `"@jds": "https://jds-ruddy.vercel.app/r/{name}.json"` to `registries` in components.json. Start with `@jds/style`.

## Docs

- [Introduction](https://jds-ruddy.vercel.app/docs)
- [Get Started](https://jds-ruddy.vercel.app/docs/get-started)
- [Styling](https://jds-ruddy.vercel.app/docs/styling)
- [Motion](https://jds-ruddy.vercel.app/docs/motion)
- [Icons](https://jds-ruddy.vercel.app/docs/icons)
- [Roadmap](https://jds-ruddy.vercel.app/docs/roadmap)
- [Changelog](https://jds-ruddy.vercel.app/docs/changelog)
- [Contributing](https://jds-ruddy.vercel.app/docs/contributing)

## Agent components

- [Agent Panel](https://jds-ruddy.vercel.app/llms/components/agent-panel.md): A configurable agent side panel: docked or floating, left or right, card, page or glass surface, three entrance motions, and chat/voice modes.
- [Agent Steps](https://jds-ruddy.vercel.app/llms/components/agent-steps.md): Plan and progress for a multi-step run: what's done, what's running, what's next.
- [Approval](https://jds-ruddy.vercel.app/llms/components/approval.md): Human-in-the-loop gate. The agent pauses on an irreversible action until the user approves or denies it.
- [Artifact](https://jds-ruddy.vercel.app/llms/components/artifact.md): A generated document or file in its own panel beside the chat, opened from a card in the message.
- [Branch](https://jds-ruddy.vercel.app/llms/components/branch.md): Step through versions of a response after regenerating. New versions are selected as they arrive.
- [Command Bar](https://jds-ruddy.vercel.app/llms/components/command-bar.md): A ⌘K palette that also asks the agent. Typing filters commands; the Ask row turns the same text into a question, and the answer replaces the list until Escape. Choose whether Enter asks or runs a command.
- [Context Meter](https://jds-ruddy.vercel.app/llms/components/context-meter.md): How full the context window is. A small ring for the toolbar that shifts to warning at 80% and destructive at 95%, with a breakdown on hover.
- [Conversation](https://jds-ruddy.vercel.app/llms/components/conversation.md): Scroll container for a chat thread. Stays pinned to the bottom while tokens stream and lets go when the user scrolls up.
- [Message](https://jds-ruddy.vercel.app/llms/components/message.md): A single turn from the user or the assistant, with hover-revealed actions.
- [Model Picker](https://jds-ruddy.vercel.app/llms/components/model-picker.md): Choose the model for the next message. A quiet trigger for the prompt toolbar; the menu says what each model is for.
- [Prompt Input](https://jds-ruddy.vercel.app/llms/components/prompt-input.md): Composer for chat and agent apps. Enter to send, Shift+Enter for a new line, paste or drop files, stop while streaming.
- [Reasoning](https://jds-ruddy.vercel.app/llms/components/reasoning.md): Model thinking, open while it streams, then collapsed to a one-line summary with the time it took.
- [Response](https://jds-ruddy.vercel.app/llms/components/response.md): Markdown renderer that is safe to stream. Closes unterminated syntax as it arrives and highlights code with Shiki.
- [Shimmer](https://jds-ruddy.vercel.app/llms/components/shimmer.md): In-progress text and a typing indicator for the gap before the first token.
- [Sources](https://jds-ruddy.vercel.app/llms/components/sources.md): Inline numbered citations with hover previews, and a strip of source cards.
- [Suggestions](https://jds-ruddy.vercel.app/llms/components/suggestions.md): Follow-up prompts as a row of chips.
- [Tool Call](https://jds-ruddy.vercel.app/llms/components/tool-call.md): What the agent called, with what input, and what came back. States match AI SDK tool parts.

## Voice components

- [Call Controls](https://jds-ruddy.vercel.app/llms/components/call-controls.md): Controls for a realtime voice session: status and timer, mute, interrupt the agent, end the call.
- [Live Transcript](https://jds-ruddy.vercel.app/llms/components/live-transcript.md): Rolling speech transcript per speaker. Interim text is dimmed until recognition commits it.
- [Push to Talk](https://jds-ruddy.vercel.app/llms/components/push-to-talk.md): Hold to speak with pointer or the Space key. The ring grows with input level so users know they're heard.
- [Voice Orb](https://jds-ruddy.vercel.app/llms/components/voice-orb.md): Presence for a voice agent, drawn in the primary color. Ten variants: particle mesh, glowing ring, twisting ribbons, soft aura, circular bars, halftone dots, three WebGL shaders (plasma, liquid and glass), and a minimal dot for small spots. All share the same states, speed, glow and sensitivity, and react to voice level. Tune one in the Studio.
- [Voice Picker](https://jds-ruddy.vercel.app/llms/components/voice-picker.md): Choose a synthetic voice, with a spoken preview for each option.
- [Waveform](https://jds-ruddy.vercel.app/llms/components/waveform.md): Live spectrum bars for microphone input or agent speech.

## Primitives

- [Accordion](https://jds-ruddy.vercel.app/llms/components/accordion.md): Stacked sections that expand one or several at a time.
- [Alert](https://jds-ruddy.vercel.app/llms/components/alert.md): A callout for status or warnings, inline with content.
- [Alert Dialog](https://jds-ruddy.vercel.app/llms/components/alert-dialog.md): A modal that interrupts to confirm a destructive action.
- [Avatar](https://jds-ruddy.vercel.app/llms/components/avatar.md): An image with a text fallback for users and agents.
- [Badge](https://jds-ruddy.vercel.app/llms/components/badge.md): A small status label.
- [Breadcrumb](https://jds-ruddy.vercel.app/llms/components/breadcrumb.md): Where you are in a hierarchy, with links back up.
- [Button](https://jds-ruddy.vercel.app/llms/components/button.md): A button or a component that looks like a button.
- [Calendar](https://jds-ruddy.vercel.app/llms/components/calendar.md): A month grid for picking a date or range.
- [Card](https://jds-ruddy.vercel.app/llms/components/card.md): A container for grouped content.
- [Carousel](https://jds-ruddy.vercel.app/llms/components/carousel.md): Swipe or step through a row of cards.
- [Checkbox](https://jds-ruddy.vercel.app/llms/components/checkbox.md): An on/off choice, usually in a list of settings.
- [Collapsible](https://jds-ruddy.vercel.app/llms/components/collapsible.md): Shows and hides a panel.
- [Combobox](https://jds-ruddy.vercel.app/llms/components/combobox.md): A text input that filters a list of options as you type.
- [Command](https://jds-ruddy.vercel.app/llms/components/command.md): A searchable command palette with groups and shortcuts.
- [Context Menu](https://jds-ruddy.vercel.app/llms/components/context-menu.md): Actions on right-click or long press.
- [Dialog](https://jds-ruddy.vercel.app/llms/components/dialog.md): A modal window over the page.
- [Drawer](https://jds-ruddy.vercel.app/llms/components/drawer.md): A panel that slides up from the bottom and can be swiped away.
- [Empty](https://jds-ruddy.vercel.app/llms/components/empty.md): A placeholder for empty states, with a next step.
- [Field](https://jds-ruddy.vercel.app/llms/components/field.md): Label, control, description and error, laid out consistently.
- [Form](https://jds-ruddy.vercel.app/llms/components/form.md): Consistent form layout with native validation, built on Base UI Form.
- [Hover Card](https://jds-ruddy.vercel.app/llms/components/hover-card.md): A rich preview when hovering a link or mention.
- [Input](https://jds-ruddy.vercel.app/llms/components/input.md): A single-line text field.
- [Input Group](https://jds-ruddy.vercel.app/llms/components/input-group.md): An input with icons, text or buttons attached.
- [Input OTP](https://jds-ruddy.vercel.app/llms/components/input-otp.md): One-time code entry, one character per slot.
- [Kbd](https://jds-ruddy.vercel.app/llms/components/kbd.md): A keyboard key or shortcut.
- [Label](https://jds-ruddy.vercel.app/llms/components/label.md): Accessible text for a form control.
- [Menu](https://jds-ruddy.vercel.app/llms/components/dropdown-menu.md): A list of actions in a dropdown.
- [Menubar](https://jds-ruddy.vercel.app/llms/components/menubar.md): A desktop-style bar of menus.
- [Meter](https://jds-ruddy.vercel.app/llms/components/meter.md): A measurement within a known range, like quota used.
- [Navigation Menu](https://jds-ruddy.vercel.app/llms/components/navigation-menu.md): Top-level site navigation with rich dropdowns.
- [Number Field](https://jds-ruddy.vercel.app/llms/components/number-field.md): A numeric input with steppers, arrow keys and drag-to-scrub.
- [Pagination](https://jds-ruddy.vercel.app/llms/components/pagination.md): Move between pages of results.
- [Popover](https://jds-ruddy.vercel.app/llms/components/popover.md): A floating panel anchored to a trigger.
- [Progress](https://jds-ruddy.vercel.app/llms/components/progress.md): Completion of a known-length task.
- [Radio Group](https://jds-ruddy.vercel.app/llms/components/radio-group.md): Pick exactly one of a few options.
- [Resizable](https://jds-ruddy.vercel.app/llms/components/resizable.md): Panels the user can resize by dragging the divider.
- [Scroll Area](https://jds-ruddy.vercel.app/llms/components/scroll-area.md): A scroll container with styled scrollbars.
- [Select](https://jds-ruddy.vercel.app/llms/components/select.md): Pick one value from a list.
- [Separator](https://jds-ruddy.vercel.app/llms/components/separator.md): A visual divider.
- [Sheet](https://jds-ruddy.vercel.app/llms/components/sheet.md): A panel that slides in from an edge. Can render inside a container, non-modal.
- [Skeleton](https://jds-ruddy.vercel.app/llms/components/skeleton.md): A placeholder while content loads.
- [Slider](https://jds-ruddy.vercel.app/llms/components/slider.md): Choose a value within a range.
- [Spinner](https://jds-ruddy.vercel.app/llms/components/spinner.md): Indeterminate loading indicator.
- [Switch](https://jds-ruddy.vercel.app/llms/components/switch.md): Turn a setting on or off, taking effect immediately.
- [Table](https://jds-ruddy.vercel.app/llms/components/table.md): Rows and columns of structured data.
- [Tabs](https://jds-ruddy.vercel.app/llms/components/tabs.md): Switch between related views.
- [Textarea](https://jds-ruddy.vercel.app/llms/components/textarea.md): A multi-line text field that grows with content.
- [Toast](https://jds-ruddy.vercel.app/llms/components/sonner.md): Brief notifications, via Sonner.
- [Toggle](https://jds-ruddy.vercel.app/llms/components/toggle.md): A button that stays pressed.
- [Toggle Group](https://jds-ruddy.vercel.app/llms/components/toggle-group.md): A set of toggles, single or multiple choice.
- [Toolbar](https://jds-ruddy.vercel.app/llms/components/toolbar.md): A row of controls with arrow-key navigation between them.
- [Tooltip](https://jds-ruddy.vercel.app/llms/components/tooltip.md): A label on hover or focus.

## Optional

- [Everything in one file](https://jds-ruddy.vercel.app/llms-full.txt): all component docs with source
- [Recipes](https://jds-ruddy.vercel.app/recipes): complete agent and voice experiences, installable as blocks