# Oracul DS

**Oracul DS** is a collection of beautifully designed, accessible, and composable components for your React apps. Built on top of [Base UI](https://base-ui.com/) and styled with [Tailwind CSS](https://tailwindcss.com/), it’s designed for you to copy, paste, and own.

## Overview

- [Introduction](https://ds.oracul.co/ui/docs/index.md)
- [Get Started](https://ds.oracul.co/ui/docs/get-started.md)
- [Roadmap](https://ds.oracul.co/ui/docs/roadmap.md)
- [Radix / shadcn Migration](https://ds.oracul.co/ui/docs/radix-shadcn-migration.md): A comprehensive guide for migrating from shadcn/ui and Radix UI to Oracul DS components.

## Components

- [Accordion](https://ds.oracul.co/ui/docs/components/accordion.md): A set of collapsible panels with headings.
- [Alert](https://ds.oracul.co/ui/docs/components/alert.md): A callout for displaying important information.
- [Alert Dialog](https://ds.oracul.co/ui/docs/components/alert-dialog.md): A modal dialog that interrupts the user workflow for critical confirmations.
- [Autocomplete](https://ds.oracul.co/ui/docs/components/autocomplete.md): An input that suggests options as you type.
- [Avatar](https://ds.oracul.co/ui/docs/components/avatar.md): A visual representation of a user or entity.
- [Badge](https://ds.oracul.co/ui/docs/components/badge.md): A small status indicator or label component.
- [Breadcrumb](https://ds.oracul.co/ui/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Button](https://ds.oracul.co/ui/docs/components/button.md): A button or a component that looks like a button.
- [Calendar](https://ds.oracul.co/ui/docs/components/calendar.md): A date picker for selecting single dates, ranges, or multiple dates.
- [Card](https://ds.oracul.co/ui/docs/components/card.md): A content container for grouping related information.
- [Checkbox](https://ds.oracul.co/ui/docs/components/checkbox.md): A binary toggle input for selecting one or multiple options.
- [Checkbox Group](https://ds.oracul.co/ui/docs/components/checkbox-group.md): A collection of related checkboxes with group-level control.
- [Collapsible](https://ds.oracul.co/ui/docs/components/collapsible.md): A component that toggles visibility of content sections.
- [Combobox](https://ds.oracul.co/ui/docs/components/combobox.md): An input combined with a list of predefined items to select.
- [Command](https://ds.oracul.co/ui/docs/components/command.md): A command palette component built with Dialog and Autocomplete for searching and executing commands.
- [Date Picker](https://ds.oracul.co/ui/docs/components/date-picker.md): A date selection component, often combined with a calendar in a popover or input.
- [Dialog](https://ds.oracul.co/ui/docs/components/dialog.md): A modal overlay for displaying content that requires user interaction.
- [Drawer](https://ds.oracul.co/ui/docs/components/drawer.md): A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.
- [Empty](https://ds.oracul.co/ui/docs/components/empty.md): A container for displaying empty state information.
- [Field](https://ds.oracul.co/ui/docs/components/field.md): A wrapper component for form inputs with labels and validation.
- [Fieldset](https://ds.oracul.co/ui/docs/components/fieldset.md): A group of related form fields with a common label.
- [Form](https://ds.oracul.co/ui/docs/components/form.md): A complete form implementation with validation and submission handling.
- [Frame](https://ds.oracul.co/ui/docs/components/frame.md): A container component for displaying content in a frame.
- [Group](https://ds.oracul.co/ui/docs/components/group.md): A container component for grouping related content with consistent styling.
- [Input](https://ds.oracul.co/ui/docs/components/input.md): A native input element.
- [Input Group](https://ds.oracul.co/ui/docs/components/input-group.md): A flexible component for grouping inputs with addons, buttons, and other elements.
- [Kbd](https://ds.oracul.co/ui/docs/components/kbd.md): A component for displaying keyboard keys and shortcuts.
- [Label](https://ds.oracul.co/ui/docs/components/label.md): Renders an accessible label associated with controls.
- [Menu](https://ds.oracul.co/ui/docs/components/menu.md): A list of actions or options revealed on demand.
- [Meter](https://ds.oracul.co/ui/docs/components/meter.md): A visual representation of a value within a known range.
- [Number Field](https://ds.oracul.co/ui/docs/components/number-field.md): A specialized input for numeric values with increment/decrement controls.
- [OTP Field](https://ds.oracul.co/ui/docs/components/otp-field.md): A segmented input for one-time passwords and verification codes.
- [Pagination](https://ds.oracul.co/ui/docs/components/pagination.md): A pagination with page navigation, next and previous links.
- [Popover](https://ds.oracul.co/ui/docs/components/popover.md): A floating container that appears near a trigger element.
- [Preview Card](https://ds.oracul.co/ui/docs/components/preview-card.md): A rich preview component for displaying linked content.
- [Progress](https://ds.oracul.co/ui/docs/components/progress.md): A visual indicator showing the completion status of a task.
- [Radio Group](https://ds.oracul.co/ui/docs/components/radio-group.md): A set of mutually exclusive options presented as radio buttons.
- [Scroll Area](https://ds.oracul.co/ui/docs/components/scroll-area.md): A container with custom scrollbars for overflow content.
- [Select](https://ds.oracul.co/ui/docs/components/select.md): A common form component for choosing a predefined value in a dropdown menu.
- [Separator](https://ds.oracul.co/ui/docs/components/separator.md): A visual divider for separating content sections.
- [Sheet](https://ds.oracul.co/ui/docs/components/sheet.md): A flyout that opens from the side of the screen, based on the dialog component.
- [Sidebar](https://ds.oracul.co/ui/docs/components/sidebar.md): A collapsible side panel for navigation and secondary content.
- [Skeleton](https://ds.oracul.co/ui/docs/components/skeleton.md): A placeholder for loading content.
- [Slider](https://ds.oracul.co/ui/docs/components/slider.md): A draggable control for selecting values from a continuous range.
- [Spinner](https://ds.oracul.co/ui/docs/components/spinner.md): An indicator that can be used to show a loading state.
- [Switch](https://ds.oracul.co/ui/docs/components/switch.md): A toggle control for binary on/off states.
- [Table](https://ds.oracul.co/ui/docs/components/table.md): A structured data display component with rows and columns.
- [Tabs](https://ds.oracul.co/ui/docs/components/tabs.md): A navigation component for switching between different views or content panels.
- [Textarea](https://ds.oracul.co/ui/docs/components/textarea.md): A multi-line text input for longer content.
- [Toast](https://ds.oracul.co/ui/docs/components/toast.md): A temporary notification message that appears and disappears automatically.
- [Toggle](https://ds.oracul.co/ui/docs/components/toggle.md): A button that switches between two states.
- [Toggle Group](https://ds.oracul.co/ui/docs/components/toggle-group.md): A group of toggle buttons where one or multiple can be selected.
- [Toolbar](https://ds.oracul.co/ui/docs/components/toolbar.md): A container for grouping related actions or controls.
- [Tooltip](https://ds.oracul.co/ui/docs/components/tooltip.md): A small overlay that provides contextual information on hover or focus.

## Hooks

- [useMediaQuery](https://ds.oracul.co/ui/docs/hooks/use-media-query.md): Reactive media query hook with Tailwind-like syntax for conditional rendering based on breakpoints, pointer type, or any CSS media query.
- [useCopyToClipboard](https://ds.oracul.co/ui/docs/hooks/use-copy-to-clipboard.md): Copy text to clipboard with a temporary "copied" state and optional callback.

## Registry API (for AI agents)

Fetch component source and metadata without reading docs. Full guide: https://ds.oracul.co/ui/docs/for-ai

- `GET /ui/api/registry` — list of all component names
- `GET /ui/api/registry/cheatsheet` — imports + variants for ALL components in one request (~40 KB). Load once per session.
- `GET /ui/api/registry/[name]/meta` — imports + variants for one component (~0.5 KB). Use instead of reading source.
- `GET /ui/api/registry/[name]` — full source code. Use only when copying file into project.
- `GET /ui/api/particles/search?q=<keyword>` — keyword search across 486 ready-made composition blocks. Returns ranked matches with scores.
- `GET /ui/api/particles/cheatsheet` — all particles grouped by category (~25 KB). Use when you need a complete UI block (form, dialog, card, toolbar) instead of composing from primitives.
- `GET /ui/api/particles/by-category/[category]` — all particles in a category (e.g. `card`, `dialog`, `button`).
- `GET /ui/api/particles/[name]` — single particle source (`p-card-12`, `p-dialog-3`, etc.).
- `https://ds.oracul.co/ui/llms-full.txt` — every particle source inlined (~640 KB). Use only when fetching individually is expensive.

Decision: need variants/props? → /meta. Need to copy primitive? → /registry/[name]. Need a ready-made block? → /particles/search?q=<keyword> → /particles/[name]. Need overview? → /cheatsheet.

<!-- particles:start -->
## Particles (ready-made composition blocks)

543 pre-built UI compositions you can drop into a project. Each is a standalone block (form, card, dialog flow, etc.) installable via shadcn CLI:

```bash
npx shadcn@latest add @oracul/<particle-name>
```

Browse: https://ds.oracul.co/ui/particles · API index: https://ds.oracul.co/ui/api/particles · Cheatsheet: https://ds.oracul.co/ui/api/particles/cheatsheet

Each particle JSON at `/r/<name>.json` contains full source, dependencies, and category tags.

### accordion (4)

- [p-accordion-1](https://ds.oracul.co/ui/r/p-accordion-1.json): Basic accordion
- [p-accordion-2](https://ds.oracul.co/ui/r/p-accordion-2.json): Accordion with one panel open
- [p-accordion-3](https://ds.oracul.co/ui/r/p-accordion-3.json): Accordion allowing multiple panels open
- [p-accordion-4](https://ds.oracul.co/ui/r/p-accordion-4.json): Controlled accordion

### ai (107)

- [p-chat-1](https://ds.oracul.co/ui/r/p-chat-1.json): Full AI chat: history, suggestions, prompt input _[chat]_
- [p-chat-2](https://ds.oracul.co/ui/r/p-chat-2.json): Full AI chat with reasoning, code, image, sources, attachments _[chat]_
- [p-chat-4](https://ds.oracul.co/ui/r/p-chat-4.json): Coding agent workspace: file tree, terminal, tests, stack _[chat]_
- [p-chat-5](https://ds.oracul.co/ui/r/p-chat-5.json): Voice chat: mic, voice picker, audio player, transcription _[chat]_
- [p-chat-6](https://ds.oracul.co/ui/r/p-chat-6.json): Agentic platform shell: persona, connections, queue, confirmation _[chat]_
- [p-chat-7](https://ds.oracul.co/ui/r/p-chat-7.json): Rich content split view: conversation, artifact panel, code, live JSX preview _[chat]_
- [p-chat-8](https://ds.oracul.co/ui/r/p-chat-8.json): Final agentic workspace: model selector, plan, sandbox, canvas, open-in _[chat]_
- [p-chat-actions-1](https://ds.oracul.co/ui/r/p-chat-actions-1.json): Message toolbar: copy, regenerate, edit, like, dislike _[chat, chat actions]_
- [p-chat-agent-1](https://ds.oracul.co/ui/r/p-chat-agent-1.json): Agent identity card with name, model, instructions, tools _[chat]_
- [p-chat-artifact-1](https://ds.oracul.co/ui/r/p-chat-artifact-1.json): Side-panel artifact container with header, content and footer _[chat]_
- [p-chat-artifact-2](https://ds.oracul.co/ui/r/p-chat-artifact-2.json): Artifact panel with claude-style one-line header and a download menu _[chat, dropdown, menu]_
- [p-chat-artifact-3](https://ds.oracul.co/ui/r/p-chat-artifact-3.json): Inline in-stream artifact with hover-revealed actions menu _[chat, dropdown, menu]_
- [p-chat-artifact-4](https://ds.oracul.co/ui/r/p-chat-artifact-4.json): Inline artifact streaming and error fallback states _[chat, loading, error]_
- [p-chat-artifact-5](https://ds.oracul.co/ui/r/p-chat-artifact-5.json): Full-bleed artifact panel for the live side-panel override _[chat, dropdown, menu]_
- [p-chat-artifact-6](https://ds.oracul.co/ui/r/p-chat-artifact-6.json): In-feed artifact card chip with idle and open states _[chat]_
- [p-chat-artifact-7](https://ds.oracul.co/ui/r/p-chat-artifact-7.json): Artifact card chip in its loading and error states _[chat, loading, error]_
- [p-chat-attachments-1](https://ds.oracul.co/ui/r/p-chat-attachments-1.json): Composer draft row with image, doc and pasted tiles _[chat, chat attachments]_
- [p-chat-attachments-2](https://ds.oracul.co/ui/r/p-chat-attachments-2.json): Attachment states — uploading, failed and quote excerpt _[chat, chat attachments]_
- [p-chat-attachments-3](https://ds.oracul.co/ui/r/p-chat-attachments-3.json): Read-only sent-message attachment row, no remove control _[chat, chat attachments]_
- [p-chat-audio-player-1](https://ds.oracul.co/ui/r/p-chat-audio-player-1.json): Audio player with play/pause, seek, time and mute controls _[chat]_
- [p-chat-canvas-1](https://ds.oracul.co/ui/r/p-chat-canvas-1.json): Agent flow graph with animated edges and card-style nodes _[chat]_
- [p-chat-checkpoint-1](https://ds.oracul.co/ui/r/p-chat-checkpoint-1.json): Save/restore conversation checkpoint marker in timeline _[chat]_
- [p-chat-code-block-1](https://ds.oracul.co/ui/r/p-chat-code-block-1.json): Standalone code block with shiki, filename and copy _[chat, chat code block]_
- [p-chat-commit-1](https://ds.oracul.co/ui/r/p-chat-commit-1.json): Git commit card with author, files and additions/deletions _[chat]_
- [p-chat-compaction-1](https://ds.oracul.co/ui/r/p-chat-compaction-1.json): Compaction divider marking summarized messages in a feed _[chat]_
- [p-chat-compaction-2](https://ds.oracul.co/ui/r/p-chat-compaction-2.json): Live time-based compaction progress driven by a toggle _[chat]_
- [p-chat-compaction-3](https://ds.oracul.co/ui/r/p-chat-compaction-3.json): In-feed compaction: divider above, live progress below _[chat]_
- [p-chat-confirmation-1](https://ds.oracul.co/ui/r/p-chat-confirmation-1.json): Approve / reject tool call with pending and result states _[chat]_
- [p-chat-confirmation-2](https://ds.oracul.co/ui/r/p-chat-confirmation-2.json): Tool permission card — split allow pill, args, deny, keybinds _[chat]_
- [p-chat-confirmation-3](https://ds.oracul.co/ui/r/p-chat-confirmation-3.json): Tool permission card states — pending, approved, rejected _[chat]_
- [p-chat-connection-1](https://ds.oracul.co/ui/r/p-chat-connection-1.json): MCP / tool-server connection statuses with latency _[chat]_
- [p-chat-connector-detail-1](https://ds.oracul.co/ui/r/p-chat-connector-detail-1.json): Connector detail modal — connected/not states, tool permission policies _[chat]_
- [p-chat-connector-suggestion-1](https://ds.oracul.co/ui/r/p-chat-connector-suggestion-1.json): Inline connector suggestions with connect / connected states _[chat]_
- [p-chat-context-1](https://ds.oracul.co/ui/r/p-chat-context-1.json): Token usage indicator with model breakdown popover _[chat]_
- [p-chat-conversation-1](https://ds.oracul.co/ui/r/p-chat-conversation-1.json): Conversation list with empty state and auto-scroll _[chat, chat conversation]_
- [p-chat-environment-variables-1](https://ds.oracul.co/ui/r/p-chat-environment-variables-1.json): Editable env-vars list with secret masking and add/remove _[chat]_
- [p-chat-file-card-1](https://ds.oracul.co/ui/r/p-chat-file-card-1.json): Generated file card with icon, title and download action _[chat]_
- [p-chat-file-card-2](https://ds.oracul.co/ui/r/p-chat-file-card-2.json): File card with code preview and multiple actions _[chat]_
- [p-chat-file-card-3](https://ds.oracul.co/ui/r/p-chat-file-card-3.json): Spreadsheet file card with truncated long title _[chat]_
- [p-chat-file-card-4](https://ds.oracul.co/ui/r/p-chat-file-card-4.json): Image file card with thumbnail preview _[chat]_
- [p-chat-file-card-5](https://ds.oracul.co/ui/r/p-chat-file-card-5.json): File card in the loading state while the file generates _[chat, loading]_
- [p-chat-file-card-6](https://ds.oracul.co/ui/r/p-chat-file-card-6.json): File card in the error state with a retry action _[chat, error]_
- [p-chat-file-tree-1](https://ds.oracul.co/ui/r/p-chat-file-tree-1.json): Recursive workspace file tree with selection and badges _[chat]_
- [p-chat-image-1](https://ds.oracul.co/ui/r/p-chat-image-1.json): Generated image inside an assistant message _[chat]_
- [p-chat-image-2](https://ds.oracul.co/ui/r/p-chat-image-2.json): Clickable image gallery that opens a lightbox with prev/next _[chat]_
- [p-chat-inline-citation-1](https://ds.oracul.co/ui/r/p-chat-inline-citation-1.json): Inline citation badge with sources carousel popover _[chat, chat citation]_
- [p-chat-jsx-preview-1](https://ds.oracul.co/ui/r/p-chat-jsx-preview-1.json): Streaming JSX rendered live with auto-closing tags _[chat]_
- [p-chat-loader-1](https://ds.oracul.co/ui/r/p-chat-loader-1.json): Shimmer-animated text loaders at different speeds _[chat, chat loader]_
- [p-chat-message-1](https://ds.oracul.co/ui/r/p-chat-message-1.json): Messages by role (user, assistant, system) with actions _[chat, chat message]_
- [p-chat-message-2](https://ds.oracul.co/ui/r/p-chat-message-2.json): Inline edit mode with Cancel/Save, Enter-to-save _[chat, chat message, textarea]_
- [p-chat-message-3](https://ds.oracul.co/ui/r/p-chat-message-3.json): Alternate-response branch navigation (prev/next/page) _[chat, chat message]_
- [p-chat-message-4](https://ds.oracul.co/ui/r/p-chat-message-4.json): Scroll-to-bottom FAB that appears when scrolled up _[chat, chat message, scroll area]_
- [p-chat-message-5](https://ds.oracul.co/ui/r/p-chat-message-5.json): Selecting assistant text surfaces a Reply pill _[chat, chat message]_
- [p-chat-message-6](https://ds.oracul.co/ui/r/p-chat-message-6.json): Hover-reveal vs always-on action rows with timestamps _[chat, chat message, time]_
- [p-chat-message-7](https://ds.oracul.co/ui/r/p-chat-message-7.json): User message with image + document attachment tiles _[chat, chat message, file]_
- [p-chat-message-8](https://ds.oracul.co/ui/r/p-chat-message-8.json): Pasted-text tile and quoted-excerpt block-quote cards _[chat, chat message, file]_
- [p-chat-mic-selector-1](https://ds.oracul.co/ui/r/p-chat-mic-selector-1.json): Microphone device picker from enumerateDevices _[chat]_
- [p-chat-model-selector-1](https://ds.oracul.co/ui/r/p-chat-model-selector-1.json): Standalone model picker grouped by provider with disabled tiers _[chat]_
- [p-chat-open-in-chat-1](https://ds.oracul.co/ui/r/p-chat-open-in-chat-1.json): Open the current prompt in ChatGPT, Claude, Cursor, GitHub or Google _[chat]_
- [p-chat-package-info-1](https://ds.oracul.co/ui/r/p-chat-package-info-1.json): npm package upgrade cards with change-type badges _[chat]_
- [p-chat-persona-1](https://ds.oracul.co/ui/r/p-chat-persona-1.json): Persona switcher with avatar states and animated rings _[chat]_
- [p-chat-plan-1](https://ds.oracul.co/ui/r/p-chat-plan-1.json): Upfront agent plan with shimmer-loaded title and steps _[chat]_
- [p-chat-prompt-input-1](https://ds.oracul.co/ui/r/p-chat-prompt-input-1.json): Prompt input with attach and voice tools _[chat, chat prompt]_
- [p-chat-prompt-input-2](https://ds.oracul.co/ui/r/p-chat-prompt-input-2.json): Composer with attach menu, model picker, send/stop toggle _[chat, chat prompt, dropdown, menu]_
- [p-chat-prompt-input-3](https://ds.oracul.co/ui/r/p-chat-prompt-input-3.json): Composer with active research chip and switch-toggle menu _[chat, chat prompt, dropdown, menu]_
- [p-chat-prompt-input-4](https://ds.oracul.co/ui/r/p-chat-prompt-input-4.json): Full composer with skills, connectors, effort submenu, model rows _[chat, chat prompt, dropdown, menu]_
- [p-chat-prompt-input-5](https://ds.oracul.co/ui/r/p-chat-prompt-input-5.json): Submit status matrix and textarea autogrow demo _[chat, chat prompt]_
- [p-chat-prompt-input-6](https://ds.oracul.co/ui/r/p-chat-prompt-input-6.json): Composer with draft attachments inside the shell, removable _[chat]_
- [p-chat-prompt-input-7](https://ds.oracul.co/ui/r/p-chat-prompt-input-7.json): Composer with /slash + @mention highlighting, hover cards and click-to-open modal _[chat]_
- [p-chat-queue-1](https://ds.oracul.co/ui/r/p-chat-queue-1.json): Agent task queue with pending, running, completed sections _[chat]_
- [p-chat-research-1](https://ds.oracul.co/ui/r/p-chat-research-1.json): Research card with title, sources and progress _[chat, chat research]_
- [p-chat-research-2](https://ds.oracul.co/ui/r/p-chat-research-2.json): Research card alongside a full research report _[chat]_
- [p-chat-research-3](https://ds.oracul.co/ui/r/p-chat-research-3.json): Research panel with header, timeline and running status _[chat]_
- [p-chat-research-4](https://ds.oracul.co/ui/r/p-chat-research-4.json): Research timeline with multiple step states _[chat]_
- [p-chat-research-5](https://ds.oracul.co/ui/r/p-chat-research-5.json): Research panel with grouped sources by domain _[chat]_
- [p-chat-research-6](https://ds.oracul.co/ui/r/p-chat-research-6.json): Research card and panel in the failed error state _[chat, error]_
- [p-chat-research-7](https://ds.oracul.co/ui/r/p-chat-research-7.json): Docked research panel with a draggable resize handle _[chat, chat research]_
- [p-chat-response-1](https://ds.oracul.co/ui/r/p-chat-response-1.json): Assistant markdown: headings, list, alert, code, table, link _[chat, chat response]_
- [p-chat-response-2](https://ds.oracul.co/ui/r/p-chat-response-2.json): Interactive alerts, task-list, kbd, footnotes, code copy _[chat, chat response]_
- [p-chat-sandbox-1](https://ds.oracul.co/ui/r/p-chat-sandbox-1.json): Sandboxed code preview with Code, Preview, Console tabs _[chat]_
- [p-chat-schema-display-1](https://ds.oracul.co/ui/r/p-chat-schema-display-1.json): API endpoint schema with method, path and parameter sections _[chat]_
- [p-chat-search-dialog-1](https://ds.oracul.co/ui/r/p-chat-search-dialog-1.json): Global chat search (⌘K) with highlight, skeleton and states _[chat, command]_
- [p-chat-skill-doc-1](https://ds.oracul.co/ui/r/p-chat-skill-doc-1.json): SKILL.md viewer — eye/code toggle, description, version, body _[chat]_
- [p-chat-snippet-1](https://ds.oracul.co/ui/r/p-chat-snippet-1.json): Copyable shell-command snippet lines _[chat]_
- [p-chat-source-1](https://ds.oracul.co/ui/r/p-chat-source-1.json): Source favicons with image and fallback states _[chat, chat sources]_
- [p-chat-source-2](https://ds.oracul.co/ui/r/p-chat-source-2.json): Overlapping favicon stacks with overflow count _[chat]_
- [p-chat-source-3](https://ds.oracul.co/ui/r/p-chat-source-3.json): Source domains list with top count and total _[chat]_
- [p-chat-source-4](https://ds.oracul.co/ui/r/p-chat-source-4.json): Source domains in loading and loaded states _[chat]_
- [p-chat-source-5](https://ds.oracul.co/ui/r/p-chat-source-5.json): Grouped sources by search query with empty state _[chat]_
- [p-chat-sources-1](https://ds.oracul.co/ui/r/p-chat-sources-1.json): Collapsible used-sources list under an assistant reply _[chat, chat sources]_
- [p-chat-speech-input-1](https://ds.oracul.co/ui/r/p-chat-speech-input-1.json): Push-to-talk mic with Web Speech and MediaRecorder fallback _[chat]_
- [p-chat-stack-trace-1](https://ds.oracul.co/ui/r/p-chat-stack-trace-1.json): Parsed Node stack trace with clickable frames _[chat]_
- [p-chat-suggestion-1](https://ds.oracul.co/ui/r/p-chat-suggestion-1.json): Horizontal suggestion chips above the prompt input _[chat, chat suggestion]_
- [p-chat-terminal-1](https://ds.oracul.co/ui/r/p-chat-terminal-1.json): ANSI-coloured terminal output with autoscroll and copy _[chat]_
- [p-chat-test-results-1](https://ds.oracul.co/ui/r/p-chat-test-results-1.json): Test runner output with suites, summary and failure details _[chat]_
- [p-chat-timeline-1](https://ds.oracul.co/ui/r/p-chat-timeline-1.json): Completed execution timeline: reasoning, search and read steps _[chat, chat timeline]_
- [p-chat-timeline-2](https://ds.oracul.co/ui/r/p-chat-timeline-2.json): Live execution timeline with running spinner and progress bar _[chat, chat timeline, loading]_
- [p-chat-timeline-3](https://ds.oracul.co/ui/r/p-chat-timeline-3.json): Reasoning-only timeline chain under an assistant reply _[chat, chat timeline]_
- [p-chat-timeline-4](https://ds.oracul.co/ui/r/p-chat-timeline-4.json): Mixed-icon timeline with skill, file, fetch and error steps _[chat, chat timeline, error]_
- [p-chat-token-chip-1](https://ds.oracul.co/ui/r/p-chat-token-chip-1.json): Inline token chips for slash commands and mentions _[chat]_
- [p-chat-transcription-1](https://ds.oracul.co/ui/r/p-chat-transcription-1.json): Click-to-seek STT transcription synced with playback _[chat]_
- [p-chat-voice-selector-1](https://ds.oracul.co/ui/r/p-chat-voice-selector-1.json): TTS voice picker with provider and language metadata _[chat]_
- [p-chat-web-search-1](https://ds.oracul.co/ui/r/p-chat-web-search-1.json): Web search panel with query and scrollable results _[chat, chat web search]_
- [p-chat-web-search-2](https://ds.oracul.co/ui/r/p-chat-web-search-2.json): Web search states: working, complete and error _[chat, chat web search]_
- [p-chat-web-search-3](https://ds.oracul.co/ui/r/p-chat-web-search-3.json): Web search and fetch inline in an assistant message _[chat, chat web search]_
- [p-chat-web-search-4](https://ds.oracul.co/ui/r/p-chat-web-search-4.json): Web fetch cards and grouped page results _[chat, chat web search]_
- [p-slash-highlighted-textarea-1](https://ds.oracul.co/ui/r/p-slash-highlighted-textarea-1.json): Composer textarea with inline /slash + @mention highlighting _[chat]_

### alert (7)

- [p-alert-1](https://ds.oracul.co/ui/r/p-alert-1.json): Basic alert
- [p-alert-2](https://ds.oracul.co/ui/r/p-alert-2.json): Alert with icon
- [p-alert-3](https://ds.oracul.co/ui/r/p-alert-3.json): Alert with icon and action buttons
- [p-alert-4](https://ds.oracul.co/ui/r/p-alert-4.json): Info alert _[info]_
- [p-alert-5](https://ds.oracul.co/ui/r/p-alert-5.json): Success alert _[success]_
- [p-alert-6](https://ds.oracul.co/ui/r/p-alert-6.json): Warning alert _[warning]_
- [p-alert-7](https://ds.oracul.co/ui/r/p-alert-7.json): Error alert _[error]_

### alert dialog (3)

- [p-alert-dialog-1](https://ds.oracul.co/ui/r/p-alert-dialog-1.json): Alert dialog _[dialog]_
- [p-alert-dialog-2](https://ds.oracul.co/ui/r/p-alert-dialog-2.json): Alert dialog with bare footer _[dialog]_
- [p-dialog-4](https://ds.oracul.co/ui/r/p-dialog-4.json): Dialog with close confirmation _[dialog]_

### autocomplete (16)

- [p-autocomplete-1](https://ds.oracul.co/ui/r/p-autocomplete-1.json): Basic autocomplete _[input]_
- [p-autocomplete-10](https://ds.oracul.co/ui/r/p-autocomplete-10.json): Autocomplete with grouped items _[input]_
- [p-autocomplete-11](https://ds.oracul.co/ui/r/p-autocomplete-11.json): Autocomplete with limited number of results _[input]_
- [p-autocomplete-12](https://ds.oracul.co/ui/r/p-autocomplete-12.json): Autocomplete with async items loading _[input, async]_
- [p-autocomplete-13](https://ds.oracul.co/ui/r/p-autocomplete-13.json): Autocomplete form _[form, input]_
- [p-autocomplete-14](https://ds.oracul.co/ui/r/p-autocomplete-14.json): Autocomplete form _[input]_
- [p-autocomplete-15](https://ds.oracul.co/ui/r/p-autocomplete-15.json): Pill-shaped autocomplete _[input]_
- [p-autocomplete-2](https://ds.oracul.co/ui/r/p-autocomplete-2.json): Disabled autocomplete _[input, disabled]_
- [p-autocomplete-3](https://ds.oracul.co/ui/r/p-autocomplete-3.json): Small autocomplete _[input]_
- [p-autocomplete-4](https://ds.oracul.co/ui/r/p-autocomplete-4.json): Large autocomplete _[input]_
- [p-autocomplete-5](https://ds.oracul.co/ui/r/p-autocomplete-5.json): Autocomplete with label _[input]_
- [p-autocomplete-6](https://ds.oracul.co/ui/r/p-autocomplete-6.json): Autocomplete autofilling the input with the highlighted item _[input]_
- [p-autocomplete-7](https://ds.oracul.co/ui/r/p-autocomplete-7.json): Autocomplete auto highlighting the first option _[input]_
- [p-autocomplete-8](https://ds.oracul.co/ui/r/p-autocomplete-8.json): Autocomplete with clear button _[input]_
- [p-autocomplete-9](https://ds.oracul.co/ui/r/p-autocomplete-9.json): Autocomplete with trigger and clear buttons _[input]_
- [p-field-7](https://ds.oracul.co/ui/r/p-field-7.json): Field with autocomplete _[field, input, label]_

### avatar (16)

- [p-avatar-1](https://ds.oracul.co/ui/r/p-avatar-1.json): Avatar with image and fallback
- [p-avatar-10](https://ds.oracul.co/ui/r/p-avatar-10.json): Avatar with notification badge
- [p-avatar-11](https://ds.oracul.co/ui/r/p-avatar-11.json): Rounded avatar with notification badge
- [p-avatar-12](https://ds.oracul.co/ui/r/p-avatar-12.json): Avatar with verified badge
- [p-avatar-13](https://ds.oracul.co/ui/r/p-avatar-13.json): Small overlapping avatar group
- [p-avatar-14](https://ds.oracul.co/ui/r/p-avatar-14.json): Large overlapping avatar group
- [p-avatar-2](https://ds.oracul.co/ui/r/p-avatar-2.json): Fallback-only avatar
- [p-avatar-3](https://ds.oracul.co/ui/r/p-avatar-3.json): Avatars with different sizes
- [p-avatar-4](https://ds.oracul.co/ui/r/p-avatar-4.json): Avatars with different radii
- [p-avatar-5](https://ds.oracul.co/ui/r/p-avatar-5.json): Overlapping avatar group
- [p-avatar-6](https://ds.oracul.co/ui/r/p-avatar-6.json): Avatar with user icon fallback
- [p-avatar-7](https://ds.oracul.co/ui/r/p-avatar-7.json): Avatar with emerald status dot
- [p-avatar-8](https://ds.oracul.co/ui/r/p-avatar-8.json): Avatar with muted status dot
- [p-avatar-9](https://ds.oracul.co/ui/r/p-avatar-9.json): Rounded avatar with top-right emerald status
- [p-group-23](https://ds.oracul.co/ui/r/p-group-23.json): Group with filter label, combobox multi-select, and remove button _[badge, button, combobox, group]_
- [p-popover-3](https://ds.oracul.co/ui/r/p-popover-3.json): Animated popovers _[button, popover]_

### badge (22)

- [p-badge-1](https://ds.oracul.co/ui/r/p-badge-1.json): Basic badge
- [p-badge-10](https://ds.oracul.co/ui/r/p-badge-10.json): Large badge
- [p-badge-11](https://ds.oracul.co/ui/r/p-badge-11.json): Badge with icon
- [p-badge-12](https://ds.oracul.co/ui/r/p-badge-12.json): Badge with link
- [p-badge-13](https://ds.oracul.co/ui/r/p-badge-13.json): Badge with count
- [p-badge-14](https://ds.oracul.co/ui/r/p-badge-14.json): Full rounded badge (pill)
- [p-badge-15](https://ds.oracul.co/ui/r/p-badge-15.json): Badge with number after text
- [p-badge-16](https://ds.oracul.co/ui/r/p-badge-16.json): Status badge - Paid
- [p-badge-17](https://ds.oracul.co/ui/r/p-badge-17.json): Status badge - Pending
- [p-badge-18](https://ds.oracul.co/ui/r/p-badge-18.json): Status badge - Failed
- [p-badge-19](https://ds.oracul.co/ui/r/p-badge-19.json): Selectable badge with checkbox _[checkbox]_
- [p-badge-2](https://ds.oracul.co/ui/r/p-badge-2.json): Outline badge
- [p-badge-20](https://ds.oracul.co/ui/r/p-badge-20.json): Removable badge
- [p-badge-3](https://ds.oracul.co/ui/r/p-badge-3.json): Secondary badge
- [p-badge-4](https://ds.oracul.co/ui/r/p-badge-4.json): Destructive badge _[error]_
- [p-badge-5](https://ds.oracul.co/ui/r/p-badge-5.json): Info badge _[info]_
- [p-badge-6](https://ds.oracul.co/ui/r/p-badge-6.json): Success badge _[success]_
- [p-badge-7](https://ds.oracul.co/ui/r/p-badge-7.json): Warning badge _[warning]_
- [p-badge-8](https://ds.oracul.co/ui/r/p-badge-8.json): Error badge _[error]_
- [p-badge-9](https://ds.oracul.co/ui/r/p-badge-9.json): Small badge
- [p-input-group-10](https://ds.oracul.co/ui/r/p-input-group-10.json): Input group with badge _[input group]_
- [p-input-group-18](https://ds.oracul.co/ui/r/p-input-group-18.json): Input group with badge and menu _[dropdown, input group, menu]_

### button (67)

- [p-back-button-1](https://ds.oracul.co/ui/r/p-back-button-1.json): Shared «Назад» button with chevron icon
- [p-button-1](https://ds.oracul.co/ui/r/p-button-1.json): Default button
- [p-button-10](https://ds.oracul.co/ui/r/p-button-10.json): Large button
- [p-button-11](https://ds.oracul.co/ui/r/p-button-11.json): Extra-large button
- [p-button-12](https://ds.oracul.co/ui/r/p-button-12.json): Disabled button _[disabled]_
- [p-button-13](https://ds.oracul.co/ui/r/p-button-13.json): Icon button
- [p-button-14](https://ds.oracul.co/ui/r/p-button-14.json): Small icon button
- [p-button-15](https://ds.oracul.co/ui/r/p-button-15.json): Large icon button
- [p-button-16](https://ds.oracul.co/ui/r/p-button-16.json): Button with icon
- [p-button-17](https://ds.oracul.co/ui/r/p-button-17.json): Link rendered as button
- [p-button-18](https://ds.oracul.co/ui/r/p-button-18.json): Custom loading button with manual Spinner _[loading]_
- [p-button-19](https://ds.oracul.co/ui/r/p-button-19.json): Expandable show more/less toggle button
- [p-button-2](https://ds.oracul.co/ui/r/p-button-2.json): Outline button
- [p-button-20](https://ds.oracul.co/ui/r/p-button-20.json): Back link button with chevron
- [p-button-21](https://ds.oracul.co/ui/r/p-button-21.json): Card-style button with heading and description
- [p-button-22](https://ds.oracul.co/ui/r/p-button-22.json): Directional pad control buttons
- [p-button-23](https://ds.oracul.co/ui/r/p-button-23.json): Outline like button with count
- [p-button-24](https://ds.oracul.co/ui/r/p-button-24.json): Social login icon buttons
- [p-button-26](https://ds.oracul.co/ui/r/p-button-26.json): Star button with count badge
- [p-button-27](https://ds.oracul.co/ui/r/p-button-27.json): Button group with QR code icon and sign in _[group]_
- [p-button-28](https://ds.oracul.co/ui/r/p-button-28.json): Button with avatar _[avatar]_
- [p-button-29](https://ds.oracul.co/ui/r/p-button-29.json): Pill-shaped button with rounded-full styling
- [p-button-3](https://ds.oracul.co/ui/r/p-button-3.json): Secondary button
- [p-button-30](https://ds.oracul.co/ui/r/p-button-30.json): Button with animated arrow on hover
- [p-button-31](https://ds.oracul.co/ui/r/p-button-31.json): Button with keyboard shortcut indicator _[kbd]_
- [p-button-32](https://ds.oracul.co/ui/r/p-button-32.json): Button with notification badge _[badge]_
- [p-button-33](https://ds.oracul.co/ui/r/p-button-33.json): Paired buttons (Cancel/Save)
- [p-button-34](https://ds.oracul.co/ui/r/p-button-34.json): Button with animated status dot
- [p-button-35](https://ds.oracul.co/ui/r/p-button-35.json): Icon-only copy button with feedback
- [p-button-36](https://ds.oracul.co/ui/r/p-button-36.json): Copy button with feedback
- [p-button-37](https://ds.oracul.co/ui/r/p-button-37.json): Rotating icon button (FAB-style toggle)
- [p-button-38](https://ds.oracul.co/ui/r/p-button-38.json): Social login buttons (Google, X, GitHub)
- [p-button-39](https://ds.oracul.co/ui/r/p-button-39.json): Hamburger menu button with animated icon
- [p-button-4](https://ds.oracul.co/ui/r/p-button-4.json): Destructive button
- [p-button-40](https://ds.oracul.co/ui/r/p-button-40.json): Download button with progress and cancel action _[group, tooltip, toast]_
- [p-button-41](https://ds.oracul.co/ui/r/p-button-41.json): Button using the built-in loading prop _[loading]_
- [p-button-5](https://ds.oracul.co/ui/r/p-button-5.json): Destructive outline button
- [p-button-6](https://ds.oracul.co/ui/r/p-button-6.json): Ghost button
- [p-button-7](https://ds.oracul.co/ui/r/p-button-7.json): Link button
- [p-button-8](https://ds.oracul.co/ui/r/p-button-8.json): Extra-small button
- [p-button-9](https://ds.oracul.co/ui/r/p-button-9.json): Small button
- [p-field-18](https://ds.oracul.co/ui/r/p-field-18.json): Complete form built with field _[checkbox, field, form, input, label, select]_
- [p-field-6](https://ds.oracul.co/ui/r/p-field-6.json): Input group with field _[field, input, input group]_
- [p-form-1](https://ds.oracul.co/ui/r/p-form-1.json): Input in a form _[field, form, input]_
- [p-form-2](https://ds.oracul.co/ui/r/p-form-2.json): Form with zod validation _[field, form, label, validation, zod]_
- [p-group-16](https://ds.oracul.co/ui/r/p-group-16.json): Group with add button and input _[group, input]_
- [p-group-20](https://ds.oracul.co/ui/r/p-group-20.json): Group with input and text button _[group, input]_
- [p-group-5](https://ds.oracul.co/ui/r/p-group-5.json): Group with disabled button _[group]_
- [p-group-6](https://ds.oracul.co/ui/r/p-group-6.json): Group with default button _[group]_
- [p-input-10](https://ds.oracul.co/ui/r/p-input-10.json): Input group mimicking a URL bar _[input, input group, popover]_
- [p-input-7](https://ds.oracul.co/ui/r/p-input-7.json): Input with button using Group _[group, input]_
- [p-input-8](https://ds.oracul.co/ui/r/p-input-8.json): Input with start text and end tooltip _[input, input group, popover]_
- [p-input-9](https://ds.oracul.co/ui/r/p-input-9.json): Password input with toggle visibility _[input, input group, tooltip]_
- [p-input-group-19](https://ds.oracul.co/ui/r/p-input-group-19.json): Mini editor built with input group and toggle _[input group, textarea, toggle]_
- [p-input-group-21](https://ds.oracul.co/ui/r/p-input-group-21.json): Input group with start tooltip _[input, input group, tooltip]_
- [p-input-group-22](https://ds.oracul.co/ui/r/p-input-group-22.json): Input group with clear button _[input, input group]_
- [p-input-group-23](https://ds.oracul.co/ui/r/p-input-group-23.json): Search input group with loader and voice button _[input, input group, search, tooltip]_
- [p-input-group-26](https://ds.oracul.co/ui/r/p-input-group-26.json): Password input with strength indicator _[input, input group, label]_
- [p-input-group-27](https://ds.oracul.co/ui/r/p-input-group-27.json): Code snippet input with language selector _[input group, select, textarea, tooltip]_
- [p-input-group-28](https://ds.oracul.co/ui/r/p-input-group-28.json): Message composer with attachment buttons _[input group, textarea, tooltip]_
- [p-input-group-29](https://ds.oracul.co/ui/r/p-input-group-29.json): Chat input with voice and send buttons _[input group, textarea, tooltip]_
- [p-input-group-8](https://ds.oracul.co/ui/r/p-input-group-8.json): Input group with icon button _[input group]_
- [p-input-group-9](https://ds.oracul.co/ui/r/p-input-group-9.json): Input group with button _[input group]_
- [p-popover-1](https://ds.oracul.co/ui/r/p-popover-1.json): Popover with a form _[field, form, popover, textarea]_
- [p-popover-2](https://ds.oracul.co/ui/r/p-popover-2.json): Popover with close button _[popover]_
- [p-textarea-14](https://ds.oracul.co/ui/r/p-textarea-14.json): Textarea with button aligned right _[textarea]_
- [p-textarea-15](https://ds.oracul.co/ui/r/p-textarea-15.json): Textarea with button aligned left _[textarea]_

### card (36)

- [p-card-1](https://ds.oracul.co/ui/r/p-card-1.json): A basic card with header and footer _[form]_
- [p-card-10](https://ds.oracul.co/ui/r/p-card-10.json): Card within a frame with header and footer _[form, frame]_
- [p-card-11](https://ds.oracul.co/ui/r/p-card-11.json): CardFrame with header action _[frame]_
- [p-card-12](https://ds.oracul.co/ui/r/p-card-12.json): Horizontal sessions carousel with prev/next controls
- [p-card-2](https://ds.oracul.co/ui/r/p-card-2.json): Authentication card with actions _[form]_
- [p-card-3](https://ds.oracul.co/ui/r/p-card-3.json): Authentication card with separators _[form]_
- [p-card-4](https://ds.oracul.co/ui/r/p-card-4.json): Framed card with footer _[form]_
- [p-card-5](https://ds.oracul.co/ui/r/p-card-5.json): Framed card with header _[form]_
- [p-card-6](https://ds.oracul.co/ui/r/p-card-6.json): Framed card with header and footer _[form]_
- [p-card-7](https://ds.oracul.co/ui/r/p-card-7.json): Framed card with no rounded bottom _[form]_
- [p-card-8](https://ds.oracul.co/ui/r/p-card-8.json): Card within a frame and footer _[form, frame]_
- [p-card-9](https://ds.oracul.co/ui/r/p-card-9.json): Card within a frame and footer _[form, frame]_
- [p-cookie-banner-1](https://ds.oracul.co/ui/r/p-cookie-banner-1.json): Cookie-consent banner (152-ФЗ) with accept action
- [p-directory-card-1](https://ds.oracul.co/ui/r/p-directory-card-1.json): Catalog browse tile with install count and action
- [p-directory-card-2](https://ds.oracul.co/ui/r/p-directory-card-2.json): Connector catalog cards with icon, installs and popularity rank
- [p-directory-detail-1](https://ds.oracul.co/ui/r/p-directory-detail-1.json): Connector catalog detail panel with example carousel and tools
- [p-legal-shell-1](https://ds.oracul.co/ui/r/p-legal-shell-1.json): Legal-page chrome — back, title, sections, list and footer
- [p-legal-shell-2](https://ds.oracul.co/ui/r/p-legal-shell-2.json): Legal index — doc-card list landing with contacts
- [p-mermaid-diagram-1](https://ds.oracul.co/ui/r/p-mermaid-diagram-1.json): Mermaid diagram viewer with zoom and pan (CDN-loaded)
- [p-mind-map-diagram-1](https://ds.oracul.co/ui/r/p-mind-map-diagram-1.json): Mind-map diagram — tidy-tree of boxes with curved links
- [p-onboarding-frame-1](https://ds.oracul.co/ui/r/p-onboarding-frame-1.json): Onboarding chrome — brand, progress dots and step content
- [p-pdf-thumbnail-1](https://ds.oracul.co/ui/r/p-pdf-thumbnail-1.json): PDF thumbnail with hover page-fan and download label
- [p-personalization-landing-1](https://ds.oracul.co/ui/r/p-personalization-landing-1.json): Personalization landing — hero + entry cards for connectors & skills _[empty state]_
- [p-pricing-page-1](https://ds.oracul.co/ui/r/p-pricing-page-1.json): Pricing page — personal and team plans with feature lists
- [p-settings-account-1](https://ds.oracul.co/ui/r/p-settings-account-1.json): Account settings — sign-out / delete / id + active sessions table _[table]_
- [p-settings-billing-1](https://ds.oracul.co/ui/r/p-settings-billing-1.json): Billing settings — plan card, payment, balance, invoices table _[table]_
- [p-settings-capabilities-1](https://ds.oracul.co/ui/r/p-settings-capabilities-1.json): Capabilities settings — feature toggles for chat capabilities _[switch]_
- [p-settings-connectors-1](https://ds.oracul.co/ui/r/p-settings-connectors-1.json): Connectors settings — MCP connector rows, editor and add dialog _[dropdown]_
- [p-settings-page-1](https://ds.oracul.co/ui/r/p-settings-page-1.json): Settings page — profile, theme and legal documents
- [p-settings-skills-1](https://ds.oracul.co/ui/r/p-settings-skills-1.json): Skills settings — custom & system skill groups with enable toggles
- [p-settings-skills-2](https://ds.oracul.co/ui/r/p-settings-skills-2.json): Skills settings — empty state when no skills are added yet _[empty state]_
- [p-settings-usage-1](https://ds.oracul.co/ui/r/p-settings-usage-1.json): Usage settings — usage buckets with progress bars + cycle
- [p-sidebar-1](https://ds.oracul.co/ui/r/p-sidebar-1.json): App sidebar — brand, nav, recent chats and a user footer menu
- [p-stat-1](https://ds.oracul.co/ui/r/p-stat-1.json): KPI stat cards with delta tones and plain variant
- [p-table-6](https://ds.oracul.co/ui/r/p-table-6.json): CardFrame with TanStack Table and checkboxes _[checkbox, table, tanstack]_
- [p-table-7](https://ds.oracul.co/ui/r/p-table-7.json): CardFrame with card-style table _[table]_

### checkbox (13)

- [p-checkbox-1](https://ds.oracul.co/ui/r/p-checkbox-1.json): Basic checkbox
- [p-checkbox-2](https://ds.oracul.co/ui/r/p-checkbox-2.json): Disabled checkbox _[disabled]_
- [p-checkbox-3](https://ds.oracul.co/ui/r/p-checkbox-3.json): Checkbox with description
- [p-checkbox-4](https://ds.oracul.co/ui/r/p-checkbox-4.json): Card-style checkbox
- [p-checkbox-5](https://ds.oracul.co/ui/r/p-checkbox-5.json): Checkbox form _[form]_
- [p-checkbox-group-1](https://ds.oracul.co/ui/r/p-checkbox-group-1.json): Basic checkbox group _[checkbox group]_
- [p-checkbox-group-2](https://ds.oracul.co/ui/r/p-checkbox-group-2.json): Checkbox group with disabled items _[checkbox group, disabled]_
- [p-checkbox-group-3](https://ds.oracul.co/ui/r/p-checkbox-group-3.json): Checkbox group with parent checkbox _[checkbox group]_
- [p-checkbox-group-4](https://ds.oracul.co/ui/r/p-checkbox-group-4.json): Nested checkbox group with parent _[checkbox group]_
- [p-checkbox-group-5](https://ds.oracul.co/ui/r/p-checkbox-group-5.json): Checkbox group form _[checkbox group, form]_
- [p-field-12](https://ds.oracul.co/ui/r/p-field-12.json): Field with checkbox _[field, label]_
- [p-field-13](https://ds.oracul.co/ui/r/p-field-13.json): Field with checkbox group _[checkbox group, field, fieldset, label]_
- [p-table-3](https://ds.oracul.co/ui/r/p-table-3.json): Table with TanStack Table and checkboxes _[table, tanstack]_

### collapsible (2)

- [p-collapsible-1](https://ds.oracul.co/ui/r/p-collapsible-1.json): Basic collapsible
- [p-frame-2](https://ds.oracul.co/ui/r/p-frame-2.json): Frame with collapsible content and delete button _[frame]_

### combobox (20)

- [p-combobox-1](https://ds.oracul.co/ui/r/p-combobox-1.json): Basic combobox _[input]_
- [p-combobox-10](https://ds.oracul.co/ui/r/p-combobox-10.json): Combobox with input inside popup _[input]_
- [p-combobox-11](https://ds.oracul.co/ui/r/p-combobox-11.json): Combobox form _[form, input]_
- [p-combobox-12](https://ds.oracul.co/ui/r/p-combobox-12.json): Combobox multiple form _[form, input]_
- [p-combobox-13](https://ds.oracul.co/ui/r/p-combobox-13.json): Combobox with start addon _[input]_
- [p-combobox-14](https://ds.oracul.co/ui/r/p-combobox-14.json): Combobox multiple with start addon _[input]_
- [p-combobox-15](https://ds.oracul.co/ui/r/p-combobox-15.json): Pill-shaped combobox _[input]_
- [p-combobox-16](https://ds.oracul.co/ui/r/p-combobox-16.json): Timezone combobox _[input, timezone]_
- [p-combobox-17](https://ds.oracul.co/ui/r/p-combobox-17.json): Timezone combobox with search input _[input, timezone]_
- [p-combobox-18](https://ds.oracul.co/ui/r/p-combobox-18.json): Combobox with select trigger _[select]_
- [p-combobox-2](https://ds.oracul.co/ui/r/p-combobox-2.json): Disabled combobox _[input, disabled]_
- [p-combobox-3](https://ds.oracul.co/ui/r/p-combobox-3.json): Small combobox _[input]_
- [p-combobox-4](https://ds.oracul.co/ui/r/p-combobox-4.json): Large combobox _[input]_
- [p-combobox-5](https://ds.oracul.co/ui/r/p-combobox-5.json): Combobox with label _[input]_
- [p-combobox-6](https://ds.oracul.co/ui/r/p-combobox-6.json): Combobox auto highlighting the first option _[input]_
- [p-combobox-7](https://ds.oracul.co/ui/r/p-combobox-7.json): Combobox with clear button _[input]_
- [p-combobox-8](https://ds.oracul.co/ui/r/p-combobox-8.json): Combobox with grouped items _[input]_
- [p-combobox-9](https://ds.oracul.co/ui/r/p-combobox-9.json): Combobox with multiple selection _[input]_
- [p-field-8](https://ds.oracul.co/ui/r/p-field-8.json): Field with combobox _[field, input, label]_
- [p-field-9](https://ds.oracul.co/ui/r/p-field-9.json): Field with multiple selection combobox _[field, input, label]_

### command (2)

- [p-command-1](https://ds.oracul.co/ui/r/p-command-1.json): Command palette with dialog _[dialog]_
- [p-command-2](https://ds.oracul.co/ui/r/p-command-2.json): Command palette with AI assistant _[dialog]_

### dialog (9)

- [p-browse-catalog-dialog-1](https://ds.oracul.co/ui/r/p-browse-catalog-dialog-1.json): Catalog dialog — Навыки/Коннекторы tabs, search, filter/sort, cards _[dropdown]_
- [p-connector-setup-dialog-1](https://ds.oracul.co/ui/r/p-connector-setup-dialog-1.json): Connector install dialog — OAuth flow or token fields
- [p-dialog-1](https://ds.oracul.co/ui/r/p-dialog-1.json): Dialog with form
- [p-dialog-2](https://ds.oracul.co/ui/r/p-dialog-2.json): Dialog opened from menu _[dropdown, menu]_
- [p-dialog-3](https://ds.oracul.co/ui/r/p-dialog-3.json): Nested dialogs
- [p-dialog-5](https://ds.oracul.co/ui/r/p-dialog-5.json): Dialog with long content
- [p-dialog-6](https://ds.oracul.co/ui/r/p-dialog-6.json): Dialog with bare footer
- [p-file-preview-modal-1](https://ds.oracul.co/ui/r/p-file-preview-modal-1.json): File preview modal — image, source text or PDF body
- [p-skill-create-dialog-1](https://ds.oracul.co/ui/r/p-skill-create-dialog-1.json): Skill-create dialog — name, description, instructions + Создать _[form]_

### disabled (1)

- [p-field-3](https://ds.oracul.co/ui/r/p-field-3.json): Field in disabled state _[field, input, label]_

### drawer (14)

- [p-drawer-1](https://ds.oracul.co/ui/r/p-drawer-1.json): Simple bottom drawer with close button
- [p-drawer-10](https://ds.oracul.co/ui/r/p-drawer-10.json): Edit profile form with default and bare footer variants
- [p-drawer-11](https://ds.oracul.co/ui/r/p-drawer-11.json): Mobile menu drawer from the left
- [p-drawer-12](https://ds.oracul.co/ui/r/p-drawer-12.json): Responsive edit profile: dialog on desktop, drawer on mobile _[dialog]_
- [p-drawer-13](https://ds.oracul.co/ui/r/p-drawer-13.json): Responsive actions menu: menu on desktop, drawer on mobile _[menu]_
- [p-drawer-14](https://ds.oracul.co/ui/r/p-drawer-14.json): Left drawer with swipe area
- [p-drawer-2](https://ds.oracul.co/ui/r/p-drawer-2.json): Bottom drawer without drag bar
- [p-drawer-3](https://ds.oracul.co/ui/r/p-drawer-3.json): Drawer with close button
- [p-drawer-4](https://ds.oracul.co/ui/r/p-drawer-4.json): Inset variant drawers for all four positions
- [p-drawer-5](https://ds.oracul.co/ui/r/p-drawer-5.json): Straight variant drawers for all four positions
- [p-drawer-6](https://ds.oracul.co/ui/r/p-drawer-6.json): Scrollable content with terms and conditions
- [p-drawer-7](https://ds.oracul.co/ui/r/p-drawer-7.json): Nested bottom drawers with centered content
- [p-drawer-8](https://ds.oracul.co/ui/r/p-drawer-8.json): Nested right drawers with inset variant
- [p-drawer-9](https://ds.oracul.co/ui/r/p-drawer-9.json): Bottom drawer with snap points

### dropdown (10)

- [p-group-13](https://ds.oracul.co/ui/r/p-group-13.json): Group with menu _[group, menu]_
- [p-menu-1](https://ds.oracul.co/ui/r/p-menu-1.json): Basic menu _[menu]_
- [p-menu-2](https://ds.oracul.co/ui/r/p-menu-2.json): Menu with hover _[menu]_
- [p-menu-3](https://ds.oracul.co/ui/r/p-menu-3.json): Menu with checkbox _[menu]_
- [p-menu-4](https://ds.oracul.co/ui/r/p-menu-4.json): Menu with radio group _[menu]_
- [p-menu-5](https://ds.oracul.co/ui/r/p-menu-5.json): Menu with link _[menu]_
- [p-menu-6](https://ds.oracul.co/ui/r/p-menu-6.json): Menu with group labels _[menu]_
- [p-menu-7](https://ds.oracul.co/ui/r/p-menu-7.json): Nested menu _[menu]_
- [p-menu-8](https://ds.oracul.co/ui/r/p-menu-8.json): Menu close on click _[menu]_
- [p-menu-9](https://ds.oracul.co/ui/r/p-menu-9.json): Menu with checkbox items as switches _[menu, switch]_

### empty state (2)

- [p-empty-1](https://ds.oracul.co/ui/r/p-empty-1.json): Empty state with icon and actions
- [p-not-found-screen-1](https://ds.oracul.co/ui/r/p-not-found-screen-1.json): Not-found (404) screen — brand, heading, message and home button

### error (1)

- [p-field-4](https://ds.oracul.co/ui/r/p-field-4.json): Field showing validation error _[field, input, label]_

### field (11)

- [p-field-1](https://ds.oracul.co/ui/r/p-field-1.json): Field with description _[input, label]_
- [p-field-10](https://ds.oracul.co/ui/r/p-field-10.json): Field with textarea _[label, textarea]_
- [p-field-11](https://ds.oracul.co/ui/r/p-field-11.json): Field with select _[label, select]_
- [p-field-14](https://ds.oracul.co/ui/r/p-field-14.json): Field with radio group _[fieldset, label, radio group]_
- [p-field-15](https://ds.oracul.co/ui/r/p-field-15.json): Field with toggle switch _[label, switch]_
- [p-field-16](https://ds.oracul.co/ui/r/p-field-16.json): Field with slider _[label, slider]_
- [p-field-2](https://ds.oracul.co/ui/r/p-field-2.json): Field with required indicator _[input, label]_
- [p-field-5](https://ds.oracul.co/ui/r/p-field-5.json): Show field validity state _[input]_
- [p-input-18](https://ds.oracul.co/ui/r/p-input-18.json): Input with characters remaining counter _[input]_
- [p-textarea-11](https://ds.oracul.co/ui/r/p-textarea-11.json): Textarea with characters remaining counter _[textarea]_
- [p-textarea-12](https://ds.oracul.co/ui/r/p-textarea-12.json): Textarea field with required indicator _[label, textarea]_

### fieldset (1)

- [p-fieldset-1](https://ds.oracul.co/ui/r/p-fieldset-1.json): Fieldset with multiple fields _[input]_

### form (1)

- [p-auth-surface-1](https://ds.oracul.co/ui/r/p-auth-surface-1.json): Auth page — login / passkey / SSO / magic-link screens & states _[card]_

### frame (4)

- [p-frame-1](https://ds.oracul.co/ui/r/p-frame-1.json): Basic frame
- [p-frame-3](https://ds.oracul.co/ui/r/p-frame-3.json): Frame with multiple separated panels
- [p-frame-4](https://ds.oracul.co/ui/r/p-frame-4.json): Frame with multiple stacked panels
- [p-table-2](https://ds.oracul.co/ui/r/p-table-2.json): Frame with card-style table _[table]_

### group (14)

- [p-group-1](https://ds.oracul.co/ui/r/p-group-1.json): Basic group
- [p-group-10](https://ds.oracul.co/ui/r/p-group-10.json): Nested groups
- [p-group-11](https://ds.oracul.co/ui/r/p-group-11.json): Group with popup
- [p-group-12](https://ds.oracul.co/ui/r/p-group-12.json): Group with input group _[input group]_
- [p-group-15](https://ds.oracul.co/ui/r/p-group-15.json): Group with search _[search]_
- [p-group-17](https://ds.oracul.co/ui/r/p-group-17.json): Group with input and currency text _[input]_
- [p-group-18](https://ds.oracul.co/ui/r/p-group-18.json): Group with select and input _[input, select]_
- [p-group-19](https://ds.oracul.co/ui/r/p-group-19.json): Group with input and select _[input, select]_
- [p-group-2](https://ds.oracul.co/ui/r/p-group-2.json): Group with input _[input]_
- [p-group-3](https://ds.oracul.co/ui/r/p-group-3.json): Small group
- [p-group-4](https://ds.oracul.co/ui/r/p-group-4.json): Large group
- [p-group-7](https://ds.oracul.co/ui/r/p-group-7.json): Group with start text
- [p-group-8](https://ds.oracul.co/ui/r/p-group-8.json): Group with end text
- [p-group-9](https://ds.oracul.co/ui/r/p-group-9.json): Vertical group

### icon (2)

- [p-icon-1](https://ds.oracul.co/ui/r/p-icon-1.json): Tabler icon system: sizes, strokes, filled, decorative & meaningful
- [p-icon-2](https://ds.oracul.co/ui/r/p-icon-2.json): Галерея всех иконок Tabler с поиском и копированием импорта

### input (17)

- [p-input-1](https://ds.oracul.co/ui/r/p-input-1.json): Basic input
- [p-input-11](https://ds.oracul.co/ui/r/p-input-11.json): Input group with keyboard shortcut _[input group, kbd, search]_
- [p-input-12](https://ds.oracul.co/ui/r/p-input-12.json): Input group with start loading spinner _[input group, spinner, loading]_
- [p-input-13](https://ds.oracul.co/ui/r/p-input-13.json): Input with label and required indicator _[label]_
- [p-input-14](https://ds.oracul.co/ui/r/p-input-14.json): Input with optional label _[label]_
- [p-input-15](https://ds.oracul.co/ui/r/p-input-15.json): Input with custom border and background
- [p-input-16](https://ds.oracul.co/ui/r/p-input-16.json): Input group with end loading spinner _[input group, spinner, loading]_
- [p-input-17](https://ds.oracul.co/ui/r/p-input-17.json): Read-only input
- [p-input-19](https://ds.oracul.co/ui/r/p-input-19.json): Pill-shaped input
- [p-input-2](https://ds.oracul.co/ui/r/p-input-2.json): Small input
- [p-input-3](https://ds.oracul.co/ui/r/p-input-3.json): Large input
- [p-input-4](https://ds.oracul.co/ui/r/p-input-4.json): Disabled input
- [p-input-5](https://ds.oracul.co/ui/r/p-input-5.json): File input
- [p-input-6](https://ds.oracul.co/ui/r/p-input-6.json): Input with label _[label]_
- [p-input-group-20](https://ds.oracul.co/ui/r/p-input-group-20.json): Input group with search icon _[input group, search]_
- [p-input-group-24](https://ds.oracul.co/ui/r/p-input-group-24.json): Input group with character counter _[input group]_
- [p-token-parts-input-1](https://ds.oracul.co/ui/r/p-token-parts-input-1.json): Composite-token input — multiple fields joined to one string

### input group (13)

- [p-input-group-1](https://ds.oracul.co/ui/r/p-input-group-1.json): Basic input group
- [p-input-group-11](https://ds.oracul.co/ui/r/p-input-group-11.json): Input group with keyboard shortcut _[kbd]_
- [p-input-group-12](https://ds.oracul.co/ui/r/p-input-group-12.json): Input group with inner label _[label]_
- [p-input-group-13](https://ds.oracul.co/ui/r/p-input-group-13.json): Small input group
- [p-input-group-14](https://ds.oracul.co/ui/r/p-input-group-14.json): Large input group
- [p-input-group-15](https://ds.oracul.co/ui/r/p-input-group-15.json): Disabled input group
- [p-input-group-16](https://ds.oracul.co/ui/r/p-input-group-16.json): Input group with loading spinner _[spinner]_
- [p-input-group-17](https://ds.oracul.co/ui/r/p-input-group-17.json): Input group with textarea _[textarea]_
- [p-input-group-2](https://ds.oracul.co/ui/r/p-input-group-2.json): Input group with end icon
- [p-input-group-3](https://ds.oracul.co/ui/r/p-input-group-3.json): Input group with start text
- [p-input-group-4](https://ds.oracul.co/ui/r/p-input-group-4.json): Input group with end text
- [p-input-group-5](https://ds.oracul.co/ui/r/p-input-group-5.json): Input group with start and end text
- [p-input-group-7](https://ds.oracul.co/ui/r/p-input-group-7.json): Input group with end tooltip _[tooltip]_

### kbd (1)

- [p-kbd-1](https://ds.oracul.co/ui/r/p-kbd-1.json): Keyboard shortcuts display

### label (2)

- [p-textarea-7](https://ds.oracul.co/ui/r/p-textarea-7.json): Textarea with label and required indicator _[textarea]_
- [p-textarea-8](https://ds.oracul.co/ui/r/p-textarea-8.json): Textarea with optional label _[textarea]_

### preview card (1)

- [p-preview-card-1](https://ds.oracul.co/ui/r/p-preview-card-1.json): Preview card with popup

### progress (3)

- [p-progress-1](https://ds.oracul.co/ui/r/p-progress-1.json): Basic progress bar
- [p-progress-2](https://ds.oracul.co/ui/r/p-progress-2.json): Progress with label and value
- [p-progress-3](https://ds.oracul.co/ui/r/p-progress-3.json): Progress with formatted value

### radio group (6)

- [p-radio-group-1](https://ds.oracul.co/ui/r/p-radio-group-1.json): Basic radio group
- [p-radio-group-2](https://ds.oracul.co/ui/r/p-radio-group-2.json): Disabled radio group
- [p-radio-group-3](https://ds.oracul.co/ui/r/p-radio-group-3.json): Radio group with description
- [p-radio-group-4](https://ds.oracul.co/ui/r/p-radio-group-4.json): Radio group card
- [p-radio-group-5](https://ds.oracul.co/ui/r/p-radio-group-5.json): Radio group in form _[form]_
- [p-radio-group-6](https://ds.oracul.co/ui/r/p-radio-group-6.json): Theme selector with image cards _[form]_

### scroll area (5)

- [p-scroll-area-1](https://ds.oracul.co/ui/r/p-scroll-area-1.json): Basic scroll area
- [p-scroll-area-2](https://ds.oracul.co/ui/r/p-scroll-area-2.json): Horizontal scroll area
- [p-scroll-area-3](https://ds.oracul.co/ui/r/p-scroll-area-3.json): Scroll area with both directions
- [p-scroll-area-4](https://ds.oracul.co/ui/r/p-scroll-area-4.json): Scroll area with fading edges
- [p-scroll-area-5](https://ds.oracul.co/ui/r/p-scroll-area-5.json): Horizontal scroll area with scrollbar gutter

### select (23)

- [p-select-1](https://ds.oracul.co/ui/r/p-select-1.json): Basic select
- [p-select-10](https://ds.oracul.co/ui/r/p-select-10.json): Select with object values
- [p-select-11](https://ds.oracul.co/ui/r/p-select-11.json): Select in form
- [p-select-12](https://ds.oracul.co/ui/r/p-select-12.json): Select with disabled items _[disabled]_
- [p-select-13](https://ds.oracul.co/ui/r/p-select-13.json): Timezone select _[time, timezone]_
- [p-select-14](https://ds.oracul.co/ui/r/p-select-14.json): Status select with colored dot
- [p-select-15](https://ds.oracul.co/ui/r/p-select-15.json): Pill-shaped select trigger
- [p-select-16](https://ds.oracul.co/ui/r/p-select-16.json): Select with left text label
- [p-select-17](https://ds.oracul.co/ui/r/p-select-17.json): Select with country flags
- [p-select-18](https://ds.oracul.co/ui/r/p-select-18.json): Select with description in options only
- [p-select-19](https://ds.oracul.co/ui/r/p-select-19.json): Select with avatars _[avatar]_
- [p-select-2](https://ds.oracul.co/ui/r/p-select-2.json): Small select
- [p-select-20](https://ds.oracul.co/ui/r/p-select-20.json): Rich select with avatars and usernames _[avatar]_
- [p-select-21](https://ds.oracul.co/ui/r/p-select-21.json): Auto width select
- [p-select-22](https://ds.oracul.co/ui/r/p-select-22.json): Select with custom border and background
- [p-select-23](https://ds.oracul.co/ui/r/p-select-23.json): Select with label
- [p-select-3](https://ds.oracul.co/ui/r/p-select-3.json): Large select
- [p-select-4](https://ds.oracul.co/ui/r/p-select-4.json): Disabled select
- [p-select-5](https://ds.oracul.co/ui/r/p-select-5.json): Select without item alignment
- [p-select-6](https://ds.oracul.co/ui/r/p-select-6.json): Select with groups
- [p-select-7](https://ds.oracul.co/ui/r/p-select-7.json): Multiple select
- [p-select-8](https://ds.oracul.co/ui/r/p-select-8.json): Select with icon
- [p-select-9](https://ds.oracul.co/ui/r/p-select-9.json): Select options with icon

### separator (1)

- [p-separator-1](https://ds.oracul.co/ui/r/p-separator-1.json): Separator with horizontal and vertical orientations

### sheet (3)

- [p-sheet-1](https://ds.oracul.co/ui/r/p-sheet-1.json): Basic sheet
- [p-sheet-2](https://ds.oracul.co/ui/r/p-sheet-2.json): Sheet inset
- [p-sheet-3](https://ds.oracul.co/ui/r/p-sheet-3.json): Sheet position

### skeleton (10)

- [p-directory-skeleton-1](https://ds.oracul.co/ui/r/p-directory-skeleton-1.json): Skill detail panel loading skeleton
- [p-directory-skeleton-2](https://ds.oracul.co/ui/r/p-directory-skeleton-2.json): Connector detail panel loading skeleton
- [p-directory-skeleton-3](https://ds.oracul.co/ui/r/p-directory-skeleton-3.json): Directory list column loading skeleton — skills and connectors
- [p-directory-skeleton-4](https://ds.oracul.co/ui/r/p-directory-skeleton-4.json): Search results loading skeleton _[search]_
- [p-file-preview-skeleton-1](https://ds.oracul.co/ui/r/p-file-preview-skeleton-1.json): Markdown file-preview loading skeleton
- [p-file-preview-skeleton-2](https://ds.oracul.co/ui/r/p-file-preview-skeleton-2.json): DOCX file-preview loading skeleton
- [p-file-preview-skeleton-3](https://ds.oracul.co/ui/r/p-file-preview-skeleton-3.json): XLSX file-preview loading skeleton
- [p-file-preview-skeleton-4](https://ds.oracul.co/ui/r/p-file-preview-skeleton-4.json): Plain-text file-preview loading skeleton
- [p-skeleton-1](https://ds.oracul.co/ui/r/p-skeleton-1.json): Basic skeleton
- [p-skeleton-2](https://ds.oracul.co/ui/r/p-skeleton-2.json): Skeleton only

### slider (18)

- [p-slider-1](https://ds.oracul.co/ui/r/p-slider-1.json): Basic slider
- [p-slider-10](https://ds.oracul.co/ui/r/p-slider-10.json): Range slider with collision behavior swap
- [p-slider-11](https://ds.oracul.co/ui/r/p-slider-11.json): Slider with icons
- [p-slider-14](https://ds.oracul.co/ui/r/p-slider-14.json): Slider with increment and decrement buttons _[button]_
- [p-slider-15](https://ds.oracul.co/ui/r/p-slider-15.json): Price range slider
- [p-slider-16](https://ds.oracul.co/ui/r/p-slider-16.json): Emoji rating slider
- [p-slider-17](https://ds.oracul.co/ui/r/p-slider-17.json): Vertical slider
- [p-slider-18](https://ds.oracul.co/ui/r/p-slider-18.json): Vertical range slider
- [p-slider-2](https://ds.oracul.co/ui/r/p-slider-2.json): Slider with label and value
- [p-slider-20](https://ds.oracul.co/ui/r/p-slider-20.json): Equalizer with vertical sliders
- [p-slider-23](https://ds.oracul.co/ui/r/p-slider-23.json): Slider in form _[form]_
- [p-slider-3](https://ds.oracul.co/ui/r/p-slider-3.json): Disabled slider _[disabled]_
- [p-slider-4](https://ds.oracul.co/ui/r/p-slider-4.json): Slider with reference labels
- [p-slider-5](https://ds.oracul.co/ui/r/p-slider-5.json): Slider with ticks
- [p-slider-6](https://ds.oracul.co/ui/r/p-slider-6.json): Slider with labels above
- [p-slider-7](https://ds.oracul.co/ui/r/p-slider-7.json): Range slider
- [p-slider-8](https://ds.oracul.co/ui/r/p-slider-8.json): Slider with 3 thumbs
- [p-slider-9](https://ds.oracul.co/ui/r/p-slider-9.json): Range slider with collision behavior none

### spinner (2)

- [p-ring-spinner-1](https://ds.oracul.co/ui/r/p-ring-spinner-1.json): Ring spinner sizes and colors _[loading]_
- [p-spinner-1](https://ds.oracul.co/ui/r/p-spinner-1.json): Basic spinner

### switch (6)

- [p-switch-1](https://ds.oracul.co/ui/r/p-switch-1.json): Basic switch
- [p-switch-2](https://ds.oracul.co/ui/r/p-switch-2.json): Disabled switch
- [p-switch-3](https://ds.oracul.co/ui/r/p-switch-3.json): Switch with description
- [p-switch-4](https://ds.oracul.co/ui/r/p-switch-4.json): Switch card
- [p-switch-5](https://ds.oracul.co/ui/r/p-switch-5.json): Switch in form
- [p-switch-6](https://ds.oracul.co/ui/r/p-switch-6.json): Custom size switch

### table (2)

- [p-table-1](https://ds.oracul.co/ui/r/p-table-1.json): Basic table
- [p-table-5](https://ds.oracul.co/ui/r/p-table-5.json): Card-style table variant

### tabs (13)

- [p-tabs-1](https://ds.oracul.co/ui/r/p-tabs-1.json): Basic tabs
- [p-tabs-10](https://ds.oracul.co/ui/r/p-tabs-10.json): Tabs with count badge _[badge]_
- [p-tabs-11](https://ds.oracul.co/ui/r/p-tabs-11.json): Vertical tabs with underline and icon before name
- [p-tabs-12](https://ds.oracul.co/ui/r/p-tabs-12.json): Tabs with icon only and count badge _[badge]_
- [p-tabs-13](https://ds.oracul.co/ui/r/p-tabs-13.json): Tabs with icon only and grouped tooltips _[tooltip]_
- [p-tabs-2](https://ds.oracul.co/ui/r/p-tabs-2.json): Tabs with underline
- [p-tabs-3](https://ds.oracul.co/ui/r/p-tabs-3.json): Vertical tabs
- [p-tabs-4](https://ds.oracul.co/ui/r/p-tabs-4.json): Vertical tabs with underline
- [p-tabs-5](https://ds.oracul.co/ui/r/p-tabs-5.json): Tabs with full rounded triggers
- [p-tabs-6](https://ds.oracul.co/ui/r/p-tabs-6.json): Tabs with icon before name
- [p-tabs-7](https://ds.oracul.co/ui/r/p-tabs-7.json): Tabs with icon before name and underline
- [p-tabs-8](https://ds.oracul.co/ui/r/p-tabs-8.json): Tabs with icon only
- [p-tabs-9](https://ds.oracul.co/ui/r/p-tabs-9.json): Tabs with underline and icon on top

### textarea (9)

- [p-textarea-1](https://ds.oracul.co/ui/r/p-textarea-1.json): Basic textarea
- [p-textarea-10](https://ds.oracul.co/ui/r/p-textarea-10.json): Read-only textarea
- [p-textarea-13](https://ds.oracul.co/ui/r/p-textarea-13.json): Shorter textarea with fixed height
- [p-textarea-2](https://ds.oracul.co/ui/r/p-textarea-2.json): Small textarea
- [p-textarea-3](https://ds.oracul.co/ui/r/p-textarea-3.json): Large textarea
- [p-textarea-4](https://ds.oracul.co/ui/r/p-textarea-4.json): Disabled textarea
- [p-textarea-5](https://ds.oracul.co/ui/r/p-textarea-5.json): Textarea with label
- [p-textarea-6](https://ds.oracul.co/ui/r/p-textarea-6.json): Textarea in form
- [p-textarea-9](https://ds.oracul.co/ui/r/p-textarea-9.json): Textarea with custom border and background

### toast (13)

- [p-toast-1](https://ds.oracul.co/ui/r/p-toast-1.json): Default stacked toast with title and description
- [p-toast-10](https://ds.oracul.co/ui/r/p-toast-10.json): Deduplicated success toast _[button]_
- [p-toast-11](https://ds.oracul.co/ui/r/p-toast-11.json): Deduplicated error toast _[button, error]_
- [p-toast-12](https://ds.oracul.co/ui/r/p-toast-12.json): Anchored deduplicated success toast _[button]_
- [p-toast-13](https://ds.oracul.co/ui/r/p-toast-13.json): Anchored deduplicated error toast _[button, error]_
- [p-toast-2](https://ds.oracul.co/ui/r/p-toast-2.json): Stacked toasts by semantic type (success, error, info, warning)
- [p-toast-3](https://ds.oracul.co/ui/r/p-toast-3.json): Loading-state stacked toast
- [p-toast-4](https://ds.oracul.co/ui/r/p-toast-4.json): Stacked toast with primary action (undo)
- [p-toast-5](https://ds.oracul.co/ui/r/p-toast-5.json): Promise-based stacked toast
- [p-toast-6](https://ds.oracul.co/ui/r/p-toast-6.json): Stacked toasts with varying content height
- [p-toast-7](https://ds.oracul.co/ui/r/p-toast-7.json): Anchored tooltip-style toast after copy
- [p-toast-8](https://ds.oracul.co/ui/r/p-toast-8.json): Anchored error toast after async failure
- [p-toast-9](https://ds.oracul.co/ui/r/p-toast-9.json): Long-running promise toast with cancel _[button]_

### toggle (8)

- [p-toggle-1](https://ds.oracul.co/ui/r/p-toggle-1.json): Basic toggle
- [p-toggle-2](https://ds.oracul.co/ui/r/p-toggle-2.json): Toggle with outline
- [p-toggle-3](https://ds.oracul.co/ui/r/p-toggle-3.json): Toggle with icon
- [p-toggle-4](https://ds.oracul.co/ui/r/p-toggle-4.json): Small toggle
- [p-toggle-5](https://ds.oracul.co/ui/r/p-toggle-5.json): Large toggle
- [p-toggle-6](https://ds.oracul.co/ui/r/p-toggle-6.json): Disabled toggle
- [p-toggle-7](https://ds.oracul.co/ui/r/p-toggle-7.json): Toggle icon group
- [p-toggle-8](https://ds.oracul.co/ui/r/p-toggle-8.json): Bookmark toggle with tooltip and success toast _[tooltip, toast]_

### tooltip (2)

- [p-tooltip-1](https://ds.oracul.co/ui/r/p-tooltip-1.json): Basic tooltip
- [p-tooltip-4](https://ds.oracul.co/ui/r/p-tooltip-4.json): Vertical group with animated tooltip
<!-- particles:end -->

## Component Quick Reference

Format: `name: imports=[...] variant=[opts] size=[opts]`

accordion: imports=[Accordion,AccordionItem,AccordionTrigger,AccordionPanel]
alert: imports=[Alert,AlertTitle,AlertDescription,AlertAction] variant=[default|error|info|success|warning]
alert-dialog: imports=[AlertDialog,AlertDialogTrigger,AlertDialogBackdrop,AlertDialogPopup,AlertDialogHeader,AlertDialogFooter,AlertDialogTitle,AlertDialogDescription,AlertDialogClose]
autocomplete: imports=[Autocomplete,AutocompleteInput,AutocompletePopup,AutocompleteItem,AutocompleteGroup,AutocompleteGroupLabel,AutocompleteEmpty,AutocompleteClear,AutocompleteStatus]
avatar: imports=[Avatar,AvatarImage,AvatarFallback]
badge: imports=[Badge] size=[default|lg|sm] variant=[default|destructive|error|info|outline|secondary|success|warning]
breadcrumb: imports=[Breadcrumb,BreadcrumbList,BreadcrumbItem,BreadcrumbLink,BreadcrumbPage,BreadcrumbSeparator,BreadcrumbEllipsis]
button: imports=[Button,buttonVariants] size=[xs|sm|default|lg|xl|icon|icon-xs|icon-sm|icon-lg|icon-xl] variant=[default|outline|ghost|secondary|destructive|destructive-outline|link]
calendar: imports=[Calendar]
card: imports=[Card,CardHeader,CardTitle,CardDescription,CardAction,CardPanel,CardFooter]
checkbox: imports=[Checkbox]
checkbox-group: imports=[CheckboxGroup]
collapsible: imports=[Collapsible,CollapsibleTrigger,CollapsiblePanel]
combobox: imports=[Combobox,ComboboxInput,ComboboxTrigger,ComboboxPopup,ComboboxItem,ComboboxGroup,ComboboxEmpty,ComboboxChips,ComboboxChip,ComboboxChipRemove]
command: imports=[Command,CommandDialog,CommandInput,CommandList,CommandEmpty,CommandGroup,CommandItem,CommandSeparator,CommandShortcut,CommandFooter]
dialog: imports=[Dialog,DialogTrigger,DialogClose,DialogBackdrop,DialogPopup,DialogHeader,DialogFooter,DialogTitle,DialogDescription,DialogPanel]
drawer: imports=[Drawer,DrawerTrigger,DrawerClose,DrawerBackdrop,DrawerPopup,DrawerHeader,DrawerFooter,DrawerTitle,DrawerDescription,DrawerPanel]
empty: imports=[Empty,EmptyHeader,EmptyMedia,EmptyTitle,EmptyDescription,EmptyContent] variant=[default|icon]
field: imports=[Field,FieldLabel,FieldItem,FieldDescription,FieldError,FieldControl]
fieldset: imports=[Fieldset,FieldsetLegend]
form: imports=[Form]
frame: imports=[Frame,FramePanel,FrameHeader,FrameTitle,FrameDescription,FrameFooter]
group: imports=[Group,GroupText,GroupSeparator] orientation=[horizontal|vertical]
input: imports=[Input]
input-group: imports=[InputGroup,InputGroupAddon,InputGroupText,InputGroupInput,InputGroupTextarea] align=[block-start|block-end|inline-start|inline-end]
kbd: imports=[Kbd,KbdGroup]
label: imports=[Label]
menu: imports=[Menu,MenuTrigger,MenuPopup,MenuGroup,MenuItem,MenuCheckboxItem,MenuRadioGroup,MenuRadioItem,MenuSeparator,MenuShortcut,MenuSub,MenuSubTrigger,MenuSubPopup]
meter: imports=[Meter,MeterLabel,MeterTrack,MeterIndicator,MeterValue]
number-field: imports=[NumberField,NumberFieldGroup,NumberFieldDecrement,NumberFieldIncrement,NumberFieldInput]
otp-field: imports=[OTPField,OTPFieldInput,OTPFieldSeparator]
pagination: imports=[Pagination,PaginationContent,PaginationItem,PaginationLink,PaginationPrevious,PaginationNext,PaginationEllipsis]
popover: imports=[Popover,PopoverTrigger,PopoverPopup,PopoverClose,PopoverTitle,PopoverDescription]
preview-card: imports=[PreviewCard,PreviewCardTrigger,PreviewCardPopup]
progress: imports=[Progress,ProgressLabel,ProgressTrack,ProgressIndicator,ProgressValue]
radio-group: imports=[RadioGroup,Radio]
scroll-area: imports=[ScrollArea,ScrollBar]
select: imports=[Select,SelectButton,SelectTrigger,SelectValue,SelectPopup,SelectItem,SelectSeparator,SelectGroup,SelectGroupLabel] size=[sm|default|lg]
separator: imports=[Separator]
sheet: imports=[Sheet,SheetTrigger,SheetClose,SheetBackdrop,SheetPopup,SheetHeader,SheetFooter,SheetTitle,SheetDescription,SheetPanel]
sidebar: imports=[SidebarProvider,Sidebar,SidebarTrigger,SidebarInset,SidebarHeader,SidebarFooter,SidebarContent,SidebarGroup,SidebarMenu,SidebarMenuItem,SidebarMenuButton,SidebarMenuSub,SidebarMenuSubItem,SidebarMenuSubButton]
skeleton: imports=[Skeleton]
slider: imports=[Slider,SliderValue]
spinner: imports=[Spinner]
switch: imports=[Switch]
table: imports=[Table,TableHeader,TableBody,TableFooter,TableRow,TableHead,TableCell,TableCaption]
tabs: imports=[Tabs,TabsList,TabsTab,TabsPanel]
textarea: imports=[Textarea]
toast: imports=[ToastProvider,AnchoredToastProvider]
toggle: imports=[Toggle] size=[sm|default|lg] variant=[default|outline]
toggle-group: imports=[ToggleGroup,ToggleGroupItem,ToggleGroupSeparator]
toolbar: imports=[Toolbar,ToolbarButton,ToolbarLink,ToolbarInput,ToolbarGroup,ToolbarSeparator]
tooltip: imports=[TooltipProvider,Tooltip,TooltipTrigger,TooltipPopup]