---
name: "@cnippet"
slug: "cnippet"
description: "Cnippet UI is a production-ready, curated set of accessible and composable React components—built with Base UI and Tailwind CSS. Copy, paste, and ship stunning interfaces faster."
category: "Charts/data viz"
tags: ["accessibility", "auth", "buttons", "cards", "charts", "dashboard", "forms", "loaders", "media", "navigation", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "cnippet-dev"
website: "https://ui.cnippet.dev/"
github: "https://github.com/cnippet-dev/ui-cnippet"
registry: "https://ui.cnippet.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 8
component_count: 250
generated_at: "2026-07-28T08:59:05.895Z"
---

# @cnippet

Cnippet UI is a production-ready, curated set of accessible and composable React components—built with Base UI and Tailwind CSS. Copy, paste, and ship stunning interfaces faster.

## Links

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

## Install

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

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| ui | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/ui.json` |
| accordion | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/accordion.json` |
| alert | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/alert.json` |
| alert-dialog | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/alert-dialog.json` |
| autocomplete | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/autocomplete.json` |
| avatar | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/avatar.json` |
| badge | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/badge.json` |
| breadcrumb | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/breadcrumb.json` |
| button | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/button.json` |
| calendar | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/calendar.json` |
| card | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/card.json` |
| carousel | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/carousel.json` |
| chart | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/chart.json` |
| checkbox | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/checkbox.json` |
| checkbox-group | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/checkbox-group.json` |
| collapsible | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/collapsible.json` |
| combobox | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/combobox.json` |
| command | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/command.json` |
| context-menu | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/context-menu.json` |
| dialog | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/dialog.json` |
| drawer | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/drawer.json` |
| empty | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/empty.json` |
| field | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/field.json` |
| fieldset | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/fieldset.json` |
| form | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/form.json` |
| frame | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/frame.json` |
| group | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/group.json` |
| input | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/input.json` |
| item | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/item.json` |
| otp-field | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/otp-field.json` |
| input-group | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/input-group.json` |
| kbd | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/kbd.json` |
| label | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/label.json` |
| menu | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/menu.json` |
| meter | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/meter.json` |
| number-field | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/number-field.json` |
| pagination | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/pagination.json` |
| popover | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/popover.json` |
| preview-card | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/preview-card.json` |
| progress | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/progress.json` |
| radio-group | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/radio-group.json` |
| scroll-area | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/scroll-area.json` |
| select | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/select.json` |
| separator | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/separator.json` |
| sheet | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/sheet.json` |
| sidebar | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/sidebar.json` |
| skeleton | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/skeleton.json` |
| slider | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/slider.json` |
| spinner | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/spinner.json` |
| switch | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/switch.json` |
| table | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/table.json` |
| tabs | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/tabs.json` |
| textarea | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/textarea.json` |
| toast | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/toast.json` |
| toggle | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/toggle.json` |
| toggle-group | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/toggle-group.json` |
| toolbar | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/toolbar.json` |
| tooltip | registry:ui | — | `npx shadcn@latest add https://ui.cnippet.dev/r/tooltip.json` |
| v-accordion-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-1.json` |
| v-accordion-2 | registry:block | Single Accordion | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-2.json` |
| v-accordion-3 | registry:block | Multiple Accordion | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-3.json` |
| v-accordion-4 | registry:block | Controlled Accordion | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-4.json` |
| v-accordion-5 | registry:block | With plus/minus indicators | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-5.json` |
| v-accordion-6 | registry:block | With borders and rounded corners | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-6.json` |
| v-accordion-7 | registry:block | Embedded within a Card | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-7.json` |
| v-accordion-8 | registry:block | Nested accordion example with bordered items | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-8.json` |
| v-accordion-9 | registry:block | User list accordion with avatars and role indicators | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-9.json` |
| v-accordion-10 | registry:block | Changelog / Release Notes with versioned entries | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-10.json` |
| v-accordion-11 | registry:block | Searchable FAQ with live keyword filter | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-11.json` |
| v-accordion-12 | registry:block | Settings sidebar navigation with icon sections | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-12.json` |
| v-accordion-13 | registry:block | Job board listings with requirements and apply action | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-13.json` |
| v-accordion-14 | registry:block | Onboarding step tracker with completion state | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-14.json` |
| v-accordion-15 | registry:block | Product specifications table by category | `npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-15.json` |
| v-alert-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-1.json` |
| v-alert-2 | registry:block | With Icon | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-2.json` |
| v-alert-3 | registry:block | With Icon and Action Buttons | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-3.json` |
| v-alert-4 | registry:block | Info Alert | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-4.json` |
| v-alert-5 | registry:block | Success Alert | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-5.json` |
| v-alert-6 | registry:block | Warning Alert | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-6.json` |
| v-alert-7 | registry:block | Error Alert | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-7.json` |
| v-alert-8 | registry:block | Stacked alerts within a Frame | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-8.json` |
| v-alert-9 | registry:block | Alert with actions integrated within a Frame | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-9.json` |
| v-alert-10 | registry:block | Feature discovery alert | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-10.json` |
| v-alert-11 | registry:block | Dismissible announcement banner with CTA | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-11.json` |
| v-alert-12 | registry:block | Cookie consent banner with accept and decline | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-12.json` |
| v-alert-13 | registry:block | Storage limit warning with usage progress bar | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-13.json` |
| v-alert-14 | registry:block | Update available with async install feedback | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-14.json` |
| v-alert-15 | registry:block | Email verification with resend countdown | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-15.json` |
| v-alert-dialog-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-1.json` |
| v-alert-dialog-2 | registry:block | Small Size Alert Dialog | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-2.json` |
| v-alert-dialog-3 | registry:block | Alert Dialog Within A Standard Dialog | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-3.json` |
| v-alert-dialog-4 | registry:block | Task Success Confirmation | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-4.json` |
| v-alert-dialog-5 | registry:block | Account Deactivation Confirmation | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-5.json` |
| v-alert-dialog-6 | registry:block | Warning For Unsaved Changes | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-6.json` |
| v-alert-dialog-7 | registry:block | Confirmation For Successful e-ticket Registration | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-7.json` |
| v-alert-dialog-8 | registry:block | System Update Notification | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-8.json` |
| v-alert-dialog-9 | registry:block | Billing Warning For Expired Subscriptions | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-9.json` |
| v-alert-dialog-10 | registry:block | Logout Confirmation Dialog | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-10.json` |
| v-alert-dialog-11 | registry:block | File Overwrite Confirmation with three-way choice | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-11.json` |
| v-alert-dialog-12 | registry:block | Subscription Downgrade Warning with feature loss list | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-12.json` |
| v-alert-dialog-13 | registry:block | Transfer Ownership with typed confirmation input | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-13.json` |
| v-alert-dialog-14 | registry:block | Clear All Data with checkbox consent gate | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-14.json` |
| v-alert-dialog-15 | registry:block | Rate Limit Exceeded with live countdown timer | `npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-15.json` |
| v-autocomplete-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-1.json` |
| v-autocomplete-2 | registry:block | Disabled | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-2.json` |
| v-autocomplete-3 | registry:block | Sizes | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-3.json` |
| v-autocomplete-4 | registry:block | With Label | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-4.json` |
| v-autocomplete-5 | registry:block | Inline Autocomplete | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-5.json` |
| v-autocomplete-6 | registry:block | Auto Highlight | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-6.json` |
| v-autocomplete-7 | registry:block | With Clear Button | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-7.json` |
| v-autocomplete-8 | registry:block | With Trigger and Clear Buttons | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-8.json` |
| v-autocomplete-9 | registry:block | With Search Icon | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-9.json` |
| v-autocomplete-10 | registry:block | Grouped Items | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-10.json` |
| v-autocomplete-11 | registry:block | Limit Results | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-11.json` |
| v-autocomplete-12 | registry:block | Async Search | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-12.json` |
| v-autocomplete-13 | registry:block | Form Integration | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-13.json` |
| v-autocomplete-14 | registry:block | Timezone Picker | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-14.json` |
| v-autocomplete-15 | registry:block | Person Picker | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-15.json` |
| v-autocomplete-16 | registry:block | Country picker with flag and ISO code | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-16.json` |
| v-autocomplete-17 | registry:block | Repository picker with language and star count | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-17.json` |
| v-autocomplete-18 | registry:block | Multi-select tag input with dismissible chip pills | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-18.json` |
| v-autocomplete-19 | registry:block | Priority selector with icon and description | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-19.json` |
| v-autocomplete-20 | registry:block | Tech stack picker grouped by category | `npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-20.json` |
| v-avatar-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-1.json` |
| v-avatar-2 | registry:block | With Fallback | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-2.json` |
| v-avatar-3 | registry:block | Different Sizes | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-3.json` |
| v-avatar-4 | registry:block | Different Radius | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-4.json` |
| v-avatar-5 | registry:block | Avatar Group | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-5.json` |
| v-avatar-6 | registry:block | Avatar Group With Numeric Count | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-6.json` |
| v-avatar-7 | registry:block | With Details and Badge | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-7.json` |
| v-avatar-8 | registry:block | Avatar Social Proof With Text Label | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-8.json` |
| v-avatar-9 | registry:block | Compact Social Proof With Initials | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-9.json` |
| v-avatar-10 | registry:block | With Hover Effect | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-10.json` |
| v-avatar-11 | registry:block | With Hover Effect & Tooltips | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-11.json` |
| v-avatar-12 | registry:block | Avatar Inside An Empty State Example | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-12.json` |
| v-avatar-13 | registry:block | With Loading State Demonstration | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-13.json` |
| v-avatar-14 | registry:block | With Custom Badge | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-14.json` |
| v-avatar-15 | registry:block | With Ring Animation | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-15.json` |
| v-avatar-16 | registry:block | With Dropdown Menu | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-16.json` |
| v-avatar-17 | registry:block | Team grid with online presence status dots | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-17.json` |
| v-avatar-18 | registry:block | Pull request comment thread | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-18.json` |
| v-avatar-19 | registry:block | Interactive assignee picker with selection state | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-19.json` |
| v-avatar-20 | registry:block | Contributor leaderboard with rank and commit count | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-20.json` |
| v-avatar-21 | registry:block | Profile card with stats and action buttons | `npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-21.json` |
| v-badge-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-1.json` |
| v-badge-2 | registry:block | Outline | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-2.json` |
| v-badge-3 | registry:block | Secondary | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-3.json` |
| v-badge-4 | registry:block | Destructive | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-4.json` |
| v-badge-5 | registry:block | Info | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-5.json` |
| v-badge-6 | registry:block | Success | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-6.json` |
| v-badge-7 | registry:block | Warning | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-7.json` |
| v-badge-8 | registry:block | Error | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-8.json` |
| v-badge-9 | registry:block | Size Variations | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-9.json` |
| v-badge-10 | registry:block | With Icon | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-10.json` |
| v-badge-11 | registry:block | With Link | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-11.json` |
| v-badge-12 | registry:block | With Count | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-12.json` |
| v-badge-13 | registry:block | Status dot indicators (Online, Busy, Away, Offline) | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-13.json` |
| v-badge-14 | registry:block | Release channel tags (Stable, Beta, Experimental, Deprecated) | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-14.json` |
| v-badge-15 | registry:block | Subscription plan tiers with pricing | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-15.json` |
| v-badge-16 | registry:block | Notification category badges with unread counts | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-16.json` |
| v-badge-17 | registry:block | Priority labels in a task list | `npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-17.json` |
| v-breadcrumb-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-1.json` |
| v-breadcrumb-2 | registry:block | With custom separator | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-2.json` |
| v-breadcrumb-3 | registry:block | With Dropdown Menu | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-3.json` |
| v-breadcrumb-4 | registry:block | With Next.js Link | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-4.json` |
| v-breadcrumb-5 | registry:block | With Icons For Each Item | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-5.json` |
| v-breadcrumb-6 | registry:block | With Avatar | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-6.json` |
| v-breadcrumb-7 | registry:block | Inside Card | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-7.json` |
| v-breadcrumb-8 | registry:block | Starting With Home Icon | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-8.json` |
| v-breadcrumb-9 | registry:block | Button-style | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-9.json` |
| v-breadcrumb-10 | registry:block | With Project, Sser and Document Info | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-10.json` |
| v-breadcrumb-11 | registry:block | File path breadcrumb with folder and file icons in monospace | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-11.json` |
| v-breadcrumb-12 | registry:block | Checkout step progress breadcrumb with numbered circles and navigation buttons | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-12.json` |
| v-breadcrumb-13 | registry:block | Admin hierarchy breadcrumb with colored icon badges per level | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-13.json` |
| v-breadcrumb-14 | registry:block | Page header breadcrumb with edit and share action buttons | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-14.json` |
| v-breadcrumb-15 | registry:block | Compact breadcrumb with ellipsis and hidden-items count badge | `npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-15.json` |
| v-button-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-1.json` |
| v-button-2 | registry:block | Outline | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-2.json` |
| v-button-3 | registry:block | Secondary | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-3.json` |
| v-button-4 | registry:block | Destructive | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-4.json` |
| v-button-5 | registry:block | Destructive Outline | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-5.json` |
| v-button-6 | registry:block | Ghost | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-6.json` |
| v-button-7 | registry:block | Link | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-7.json` |
| v-button-8 | registry:block | Extra-small Size | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-8.json` |
| v-button-9 | registry:block | Small Size | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-9.json` |
| v-button-10 | registry:block | Large Size | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-10.json` |
| v-button-11 | registry:block | Extra-large Size | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-11.json` |
| v-button-12 | registry:block | Disabled | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-12.json` |
| v-button-13 | registry:block | Icon | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-13.json` |
| v-button-14 | registry:block | Button with an icon on the right | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-14.json` |
| v-button-15 | registry:block | Button with an icon on the left | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-15.json` |
| v-button-16 | registry:block | Outline button with an icon on the left | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-16.json` |
| v-button-17 | registry:block | Ghost button with an icon on the right | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-17.json` |
| v-button-18 | registry:block | Destructive button with an icon on the left | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-18.json` |
| v-button-19 | registry:block | Link button with an icon on the right | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-19.json` |
| v-button-20 | registry:block | Star button with count | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-20.json` |
| v-button-21 | registry:block | Button with an unread badge | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-21.json` |
| v-button-22 | registry:block | Button with icon, label, and shortcut keys | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-22.json` |
| v-button-23 | registry:block | Icon-only copy button with feedback | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-23.json` |
| v-button-24 | registry:block | Animated hamburger / close toggle button | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-24.json` |
| v-button-25 | registry:block | Sliding Icon Button (Hover reveal) | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-25.json` |
| v-button-26 | registry:block | Social login buttons with GitHub, Google, and email options | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-26.json` |
| v-button-27 | registry:block | Loading and success state button with animated icon swap | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-27.json` |
| v-button-28 | registry:block | File upload button with attachment preview and clear action | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-28.json` |
| v-button-29 | registry:block | Split button with primary action and dropdown menu via Group | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-29.json` |
| v-button-30 | registry:block | Segmented view toggle with list, table, and kanban options | `npx shadcn@latest add https://ui.cnippet.dev/r/v-button-30.json` |
| v-calendar-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-1.json` |
| v-calendar-2 | registry:block | Fallback Only | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-2.json` |
| v-calendar-3 | registry:block | Different Sizes | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-3.json` |
| v-calendar-4 | registry:block | Dropdown Navigation | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-4.json` |
| v-calendar-5 | registry:block | Custom Select Dropdown | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-5.json` |
| v-calendar-6 | registry:block | Custom Combobox Dropdown | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-6.json` |
| v-calendar-7 | registry:block | Multiple Selection | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-7.json` |
| v-calendar-8 | registry:block | Appointment Booking | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-8.json` |
| v-calendar-9 | registry:block | Two-Month Range Picker | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-9.json` |
| v-calendar-10 | registry:block | Event Indicators | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-10.json` |
| v-calendar-11 | registry:block | Date Picker with Presets | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-11.json` |
| v-calendar-12 | registry:block | Date of Birth | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-12.json` |
| v-calendar-13 | registry:block | Week Picker | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-13.json` |
| v-calendar-14 | registry:block | Basic calendar | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-14.json` |
| v-calendar-15 | registry:block | Basic calendar | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-15.json` |
| v-calendar-16 | registry:block | Habit tracker with completion indicators and monthly streak counter | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-16.json` |
| v-calendar-17 | registry:block | Sprint planner with two-month range selection and duration stats | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-17.json` |
| v-calendar-18 | registry:block | Time off request with leave type selector and range picker | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-18.json` |
| v-calendar-19 | registry:block | Mini year view with all 12 months in a compact grid | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-19.json` |
| v-calendar-20 | registry:block | Time slot booking with available/booked slot grid and confirmation | `npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-20.json` |
| v-card-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-1.json` |
| v-card-2 | registry:block | With Border | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-2.json` |
| v-card-3 | registry:block | With Border Separation | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-3.json` |
| v-card-4 | registry:block | With Link | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-4.json` |
| v-card-5 | registry:block | With Dropdown Menu | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-5.json` |
| v-card-6 | registry:block | With Image | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-6.json` |
| v-card-7 | registry:block | With Image Scale Hover Effect | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-7.json` |
| v-card-8 | registry:block | With Image and Shadow Fade Effect | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-8.json` |
| v-card-9 | registry:block | With Stacked depth Effect | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-9.json` |
| v-card-10 | registry:block | Login Form Card | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-10.json` |
| v-card-11 | registry:block | Expandable Content Card | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-11.json` |
| v-card-12 | registry:block | With Overflow Menu | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-12.json` |
| v-card-13 | registry:block | With Header Badge & Actions | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-13.json` |
| v-card-14 | registry:block | With Icon, Title and Link | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-14.json` |
| v-card-15 | registry:block | With Header Label and Link | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-15.json` |
| v-card-16 | registry:block | GitHub repository list cards with language, star, and fork counts | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-16.json` |
| v-card-17 | registry:block | Settings card with sidebar navigation and swappable content panels | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-17.json` |
| v-card-18 | registry:block | Pricing plan card with feature checklist and highlighted ring | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-18.json` |
| v-card-19 | registry:block | Event card with date, time, location, attendee count, and RSVP button | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-19.json` |
| v-card-20 | registry:block | Stats dashboard grid with four metric tiles and trend indicators | `npx shadcn@latest add https://ui.cnippet.dev/r/v-card-20.json` |
| v-carousel-1 | registry:block | Default | `npx shadcn@latest add https://ui.cnippet.dev/r/v-carousel-1.json` |
| v-carousel-2 | registry:block | Multiple Items | `npx shadcn@latest add https://ui.cnippet.dev/r/v-carousel-2.json` |
| v-carousel-3 | registry:block | Custom Spacing | `npx shadcn@latest add https://ui.cnippet.dev/r/v-carousel-3.json` |
| v-carousel-4 | registry:block | Vertical Orientation | `npx shadcn@latest add https://ui.cnippet.dev/r/v-carousel-4.json` |

## For AI agents

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