---
name: "@herocn"
slug: "herocn"
description: "HeroUI's design system, shadcn's abstraction."
category: "Animated components"
tags: ["accessibility", "animation", "auth", "blocks", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "hooks", "icons", "loaders", "media", "mobile", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "Maqed"
website: "https://herocn.dev/"
github: "https://github.com/Maqed/herocn"
registry: "https://herocn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 10
component_count: 250
generated_at: "2026-10-10T06:32:55.998Z"
---

# @herocn

HeroUI's design system, shadcn's abstraction.

## Links

- Website: https://herocn.dev/
- GitHub: https://github.com/Maqed/herocn
- Registry JSON: https://herocn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/herocn
- This file: https://sh4dcn.vercel.app/md/herocn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://herocn.dev/r/registry.json
pnpm dlx shadcn@latest add https://herocn.dev/r/registry.json
bunx shadcn@latest add https://herocn.dev/r/registry.json
# clone the source repo
git clone https://github.com/Maqed/herocn.git
# fetch the raw registry index
curl -s https://herocn.dev/r/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://herocn.dev/r/index.json` |
| style | registry:style | — | `npx shadcn@latest add https://herocn.dev/r/style.json` |
| alert | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/alert.json` |
| alert-dialog | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/alert-dialog.json` |
| accordion | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/accordion.json` |
| aspect-ratio | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/aspect-ratio.json` |
| attachment | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/attachment.json` |
| avatar | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/avatar.json` |
| button | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/button.json` |
| button-group | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/button-group.json` |
| breadcrumb | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/breadcrumb.json` |
| badge | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/badge.json` |
| breadcrumb | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/breadcrumb.json` |
| bubble | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/bubble.json` |
| calendar | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/calendar.json` |
| card | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/card.json` |
| chart | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/chart.json` |
| carousel | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/carousel.json` |
| checkbox | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/checkbox.json` |
| collapsible | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/collapsible.json` |
| command | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/command.json` |
| combobox | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/combobox.json` |
| context-menu | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/context-menu.json` |
| popover | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/popover.json` |
| progress | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/progress.json` |
| questionnaire | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/questionnaire.json` |
| tooltip | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/tooltip.json` |
| dropdown-menu | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu.json` |
| drawer | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/drawer.json` |
| empty | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/empty.json` |
| dialog | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/dialog.json` |
| sheet | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/sheet.json` |
| field | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/field.json` |
| hover-card | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/hover-card.json` |
| surface | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/surface.json` |
| scroll-area | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/scroll-area.json` |
| sheet | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/sheet.json` |
| input | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/input.json` |
| input-group | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/input-group.json` |
| input-otp | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/input-otp.json` |
| item | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/item.json` |
| kbd | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/kbd.json` |
| label | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/label.json` |
| menubar | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/menubar.json` |
| marker | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/marker.json` |
| message | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/message.json` |
| message-scroller | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/message-scroller.json` |
| navigation-menu | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/navigation-menu.json` |
| native-select | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/native-select.json` |
| pagination | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/pagination.json` |
| select | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/select.json` |
| separator | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/separator.json` |
| switch | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/switch.json` |
| checkbox | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/checkbox.json` |
| sidebar | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/sidebar.json` |
| slider | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/slider.json` |
| skeleton | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/skeleton.json` |
| spinner | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/spinner.json` |
| tabs | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/tabs.json` |
| table | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/table.json` |
| toggle | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/toggle.json` |
| toggle-group | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/toggle-group.json` |
| toast | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/toast.json` |
| textarea | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/textarea.json` |
| radio-group | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/radio-group.json` |
| resizable | registry:ui | — | `npx shadcn@latest add https://herocn.dev/r/resizable.json` |
| use-mobile | registry:hook | — | `npx shadcn@latest add https://herocn.dev/r/use-mobile.json` |
| attachment-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/attachment-demo.json` |
| attachment-image | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/attachment-image.json` |
| attachment-states | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/attachment-states.json` |
| attachment-sizes | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/attachment-sizes.json` |
| attachment-group | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/attachment-group.json` |
| attachment-trigger | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/attachment-trigger.json` |
| aspect-ratio-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/aspect-ratio-demo.json` |
| aspect-ratio-portrait | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/aspect-ratio-portrait.json` |
| aspect-ratio-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/aspect-ratio-rtl.json` |
| aspect-ratio-square | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/aspect-ratio-square.json` |
| aspect-ratio-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/aspect-ratio-rtl.json` |
| card-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/card-demo.json` |
| card-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/card-variants.json` |
| card-small | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/card-small.json` |
| card-image | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/card-image.json` |
| card-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/card-rtl.json` |
| button-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-demo.json` |
| button-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-variants.json` |
| button-sizes | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-sizes.json` |
| button-icons | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-icons.json` |
| button-render | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-render.json` |
| button-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-rtl.json` |
| skeleton-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-demo.json` |
| skeleton-avatar | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-avatar.json` |
| skeleton-card | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-card.json` |
| skeleton-text | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-text.json` |
| skeleton-form | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-form.json` |
| skeleton-table | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-table.json` |
| skeleton-animation-types | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-animation-types.json` |
| skeleton-single-shimmer | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-single-shimmer.json` |
| skeleton-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/skeleton-rtl.json` |
| badge-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/badge-rtl.json` |
| input-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-rtl.json` |
| field-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-demo.json` |
| field-input | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-input.json` |
| field-textarea | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-textarea.json` |
| field-select | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-select.json` |
| field-slider | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-slider.json` |
| field-fieldset | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-fieldset.json` |
| field-checkbox | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-checkbox.json` |
| checkbox-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/checkbox-demo.json` |
| checkbox-basic | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/checkbox-basic.json` |
| checkbox-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/checkbox-variants.json` |
| checkbox-description | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/checkbox-description.json` |
| checkbox-disabled | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/checkbox-disabled.json` |
| checkbox-invalid | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/checkbox-invalid.json` |
| checkbox-in-surface | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/checkbox-in-surface.json` |
| checkbox-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/checkbox-rtl.json` |
| field-radio | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-radio.json` |
| radio-group-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/radio-group-demo.json` |
| radio-group-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/radio-group-variants.json` |
| radio-group-description | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/radio-group-description.json` |
| radio-group-disabled | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/radio-group-disabled.json` |
| radio-group-invalid | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/radio-group-invalid.json` |
| radio-group-in-surface | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/radio-group-in-surface.json` |
| radio-group-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/radio-group-rtl.json` |
| field-switch | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-switch.json` |
| field-choice-card | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-choice-card.json` |
| field-group | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-group.json` |
| field-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/field-rtl.json` |
| textarea-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/textarea-demo.json` |
| textarea-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/textarea-variants.json` |
| textarea-states | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/textarea-states.json` |
| textarea-field | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/textarea-field.json` |
| textarea-button | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/textarea-button.json` |
| textarea-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/textarea-rtl.json` |
| textarea-in-surface | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/textarea-in-surface.json` |
| avatar-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-rtl.json` |
| collapsible-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/collapsible-rtl.json` |
| dropdown-menu-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-rtl.json` |
| surface-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/surface-rtl.json` |
| collapsible-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/collapsible-demo.json` |
| collapsible-basic | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/collapsible-basic.json` |
| collapsible-settings | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/collapsible-settings.json` |
| collapsible-file-tree | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/collapsible-file-tree.json` |
| dropdown-menu-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-demo.json` |
| dropdown-menu-basic | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-basic.json` |
| dropdown-menu-submenu | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-submenu.json` |
| dropdown-menu-shortcuts | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-shortcuts.json` |
| dropdown-menu-icons | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-icons.json` |
| dropdown-menu-checkboxes | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-checkboxes.json` |
| dropdown-menu-checkboxes-icons | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-checkboxes-icons.json` |
| dropdown-menu-radio-group | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-radio-group.json` |
| dropdown-menu-radio-icons | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-radio-icons.json` |
| dropdown-menu-destructive | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-destructive.json` |
| dropdown-menu-avatar | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-avatar.json` |
| dropdown-menu-complex | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-complex.json` |
| dropdown-menu-filterable | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/dropdown-menu-filterable.json` |
| drawer-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-demo.json` |
| drawer-direction | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-direction.json` |
| drawer-overlay-variant | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-overlay-variant.json` |
| drawer-scrollable-content | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-scrollable-content.json` |
| drawer-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-rtl.json` |
| drawer-responsive-dialog | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-responsive-dialog.json` |
| drawer-swipe-handle | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-swipe-handle.json` |
| drawer-nested | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-nested.json` |
| drawer-non-modal | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-non-modal.json` |
| drawer-snap-points | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/drawer-snap-points.json` |
| avatar-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-demo.json` |
| avatar-basic | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-basic.json` |
| avatar-badge | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-badge.json` |
| avatar-badge-icon | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-badge-icon.json` |
| avatar-group | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-group.json` |
| avatar-group-count | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-group-count.json` |
| avatar-group-count-icon | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-group-count-icon.json` |
| avatar-size | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-size.json` |
| avatar-dropdown | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/avatar-dropdown.json` |
| badge-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/badge-demo.json` |
| badge-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/badge-variants.json` |
| badge-sizes | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/badge-sizes.json` |
| badge-icon | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/badge-icon.json` |
| badge-colors | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/badge-colors.json` |
| surface-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/surface-demo.json` |
| surface-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/surface-variants.json` |
| input-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-demo.json` |
| input-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-variants.json` |
| input-states | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-states.json` |
| input-field | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-field.json` |
| input-fieldgroup | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-fieldgroup.json` |
| input-badge | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-badge.json` |
| input-input-group | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-input-group.json` |
| input-button-group | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-button-group.json` |
| input-in-surface | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-in-surface.json` |
| button-group-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-demo.json` |
| button-group-orientation | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-orientation.json` |
| button-group-size | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-size.json` |
| button-group-separator | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-separator.json` |
| button-group-split | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-split.json` |
| button-group-input | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-input.json` |
| button-group-input-group | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-input-group.json` |
| button-group-dropdown | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-dropdown.json` |
| button-group-select | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-select.json` |
| button-group-popover | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-popover.json` |
| button-group-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-rtl.json` |
| button-group-text | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/button-group-text.json` |
| tabs-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tabs-demo.json` |
| tabs-line | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tabs-line.json` |
| tabs-vertical | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tabs-vertical.json` |
| tabs-vertical-line | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tabs-vertical-line.json` |
| tabs-disabled | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tabs-disabled.json` |
| tabs-icons | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tabs-icons.json` |
| tabs-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tabs-rtl.json` |
| select-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-demo.json` |
| select-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-variants.json` |
| select-surface | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-surface.json` |
| select-groups | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-groups.json` |
| select-multiple | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-multiple.json` |
| select-scrollable | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-scrollable.json` |
| select-disabled | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-disabled.json` |
| select-invalid | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-invalid.json` |
| select-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/select-rtl.json` |
| separator-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/separator-demo.json` |
| separator-vertical | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/separator-vertical.json` |
| separator-menu | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/separator-menu.json` |
| separator-list | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/separator-list.json` |
| separator-surface | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/separator-surface.json` |
| separator-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/separator-rtl.json` |
| sidebar-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/sidebar-demo.json` |
| sidebar-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/sidebar-rtl.json` |
| sidebar-floating | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/sidebar-floating.json` |
| sidebar-inset | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/sidebar-inset.json` |
| sidebar-collapsible | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/sidebar-collapsible.json` |
| popover-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/popover-demo.json` |
| popover-basic | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/popover-basic.json` |
| popover-align | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/popover-align.json` |
| popover-form | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/popover-form.json` |
| popover-with-arrow | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/popover-with-arrow.json` |
| popover-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/popover-rtl.json` |
| progress-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/progress-demo.json` |
| progress-label | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/progress-label.json` |
| progress-controlled | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/progress-controlled.json` |
| progress-sizes | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/progress-sizes.json` |
| progress-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/progress-variants.json` |
| progress-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/progress-rtl.json` |
| tooltip-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tooltip-demo.json` |
| tooltip-sides | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tooltip-sides.json` |
| tooltip-arrow | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tooltip-arrow.json` |
| tooltip-keyboard | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tooltip-keyboard.json` |
| tooltip-disabled | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tooltip-disabled.json` |
| tooltip-rtl | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/tooltip-rtl.json` |
| input-group-demo | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-group-demo.json` |
| input-group-variants | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-group-variants.json` |
| input-group-invalid | registry:example | — | `npx shadcn@latest add https://herocn.dev/r/input-group-invalid.json` |

## For AI agents

```text
You are adding components from @herocn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/herocn.md) for the component list.
2. Fetch the machine-readable index: https://herocn.dev/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: herocn).
```