# Cuelark UI > Open-source React components for shadcn/ui: an AI agent UI kit (chat, reasoning, tool calls, plans, citations, traces), GSAP-animated effects and accessible Radix primitives. Themeable with CSS variables, installed as source with the shadcn CLI. Install any component with the shadcn CLI, e.g. `npx shadcn@latest add https://ui.cuelark.com/r/button.json`. Components depend on the `theme` item (https://ui.cuelark.com/r/theme.json), which the CLI installs automatically. The full index is https://ui.cuelark.com/r/registry.json. ## Docs - [Introduction](https://ui.cuelark.com/docs): What Cuelark UI is, how it relates to shadcn/ui, and the ideas behind its style. - [Installation](https://ui.cuelark.com/docs/installation): Add Cuelark UI components to any shadcn/ui project with the shadcn CLI, by URL or by the @cuelark namespace. - [Theming](https://ui.cuelark.com/docs/theming): Customize accent, radius, density and crop marks with CSS variables, and generate a theme with the live editor. ## Components - [Accordion](https://ui.cuelark.com/components/accordion): Stacked disclosure sections with numbered, dashed and separated styles. Registry item: https://ui.cuelark.com/r/accordion.json - [Alert](https://ui.cuelark.com/components/alert): Callouts with a colored rail, tone icons and fold-away dismiss. Registry item: https://ui.cuelark.com/r/alert.json - [Alert Dialog](https://ui.cuelark.com/components/alert-dialog): Confirmation dialogs for destructive or irreversible actions. Registry item: https://ui.cuelark.com/r/alert-dialog.json - [Animated Icon](https://ui.cuelark.com/components/animated-icon): Any icon, animated with a motion that fits it: bells ring, arrows nudge, gears turn. Registry item: https://ui.cuelark.com/r/animated-icon.json - [Animated List](https://ui.cuelark.com/components/animated-list): A live feed where items arrive and push the rest down. Registry item: https://ui.cuelark.com/r/animated-list.json - [Artifact](https://ui.cuelark.com/components/artifact): Something the agent made, in its own panel with actions. Registry item: https://ui.cuelark.com/r/artifact.json - [Aspect Ratio](https://ui.cuelark.com/components/aspect-ratio): Keep media at a fixed ratio so layout never shifts. Registry item: https://ui.cuelark.com/r/aspect-ratio.json - [Avatar](https://ui.cuelark.com/components/avatar): Avatars with tinted initials, presence dots and fanning groups. Registry item: https://ui.cuelark.com/r/avatar.json - [Badge](https://ui.cuelark.com/components/badge): Compact status and category labels with status dots and a mono style. Registry item: https://ui.cuelark.com/r/badge.json - [Border Beam](https://ui.cuelark.com/components/border-beam): A light that travels around a card's border. Registry item: https://ui.cuelark.com/r/border-beam.json - [Branch](https://ui.cuelark.com/components/branch): Flip between regenerated versions of a reply. Registry item: https://ui.cuelark.com/r/branch.json - [Breadcrumb](https://ui.cuelark.com/components/breadcrumb): Breadcrumb trails with mono slash separators and an ellipsis. Registry item: https://ui.cuelark.com/r/breadcrumb.json - [Burst](https://ui.cuelark.com/components/burst): Confetti that sprays from any button on click. Registry item: https://ui.cuelark.com/r/burst.json - [Button](https://ui.cuelark.com/components/button): Tactile buttons with loading state, keyboard hints and six variants. Registry item: https://ui.cuelark.com/r/button.json - [Button Group](https://ui.cuelark.com/components/button-group): Join buttons into one control: split buttons, toolbars, steppers. Registry item: https://ui.cuelark.com/r/button-group.json - [Card](https://ui.cuelark.com/components/card): Surfaces with crop marks, raised and inset styles, and a divided footer tray. Registry item: https://ui.cuelark.com/r/card.json - [Chain of Thought](https://ui.cuelark.com/components/chain-of-thought): The steps an agent took, on a rail with live status. Registry item: https://ui.cuelark.com/r/chain-of-thought.json - [Checkbox](https://ui.cuelark.com/components/checkbox): Checkboxes with a self-drawing check mark and an indeterminate state. Registry item: https://ui.cuelark.com/r/checkbox.json - [Checkpoint](https://ui.cuelark.com/components/checkpoint): A restore point in a conversation. Registry item: https://ui.cuelark.com/r/checkpoint.json - [Code Block](https://ui.cuelark.com/components/code-block): Code in a reply: filename, line numbers, highlights, wrap and copy. Registry item: https://ui.cuelark.com/r/code-block.json - [Collapsible](https://ui.cuelark.com/components/collapsible): Show and hide a region with a measured height animation. Registry item: https://ui.cuelark.com/r/collapsible.json - [Combobox](https://ui.cuelark.com/components/combobox): Searchable select with fuzzy filtering and a gliding highlight. Registry item: https://ui.cuelark.com/r/combobox.json - [Command](https://ui.cuelark.com/components/command): ⌘K command palette with fuzzy search and a gliding highlight. Registry item: https://ui.cuelark.com/r/command.json - [Compare Slider](https://ui.cuelark.com/components/compare-slider): Before/after comparison slider for images, themes and redesigns. Registry item: https://ui.cuelark.com/r/compare-slider.json - [Confirmation](https://ui.cuelark.com/components/confirmation): An agent asking permission, with press-and-hold for risky actions. Registry item: https://ui.cuelark.com/r/confirmation.json - [Context Menu](https://ui.cuelark.com/components/context-menu): Right-click menus that spring out from the pointer. Registry item: https://ui.cuelark.com/r/context-menu.json - [Context Meter](https://ui.cuelark.com/components/context-meter): How full the context window is, with tokens and cost on hover. Registry item: https://ui.cuelark.com/r/context-meter.json - [Conversation](https://ui.cuelark.com/components/conversation): A transcript that sticks to the bottom while streaming and lets go when you scroll. Registry item: https://ui.cuelark.com/r/conversation.json - [Cookie Consent](https://ui.cuelark.com/components/cookie-consent): GDPR-friendly cookie banner with equal choices and per-category toggles. Registry item: https://ui.cuelark.com/r/cookie-consent.json - [Copy Button](https://ui.cuelark.com/components/copy-button): Copy-to-clipboard button whose icon twists into a check. Registry item: https://ui.cuelark.com/r/copy-button.json - [Countdown](https://ui.cuelark.com/components/countdown): Launch and sale countdown timer with flipping digits. Registry item: https://ui.cuelark.com/r/countdown.json - [Dialog](https://ui.cuelark.com/components/dialog): Modal dialogs with crop marks, an Esc hint and a footer tray. Registry item: https://ui.cuelark.com/r/dialog.json - [Dock](https://ui.cuelark.com/components/dock): macOS-style dock with magnifying icons and labels. Registry item: https://ui.cuelark.com/r/dock.json - [Dot Field](https://ui.cuelark.com/components/dot-field): An interactive dot-grid background that reacts to the cursor. Registry item: https://ui.cuelark.com/r/dot-field.json - [Draw Path](https://ui.cuelark.com/components/draw-path): Draws SVG strokes as if by hand: signatures, underlines, diagrams. Registry item: https://ui.cuelark.com/r/draw-path.json - [Dropdown Menu](https://ui.cuelark.com/components/dropdown-menu): Action menus with keycap shortcuts, submenus and checkable items. Registry item: https://ui.cuelark.com/r/dropdown-menu.json - [Empty](https://ui.cuelark.com/components/empty): Empty states with a framed icon, guidance and actions. Registry item: https://ui.cuelark.com/r/empty.json - [Field](https://ui.cuelark.com/components/field): Label, control, description and error wired with the right aria. Registry item: https://ui.cuelark.com/r/field.json - [File Diff](https://ui.cuelark.com/components/file-diff): A change an agent proposes to a file, with accept and reject. Registry item: https://ui.cuelark.com/r/file-diff.json - [File Dropzone](https://ui.cuelark.com/components/file-dropzone): Drag-and-drop file upload with size checks and a file list. Registry item: https://ui.cuelark.com/r/file-dropzone.json - [File Tree](https://ui.cuelark.com/components/file-tree): The files an agent touched, with added, modified and deleted marks. Registry item: https://ui.cuelark.com/r/file-tree.json - [Flip Grid](https://ui.cuelark.com/components/flip-grid): A grid whose items glide to new places when filtered or sorted. Registry item: https://ui.cuelark.com/r/flip-grid.json - [Gradient Text](https://ui.cuelark.com/components/gradient-text): Text with a living highlight: a drifting shimmer or a pointer spotlight. Registry item: https://ui.cuelark.com/r/gradient-text.json - [Hold to Confirm](https://ui.cuelark.com/components/hold-to-confirm): Press-and-hold button for destructive actions, with a timed fill. Registry item: https://ui.cuelark.com/r/hold-to-confirm.json - [Hover Card](https://ui.cuelark.com/components/hover-card): Preview cards for links and mentions, opened on hover. Registry item: https://ui.cuelark.com/r/hover-card.json - [Inline Citation](https://ui.cuelark.com/components/inline-citation): Numbered citations inside a sentence, with a preview on hover. Registry item: https://ui.cuelark.com/r/inline-citation.json - [Input](https://ui.cuelark.com/components/input): Recessed text inputs with leading and trailing add-ons. Registry item: https://ui.cuelark.com/r/input.json - [Input OTP](https://ui.cuelark.com/components/input-otp): One-time-code input with slots that spring as digits land. Registry item: https://ui.cuelark.com/r/input-otp.json - [Item](https://ui.cuelark.com/components/item): A flexible row: media, title, description and actions. Registry item: https://ui.cuelark.com/r/item.json - [Kbd](https://ui.cuelark.com/components/kbd): Keycaps and key combinations. Registry item: https://ui.cuelark.com/r/kbd.json - [Label](https://ui.cuelark.com/components/label): Accessible form labels with required and optional markers. Registry item: https://ui.cuelark.com/r/label.json - [Magnetic](https://ui.cuelark.com/components/magnetic): Magnetic hover: elements lean toward the cursor and spring back. Registry item: https://ui.cuelark.com/r/magnetic.json - [Marquee](https://ui.cuelark.com/components/marquee): Seamless infinite scrolling loop that eases to a stop on hover. Registry item: https://ui.cuelark.com/r/marquee.json - [Message](https://ui.cuelark.com/components/message): One conversation turn: user bubble or assistant document, with hover actions. Registry item: https://ui.cuelark.com/r/message.json - [Model Selector](https://ui.cuelark.com/components/model-selector): Pick the model: grouped by provider, searchable, with context and tags. Registry item: https://ui.cuelark.com/r/model-selector.json - [Native Select](https://ui.cuelark.com/components/native-select): A styled native select: platform pickers, autofill, zero JavaScript. Registry item: https://ui.cuelark.com/r/native-select.json - [Number Field](https://ui.cuelark.com/components/number-field): Numeric stepper with hold-to-repeat, keyboard steps and locale formatting. Registry item: https://ui.cuelark.com/r/number-field.json - [Number Ticker](https://ui.cuelark.com/components/number-ticker): Odometer-style animated counter with Intl formatting. Registry item: https://ui.cuelark.com/r/number-ticker.json - [Orbit](https://ui.cuelark.com/components/orbit): Icons orbiting a center on dashed tracks. Registry item: https://ui.cuelark.com/r/orbit.json - [Pagination](https://ui.cuelark.com/components/pagination): Crawlable pagination links with a page-range helper. Registry item: https://ui.cuelark.com/r/pagination.json - [Password Input](https://ui.cuelark.com/components/password-input): Password field with show/hide and a live strength meter. Registry item: https://ui.cuelark.com/r/password-input.json - [Plan](https://ui.cuelark.com/components/plan): A plan an agent asks to run, with approve, reject and auto-run countdown. Registry item: https://ui.cuelark.com/r/plan.json - [Popover](https://ui.cuelark.com/components/popover): Anchored panels that spring open, with optional crop marks. Registry item: https://ui.cuelark.com/r/popover.json - [Progress](https://ui.cuelark.com/components/progress): Progress bars: eased, segmented and indeterminate. Registry item: https://ui.cuelark.com/r/progress.json - [Prompt Input](https://ui.cuelark.com/components/prompt-input): The composer for prompting an agent: autosize, attachments, model picker, stop. Registry item: https://ui.cuelark.com/r/prompt-input.json - [Queue](https://ui.cuelark.com/components/queue): Messages queued while the agent is busy, reorderable. Registry item: https://ui.cuelark.com/r/queue.json - [Radio Group](https://ui.cuelark.com/components/radio-group): Radio buttons and selectable cards with springing dots and crop marks. Registry item: https://ui.cuelark.com/r/radio-group.json - [Rating](https://ui.cuelark.com/components/rating): Star rating input with hover preview and a pop cascade. Registry item: https://ui.cuelark.com/r/rating.json - [Reasoning](https://ui.cuelark.com/components/reasoning): A model's thinking, streamed live, then folded to "Thought for 6s". Registry item: https://ui.cuelark.com/r/reasoning.json - [Reveal](https://ui.cuelark.com/components/reveal): Scroll-triggered reveals that never flash above the fold. Registry item: https://ui.cuelark.com/r/reveal.json - [Rotating Text](https://ui.cuelark.com/components/rotating-text): Cycling words that roll letter by letter, with width easing. Registry item: https://ui.cuelark.com/r/rotating-text.json - [Scramble Text](https://ui.cuelark.com/components/scramble-text): Decoding text effect with GSAP ScrambleText. Registry item: https://ui.cuelark.com/r/scramble-text.json - [Scroll Area](https://ui.cuelark.com/components/scroll-area): Thin custom scrollbars with edge fades. Registry item: https://ui.cuelark.com/r/scroll-area.json - [Scroll Progress](https://ui.cuelark.com/components/scroll-progress): Reading progress bar scrubbed to scroll. Registry item: https://ui.cuelark.com/r/scroll-progress.json - [Select](https://ui.cuelark.com/components/select): Dropdown select with grouped options and a cascading open. Registry item: https://ui.cuelark.com/r/select.json - [Separator](https://ui.cuelark.com/components/separator): Solid and dashed rules, with an optional label. Registry item: https://ui.cuelark.com/r/separator.json - [Sheet](https://ui.cuelark.com/components/sheet): Side panels and drawers that slide in, with a footer tray. Registry item: https://ui.cuelark.com/r/sheet.json - [Shimmer Button](https://ui.cuelark.com/components/shimmer-button): A pill CTA whose surface catches a sweeping band of light. Registry item: https://ui.cuelark.com/r/shimmer-button.json - [Skeleton](https://ui.cuelark.com/components/skeleton): Loading placeholders with a slow light sweep. Registry item: https://ui.cuelark.com/r/skeleton.json - [Slider](https://ui.cuelark.com/components/slider): Range sliders with value bubbles, ticks and multiple thumbs. Registry item: https://ui.cuelark.com/r/slider.json - [Sources](https://ui.cuelark.com/components/sources): "Used N sources" with stacked tiles, expanding into the list. Registry item: https://ui.cuelark.com/r/sources.json - [Spinner](https://ui.cuelark.com/components/spinner): Loaders, including the signature crop-mark spinner. Registry item: https://ui.cuelark.com/r/spinner.json - [Stack Trace](https://ui.cuelark.com/components/stack-trace): Readable errors: your frames highlighted, library frames folded. Registry item: https://ui.cuelark.com/r/stack-trace.json - [Stepper](https://ui.cuelark.com/components/stepper): Multi-step progress with an ink-filling connector. Registry item: https://ui.cuelark.com/r/stepper.json - [Streaming Text](https://ui.cuelark.com/components/streaming-text): A reply arriving token by token, without the jitter. Registry item: https://ui.cuelark.com/r/streaming-text.json - [Subagent](https://ui.cuelark.com/components/subagent): Work delegated to a sub-agent, nested with its live activity. Registry item: https://ui.cuelark.com/r/subagent.json - [Suggestions](https://ui.cuelark.com/components/suggestions): Follow-up prompt chips that scroll sideways on small screens. Registry item: https://ui.cuelark.com/r/suggestions.json - [Switch](https://ui.cuelark.com/components/switch): Toggle switches in three sizes with a stretch-on-press thumb. Registry item: https://ui.cuelark.com/r/switch.json - [Table](https://ui.cuelark.com/components/table): Semantic tables with mono numerals, zebra rows and a sticky header. Registry item: https://ui.cuelark.com/r/table.json - [Tabs](https://ui.cuelark.com/components/tabs): Segmented and underline tabs with a gliding active indicator. Registry item: https://ui.cuelark.com/r/tabs.json - [Tag Input](https://ui.cuelark.com/components/tag-input): Type tags into one field, with suggestions, paste and keyboard removal. Registry item: https://ui.cuelark.com/r/tag-input.json - [Task](https://ui.cuelark.com/components/task): A to-do list the agent works through, with progress. Registry item: https://ui.cuelark.com/r/task.json - [Terminal](https://ui.cuelark.com/components/terminal): Streaming command output in a dark console. Registry item: https://ui.cuelark.com/r/terminal.json - [Test Results](https://ui.cuelark.com/components/test-results): Pass/fail summary with failing assertions inline. Registry item: https://ui.cuelark.com/r/test-results.json - [Text Reveal](https://ui.cuelark.com/components/text-reveal): GSAP SplitText reveals by character, word or line. Registry item: https://ui.cuelark.com/r/text-reveal.json - [Text Shimmer](https://ui.cuelark.com/components/text-shimmer): A light sweeping through muted text: the "working" status. Registry item: https://ui.cuelark.com/r/text-shimmer.json - [Textarea](https://ui.cuelark.com/components/textarea): Multi-line input that auto-grows, with a live character counter. Registry item: https://ui.cuelark.com/r/textarea.json - [Tilt Card](https://ui.cuelark.com/components/tilt-card): A 3D card that tilts toward the pointer with a moving glare. Registry item: https://ui.cuelark.com/r/tilt-card.json - [Timeline](https://ui.cuelark.com/components/timeline): Timelines whose rail draws itself as you scroll. Registry item: https://ui.cuelark.com/r/timeline.json - [Toast](https://ui.cuelark.com/components/toast): Toast notifications with a pausable countdown and promise states. Registry item: https://ui.cuelark.com/r/toast.json - [Toggle](https://ui.cuelark.com/components/toggle): Two-state buttons that sink in when on and ping on press. Registry item: https://ui.cuelark.com/r/toggle.json - [Toggle Group](https://ui.cuelark.com/components/toggle-group): Segmented controls with a gliding chip, plus outline and ghost groups. Registry item: https://ui.cuelark.com/r/toggle-group.json - [Tool](https://ui.cuelark.com/components/tool): A tool call: name, live status, timing, parameters and result. Registry item: https://ui.cuelark.com/r/tool.json - [Tooltip](https://ui.cuelark.com/components/tooltip): Inverted tooltips with keyboard shortcut hints and arrows. Registry item: https://ui.cuelark.com/r/tooltip.json - [Trace Waterfall](https://ui.cuelark.com/components/trace-waterfall): An agent run on one timeline: agents, model calls and tools. Registry item: https://ui.cuelark.com/r/trace-waterfall.json - [Typewriter](https://ui.cuelark.com/components/typewriter): Text that types itself out, cycling through phrases. Registry item: https://ui.cuelark.com/r/typewriter.json - [Web Preview](https://ui.cuelark.com/components/web-preview): A small browser for what the agent built, with device widths. Registry item: https://ui.cuelark.com/r/web-preview.json ## Optional - [Full text for LLMs](https://ui.cuelark.com/llms-full.txt): every component's description, usage, props and accessibility notes in one file. - [Source code](https://github.com/cuelark/ui): MIT licensed.