---
name: "@kobra"
slug: "kobra"
description: "Polished components for teams building exceptional products and experiences."
category: "Charts/data viz"
tags: ["ai", "audio", "auth", "blocks", "buttons", "cards", "charts", "dashboard", "editor", "forms", "icons", "loaders", "media", "navigation", "overlays", "pro-available", "tables"]
framework: "react"
license: null
author: null
website: "https://kobra.systems"
github: null
registry: "https://kobra.systems/r/registry.json"
pro: true
pro_url: "https://kobra.systems/pricing"
github_stars: null
component_count: 73
generated_at: "2026-09-21T01:50:16.753Z"
---

# @kobra

Polished components for teams building exceptional products and experiences.

## Links

- Website: https://kobra.systems
- Registry JSON: https://kobra.systems/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/kobra
- This file: https://sh4dcn.vercel.app/md/kobra.md
- Pro / pricing: https://kobra.systems/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://kobra.systems/r/registry.json
pnpm dlx shadcn@latest add https://kobra.systems/r/registry.json
bunx shadcn@latest add https://kobra.systems/r/registry.json
# fetch the raw registry index
curl -s https://kobra.systems/r/registry.json
```

## Components (73)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | Vertically stacked disclosure sections. | `npx shadcn@latest add https://kobra.systems/r/accordion.json` |
| ai-editor | registry:ui | A document an agent edits alongside you. | `npx shadcn@latest add https://kobra.systems/r/ai-editor.json` |
| alert | registry:ui | A callout for important contextual information. | `npx shadcn@latest add https://kobra.systems/r/alert.json` |
| aspect-ratio | registry:ui | Keeps content within a fixed ratio. | `npx shadcn@latest add https://kobra.systems/r/aspect-ratio.json` |
| avatar | registry:ui | An image or fallback representing a person. | `npx shadcn@latest add https://kobra.systems/r/avatar.json` |
| badge | registry:ui | A compact status or category label. | `npx shadcn@latest add https://kobra.systems/r/badge.json` |
| breadcrumb | registry:ui | A hierarchical navigation trail. | `npx shadcn@latest add https://kobra.systems/r/breadcrumb.json` |
| button | registry:ui | A control that triggers an action. | `npx shadcn@latest add https://kobra.systems/r/button.json` |
| calendar | registry:ui | A date selection calendar. | `npx shadcn@latest add https://kobra.systems/r/calendar.json` |
| card | registry:ui | A surface grouping related content. | `npx shadcn@latest add https://kobra.systems/r/card.json` |
| halftone-dots | registry: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 | registry:ui | A wall of logos, shown a few at a time. | `npx shadcn@latest add https://kobra.systems/r/logo-carousel.json` |
| carousel | registry:ui | A horizontally navigable content collection, built on Embla. | `npx shadcn@latest add https://kobra.systems/r/carousel.json` |
| chart | registry:ui | Composable data visualizations, from Evil Charts. | `npx shadcn@latest add https://kobra.systems/r/chart.json` |
| checkbox | registry:ui | A binary or indeterminate selection control. | `npx shadcn@latest add https://kobra.systems/r/checkbox.json` |
| collapsible | registry:ui | An expandable content region. | `npx shadcn@latest add https://kobra.systems/r/collapsible.json` |
| combobox | registry:ui | A searchable option picker. | `npx shadcn@latest add https://kobra.systems/r/combobox.json` |
| multi-select | registry:ui | Several values picked from one list, as chips. | `npx shadcn@latest add https://kobra.systems/r/multi-select.json` |
| command-menu | registry:ui | A fast, nested command menu powered by kmenu. | `npx shadcn@latest add https://kobra.systems/r/command-menu.json` |
| context-menu | registry:ui | Actions opened from a secondary click. | `npx shadcn@latest add https://kobra.systems/r/context-menu.json` |
| dialog | registry: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 | registry:ui | A panel that slides from an edge, built on Vaul. | `npx shadcn@latest add https://kobra.systems/r/drawer.json` |
| dropdown-menu | registry:ui | A menu opened from a trigger. | `npx shadcn@latest add https://kobra.systems/r/dropdown-menu.json` |
| empty | registry:ui | An empty-state layout with guidance. | `npx shadcn@latest add https://kobra.systems/r/empty.json` |
| form | registry:ui | Validated form composition. | `npx shadcn@latest add https://kobra.systems/r/form.json` |
| hover-card | registry:ui | Rich content revealed on hover. | `npx shadcn@latest add https://kobra.systems/r/hover-card.json` |
| input | registry:ui | A text input with its label, description and attached controls. | `npx shadcn@latest add https://kobra.systems/r/input.json` |
| input-otp | registry:ui | A segmented one-time-code input, built on input-otp. | `npx shadcn@latest add https://kobra.systems/r/input-otp.json` |
| input-dissolve | registry:ui | A field that carries its value away once it is spent. | `npx shadcn@latest add https://kobra.systems/r/input-dissolve.json` |
| item | registry:ui | A flexible row for lists and settings. | `npx shadcn@latest add https://kobra.systems/r/item.json` |
| menubar | registry:ui | A persistent horizontal application menu. | `npx shadcn@latest add https://kobra.systems/r/menubar.json` |
| navigation-menu | registry:ui | A collection of navigation links. | `npx shadcn@latest add https://kobra.systems/r/navigation-menu.json` |
| pagination | registry:ui | Controls for moving through pages. | `npx shadcn@latest add https://kobra.systems/r/pagination.json` |
| popover | registry:ui | Floating content anchored to a trigger. | `npx shadcn@latest add https://kobra.systems/r/popover.json` |
| progress | registry:ui | The completion state of a task. | `npx shadcn@latest add https://kobra.systems/r/progress.json` |
| radio-group | registry:ui | A single choice from several options. | `npx shadcn@latest add https://kobra.systems/r/radio-group.json` |
| resizable | registry:ui | Panels separated by a draggable handle. | `npx shadcn@latest add https://kobra.systems/r/resizable.json` |
| scroll-area | registry:ui | A custom cross-browser scroll container. | `npx shadcn@latest add https://kobra.systems/r/scroll-area.json` |
| select | registry:ui | An option picker, as a styled menu or the native control. | `npx shadcn@latest add https://kobra.systems/r/select.json` |
| separator | registry:ui | A visual divider between content. | `npx shadcn@latest add https://kobra.systems/r/separator.json` |
| sheet | registry:ui | A dialog that enters from an edge. | `npx shadcn@latest add https://kobra.systems/r/sheet.json` |
| sidebar | registry:ui | A composable application sidebar. | `npx shadcn@latest add https://kobra.systems/r/sidebar.json` |
| skeleton | registry:ui | A placeholder shown while content loads. | `npx shadcn@latest add https://kobra.systems/r/skeleton.json` |
| slider | registry:ui | A value selected along a range, with a liquid handle from Gooey. | `npx shadcn@latest add https://kobra.systems/r/slider.json` |
| sound | registry: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 | registry:ui | Stacked status notifications with progress and actions. | `npx shadcn@latest add https://kobra.systems/r/toast.json` |
| spinner | registry:ui | An indeterminate loading indicator. | `npx shadcn@latest add https://kobra.systems/r/spinner.json` |
| switch | registry:ui | A control for toggling a setting. | `npx shadcn@latest add https://kobra.systems/r/switch.json` |
| table | registry:ui | Rows and columns of structured data. | `npx shadcn@latest add https://kobra.systems/r/table.json` |
| crm-table | registry:ui | Accounts with owners, pipeline and win odds, in resizable columns. | `npx shadcn@latest add https://kobra.systems/r/crm-table.json` |
| tabs | registry:ui | Layered content selected by tab. | `npx shadcn@latest add https://kobra.systems/r/tabs.json` |
| textarea | registry:ui | A multiline text input. | `npx shadcn@latest add https://kobra.systems/r/textarea.json` |
| toggle-group | registry:ui | A two-state control, alone or conjoined into a bar. | `npx shadcn@latest add https://kobra.systems/r/toggle-group.json` |
| tooltip | registry:ui | A concise label shown on hover or focus. | `npx shadcn@latest add https://kobra.systems/r/tooltip.json` |
| kbd | registry:ui | Keyboard input and shortcut hints. | `npx shadcn@latest add https://kobra.systems/r/kbd.json` |
| direction | registry:ui | Provides left-to-right or right-to-left direction. | `npx shadcn@latest add https://kobra.systems/r/direction.json` |
| attachment | registry:ui | A compact file attachment presentation. | `npx shadcn@latest add https://kobra.systems/r/attachment.json` |
| magnetic-dropzone | registry:ui | A drop target that leans toward the file you are carrying. | `npx shadcn@latest add https://kobra.systems/r/magnetic-dropzone.json` |
| conversation | registry:ui | A thread of chat bubbles with reactions and timestamps. | `npx shadcn@latest add https://kobra.systems/r/conversation.json` |
| marker | registry:ui | A labeled point or status marker. | `npx shadcn@latest add https://kobra.systems/r/marker.json` |
| message | registry:ui | A structured conversation message. | `npx shadcn@latest add https://kobra.systems/r/message.json` |
| message-scroller | registry:ui | Conversation scrolling with edge controls. | `npx shadcn@latest add https://kobra.systems/r/message-scroller.json` |
| video | registry:ui | A video player built on Loomix, with liquid glass controls. | `npx shadcn@latest add https://kobra.systems/r/video.json` |
| reasoning-steps | registry:ui | A model working before it answers. | `npx shadcn@latest add https://kobra.systems/r/reasoning-steps.json` |
| file-diff | registry:ui | Changes an agent proposes to a file. | `npx shadcn@latest add https://kobra.systems/r/file-diff.json` |
| image-generation | registry:ui | A canvas forming while an image is generated. | `npx shadcn@latest add https://kobra.systems/r/image-generation.json` |
| streaming-text | registry:ui | A reply arriving a token at a time. | `npx shadcn@latest add https://kobra.systems/r/streaming-text.json` |
| inline-citations | registry:ui | Sources cited inside a reply. | `npx shadcn@latest add https://kobra.systems/r/inline-citations.json` |
| code-block | registry:ui | Syntax-highlighted code with actions. | `npx shadcn@latest add https://kobra.systems/r/code-block.json` |
| task-list | registry:ui | A task list an agent works through. | `npx shadcn@latest add https://kobra.systems/r/task-list.json` |
| chat-input | registry:ui | A composer for prompting an agent. | `npx shadcn@latest add https://kobra.systems/r/chat-input.json` |
| plan-card | registry:ui | A plan an agent is asking to run. | `npx shadcn@latest add https://kobra.systems/r/plan-card.json` |
| question-card | registry:ui | A question an agent needs answered before it continues. | `npx shadcn@latest add https://kobra.systems/r/question-card.json` |

## For AI agents

```text
You are adding components from @kobra to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/kobra.md) for the component list.
2. Fetch the machine-readable index: https://kobra.systems/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: kobra).
```