sh4dcnv2 · atlas
← libraries

@kobra

Polished components for teams building exceptional products and experiences.

90 components pro available react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://kobra.systems/r/registry.json
pnpm pnpm dlx shadcn@latest add https://kobra.systems/r/registry.json
bun bunx shadcn@latest add https://kobra.systems/r/registry.json
fetch registry curl -s https://kobra.systems/r/registry.json

Components

90 total
Accordion ui

Vertically stacked disclosure sections.

npx shadcn@latest add https://kobra.systems/r/accordion.json
Advertisement ui

A sponsor slot that turns through its ads on a line that fills.

npx shadcn@latest add https://kobra.systems/r/advertisement.json
AI Editor ui

A document an agent edits alongside you.

npx shadcn@latest add https://kobra.systems/r/ai-editor.json
Alert ui

A callout for important contextual information.

npx shadcn@latest add https://kobra.systems/r/alert.json
Aspect Ratio ui

Keeps content within a fixed ratio.

npx shadcn@latest add https://kobra.systems/r/aspect-ratio.json
Avatar ui

An image or fallback representing a person.

npx shadcn@latest add https://kobra.systems/r/avatar.json
Badge ui

A compact status or category label.

npx shadcn@latest add https://kobra.systems/r/badge.json
Breadcrumb ui

A hierarchical navigation trail.

npx shadcn@latest add https://kobra.systems/r/breadcrumb.json
Button ui

A control that triggers an action.

npx shadcn@latest add https://kobra.systems/r/button.json
Calendar ui

A date selection calendar.

npx shadcn@latest add https://kobra.systems/r/calendar.json
Card ui

A surface grouping related content.

npx shadcn@latest add https://kobra.systems/r/card.json
Halftone Dots ui

An image rebuilt as a field of dots that morph between pictures.

npx shadcn@latest add https://kobra.systems/r/halftone-dots.json
Logo Carousel ui

A wall of logos, shown a few at a time.

npx shadcn@latest add https://kobra.systems/r/logo-carousel.json
Carousel ui

A horizontally navigable content collection, built on Embla.

npx shadcn@latest add https://kobra.systems/r/carousel.json
Chart ui

Composable data visualizations, from Evil Charts.

npx shadcn@latest add https://kobra.systems/r/chart.json
Checkbox ui

A binary or indeterminate selection control.

npx shadcn@latest add https://kobra.systems/r/checkbox.json
Collapsible ui

An expandable content region.

npx shadcn@latest add https://kobra.systems/r/collapsible.json
Color Palette ui

A wheel of nineteen swatches, hue around and saturation inward.

npx shadcn@latest add https://kobra.systems/r/color-palette.json
Color Picker ui

A gradient and solid picker, with draggable stops and a hex field.

npx shadcn@latest add https://kobra.systems/r/color-picker.json
Icon Picker ui

An icon and its color, picked together.

npx shadcn@latest add https://kobra.systems/r/icon-picker.json
Combobox ui

A searchable option picker.

npx shadcn@latest add https://kobra.systems/r/combobox.json
Multi Select ui

Several values picked from one list, as chips.

npx shadcn@latest add https://kobra.systems/r/multi-select.json
Command Menu ui

A fast, nested command menu powered by kmenu.

npx shadcn@latest add https://kobra.systems/r/command-menu.json
Context Menu ui

Actions opened from a secondary click.

npx shadcn@latest add https://kobra.systems/r/context-menu.json
Dialog ui

A modal window over the current page, and the alert dialog that confirms.

npx shadcn@latest add https://kobra.systems/r/dialog.json
Drawer ui

A panel that slides from an edge, built on Vaul.

npx shadcn@latest add https://kobra.systems/r/drawer.json
Dropdown Menu ui

A menu opened from a trigger.

npx shadcn@latest add https://kobra.systems/r/dropdown-menu.json
Empty ui

An empty-state layout with guidance.

npx shadcn@latest add https://kobra.systems/r/empty.json
Form ui

Validated form composition.

npx shadcn@latest add https://kobra.systems/r/form.json
Hover Card ui

Rich content revealed on hover.

npx shadcn@latest add https://kobra.systems/r/hover-card.json
Lightbox ui

Photos in justified rows that open with a ripple zoom.

npx shadcn@latest add https://kobra.systems/r/lightbox.json
Input ui

A text input with its label, description and attached controls.

npx shadcn@latest add https://kobra.systems/r/input.json
Input OTP ui

A segmented one-time-code input, built on input-otp.

npx shadcn@latest add https://kobra.systems/r/input-otp.json
Input Dissolve ui

A field that carries its value away once it is spent.

npx shadcn@latest add https://kobra.systems/r/input-dissolve.json
Item ui

A flexible row for lists and settings.

npx shadcn@latest add https://kobra.systems/r/item.json
Menubar ui

A persistent horizontal application menu.

npx shadcn@latest add https://kobra.systems/r/menubar.json
Navigation Menu ui

A collection of navigation links.

npx shadcn@latest add https://kobra.systems/r/navigation-menu.json
Pagination ui

Controls for moving through pages.

npx shadcn@latest add https://kobra.systems/r/pagination.json
Popover ui

Floating content anchored to a trigger.

npx shadcn@latest add https://kobra.systems/r/popover.json
Progress ui

The completion state of a task.

npx shadcn@latest add https://kobra.systems/r/progress.json
QR Code ui

A scannable code in dots that ripples each time what it encodes changes.

npx shadcn@latest add https://kobra.systems/r/qr-code.json
Radio Group ui

A single choice from several options.

npx shadcn@latest add https://kobra.systems/r/radio-group.json
Resizable ui

Panels separated by a draggable handle.

npx shadcn@latest add https://kobra.systems/r/resizable.json
Scroll Area ui

A custom cross-browser scroll container.

npx shadcn@latest add https://kobra.systems/r/scroll-area.json
Select ui

An option picker, as a styled menu or the native control.

npx shadcn@latest add https://kobra.systems/r/select.json
Separator ui

A visual divider between content.

npx shadcn@latest add https://kobra.systems/r/separator.json
Sheet ui

A dialog that enters from an edge.

npx shadcn@latest add https://kobra.systems/r/sheet.json
Sidebar ui

A composable application sidebar.

npx shadcn@latest add https://kobra.systems/r/sidebar.json
Skeleton ui

A placeholder shown while content loads.

npx shadcn@latest add https://kobra.systems/r/skeleton.json
Slider ui

A value selected along a range, with a liquid handle from Gooey.

npx shadcn@latest add https://kobra.systems/r/slider.json
Sound ui

The cue every control answers a press with, built on Web Kits Audio.

npx shadcn@latest add https://kobra.systems/r/sound.json
Toast ui

Stacked status notifications with progress, actions and descriptions.

npx shadcn@latest add https://kobra.systems/r/toast.json
Spinner ui

An indeterminate loading indicator.

npx shadcn@latest add https://kobra.systems/r/spinner.json
Switch ui

A control for toggling a setting.

npx shadcn@latest add https://kobra.systems/r/switch.json
Table ui

Rows and columns of structured data.

npx shadcn@latest add https://kobra.systems/r/table.json
CRM Table ui

Accounts with owners, pipeline and win odds, in resizable columns.

npx shadcn@latest add https://kobra.systems/r/crm-table.json
Grouped Table ui

Issues grouped by status, in a table whose columns glide into each row as you narrow it.

npx shadcn@latest add https://kobra.systems/r/grouped-table.json
Tabs ui

Layered content selected by tab.

npx shadcn@latest add https://kobra.systems/r/tabs.json
Textarea ui

A multiline text input.

npx shadcn@latest add https://kobra.systems/r/textarea.json
Toggle Group ui

A two-state control, alone or conjoined into a bar.

npx shadcn@latest add https://kobra.systems/r/toggle-group.json
Filter Chips ui

Filter chips that join into one track as neighbors are chosen, after Spotify’s library.

npx shadcn@latest add https://kobra.systems/r/filter-chips.json
Tooltip ui

A concise label shown on hover or focus.

npx shadcn@latest add https://kobra.systems/r/tooltip.json
Kbd ui

Keyboard input and shortcut hints.

npx shadcn@latest add https://kobra.systems/r/kbd.json
Direction ui

Turns every component right to left, for Arabic and other RTL scripts.

npx shadcn@latest add https://kobra.systems/r/direction.json
Attachment ui

A compact file attachment presentation.

npx shadcn@latest add https://kobra.systems/r/attachment.json
Magnetic Dropzone ui

A drop target that leans toward the file you are carrying.

npx shadcn@latest add https://kobra.systems/r/magnetic-dropzone.json
Conversation ui

Messages from both sides of a chat.

npx shadcn@latest add https://kobra.systems/r/conversation.json
Marker ui

A labeled point or status marker.

npx shadcn@latest add https://kobra.systems/r/marker.json
Message ui

A structured conversation message.

npx shadcn@latest add https://kobra.systems/r/message.json
Message Scroller ui

Conversation scrolling with edge controls.

npx shadcn@latest add https://kobra.systems/r/message-scroller.json
Video ui

A video player built on Loomix, with liquid glass or blurred controls.

npx shadcn@latest add https://kobra.systems/r/video.json
Reasoning Steps ui

A model working before it answers.

npx shadcn@latest add https://kobra.systems/r/reasoning-steps.json
Chat History ui

A chat whose button gathers everything you asked into one column over the blurred transcript.

npx shadcn@latest add https://kobra.systems/r/chat-history.json
Document Agent ui

An agent’s draft beside its chat, each claim chipped with its source.

npx shadcn@latest add https://kobra.systems/r/document-agent.json
Trace Waterfall ui

A live trace of an agent run, its spans unfolding on one timeline.

npx shadcn@latest add https://kobra.systems/r/trace-waterfall.json
File Diff ui

Changes an agent proposes to a file.

npx shadcn@latest add https://kobra.systems/r/file-diff.json
Image Generation ui

A canvas forming while an image is generated.

npx shadcn@latest add https://kobra.systems/r/image-generation.json
Streaming Text ui

A reply arriving a token at a time.

npx shadcn@latest add https://kobra.systems/r/streaming-text.json
Inline Citations ui

Sources cited inside a reply.

npx shadcn@latest add https://kobra.systems/r/inline-citations.json
Code Block ui

Syntax-highlighted code with actions.

npx shadcn@latest add https://kobra.systems/r/code-block.json
Task List ui

A task list an agent works through.

npx shadcn@latest add https://kobra.systems/r/task-list.json
Chat Input ui

A composer for prompting an agent, built on Voice Glow and ElevenLabs UI.

npx shadcn@latest add https://kobra.systems/r/chat-input.json
Plan Card ui

A plan an agent is asking to run.

npx shadcn@latest add https://kobra.systems/r/plan-card.json
Question Card ui

A question an agent needs answered before it continues.

npx shadcn@latest add https://kobra.systems/r/question-card.json
Hijri lib

The Umm al-Qura months for the calendar, from the browser’s own tables.

npx shadcn@latest add https://kobra.systems/r/hijri.json
Hijri civil lib

The arithmetic Hijri months for the calendar, a fixed 30-year cycle rather than a published table.

npx shadcn@latest add https://kobra.systems/r/hijri-civil.json
Persian lib

The solar Hijri months Iran and Afghanistan keep, from the browser’s own tables.

npx shadcn@latest add https://kobra.systems/r/persian.json
Buddhist lib

Thailand’s Buddhist era for the calendar: the Gregorian months, the years counted 543 ahead.

npx shadcn@latest add https://kobra.systems/r/buddhist.json
Minguo lib

Taiwan’s Minguo years for the calendar: the Gregorian months, the years counted from 1912.

npx shadcn@latest add https://kobra.systems/r/minguo.json
Japanese lib

Japan’s imperial eras for the calendar: the Gregorian months, the years counted by era.

npx shadcn@latest add https://kobra.systems/r/japanese.json