@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.

250 components react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://ui.cnippet.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://ui.cnippet.dev/r/registry.json

bun bunx shadcn@latest add https://ui.cnippet.dev/r/registry.json

fetch registry curl -s https://ui.cnippet.dev/r/registry.json

Components

250 total

ui ui

npx shadcn@latest add https://ui.cnippet.dev/r/ui.json

accordion ui

npx shadcn@latest add https://ui.cnippet.dev/r/accordion.json

alert ui

npx shadcn@latest add https://ui.cnippet.dev/r/alert.json

alert-dialog ui

npx shadcn@latest add https://ui.cnippet.dev/r/alert-dialog.json

autocomplete ui

npx shadcn@latest add https://ui.cnippet.dev/r/autocomplete.json

avatar ui

npx shadcn@latest add https://ui.cnippet.dev/r/avatar.json

badge ui

npx shadcn@latest add https://ui.cnippet.dev/r/badge.json

breadcrumb ui

npx shadcn@latest add https://ui.cnippet.dev/r/breadcrumb.json

button ui

npx shadcn@latest add https://ui.cnippet.dev/r/button.json

calendar ui

npx shadcn@latest add https://ui.cnippet.dev/r/calendar.json

card ui

npx shadcn@latest add https://ui.cnippet.dev/r/card.json

carousel ui

npx shadcn@latest add https://ui.cnippet.dev/r/carousel.json

chart ui

npx shadcn@latest add https://ui.cnippet.dev/r/chart.json

checkbox ui

npx shadcn@latest add https://ui.cnippet.dev/r/checkbox.json

checkbox-group ui

npx shadcn@latest add https://ui.cnippet.dev/r/checkbox-group.json

collapsible ui

npx shadcn@latest add https://ui.cnippet.dev/r/collapsible.json

combobox ui

npx shadcn@latest add https://ui.cnippet.dev/r/combobox.json

command ui

npx shadcn@latest add https://ui.cnippet.dev/r/command.json

context-menu ui

npx shadcn@latest add https://ui.cnippet.dev/r/context-menu.json

dialog ui

npx shadcn@latest add https://ui.cnippet.dev/r/dialog.json

drawer ui

npx shadcn@latest add https://ui.cnippet.dev/r/drawer.json

empty ui

npx shadcn@latest add https://ui.cnippet.dev/r/empty.json

field ui

npx shadcn@latest add https://ui.cnippet.dev/r/field.json

fieldset ui

npx shadcn@latest add https://ui.cnippet.dev/r/fieldset.json

form ui

npx shadcn@latest add https://ui.cnippet.dev/r/form.json

frame ui

npx shadcn@latest add https://ui.cnippet.dev/r/frame.json

group ui

npx shadcn@latest add https://ui.cnippet.dev/r/group.json

input ui

npx shadcn@latest add https://ui.cnippet.dev/r/input.json

item ui

npx shadcn@latest add https://ui.cnippet.dev/r/item.json

otp-field ui

npx shadcn@latest add https://ui.cnippet.dev/r/otp-field.json

input-group ui

npx shadcn@latest add https://ui.cnippet.dev/r/input-group.json

kbd ui

npx shadcn@latest add https://ui.cnippet.dev/r/kbd.json

label ui

npx shadcn@latest add https://ui.cnippet.dev/r/label.json

menu ui

npx shadcn@latest add https://ui.cnippet.dev/r/menu.json

meter ui

npx shadcn@latest add https://ui.cnippet.dev/r/meter.json

number-field ui

npx shadcn@latest add https://ui.cnippet.dev/r/number-field.json

pagination ui

npx shadcn@latest add https://ui.cnippet.dev/r/pagination.json

popover ui

npx shadcn@latest add https://ui.cnippet.dev/r/popover.json

preview-card ui

npx shadcn@latest add https://ui.cnippet.dev/r/preview-card.json

progress ui

npx shadcn@latest add https://ui.cnippet.dev/r/progress.json

radio-group ui

npx shadcn@latest add https://ui.cnippet.dev/r/radio-group.json

scroll-area ui

npx shadcn@latest add https://ui.cnippet.dev/r/scroll-area.json

select ui

npx shadcn@latest add https://ui.cnippet.dev/r/select.json

separator ui

npx shadcn@latest add https://ui.cnippet.dev/r/separator.json

sheet ui

npx shadcn@latest add https://ui.cnippet.dev/r/sheet.json

sidebar ui

npx shadcn@latest add https://ui.cnippet.dev/r/sidebar.json

skeleton ui

npx shadcn@latest add https://ui.cnippet.dev/r/skeleton.json

slider ui

npx shadcn@latest add https://ui.cnippet.dev/r/slider.json

spinner ui

npx shadcn@latest add https://ui.cnippet.dev/r/spinner.json

switch ui

npx shadcn@latest add https://ui.cnippet.dev/r/switch.json

table ui

npx shadcn@latest add https://ui.cnippet.dev/r/table.json

tabs ui

npx shadcn@latest add https://ui.cnippet.dev/r/tabs.json

textarea ui

npx shadcn@latest add https://ui.cnippet.dev/r/textarea.json

toast ui

npx shadcn@latest add https://ui.cnippet.dev/r/toast.json

toggle ui

npx shadcn@latest add https://ui.cnippet.dev/r/toggle.json

toggle-group ui

npx shadcn@latest add https://ui.cnippet.dev/r/toggle-group.json

toolbar ui

npx shadcn@latest add https://ui.cnippet.dev/r/toolbar.json

tooltip ui

npx shadcn@latest add https://ui.cnippet.dev/r/tooltip.json

v-accordion-1 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-1.json

v-accordion-2 block

Single Accordion

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-2.json

v-accordion-3 block

Multiple Accordion

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-3.json

v-accordion-4 block

Controlled Accordion

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-4.json

v-accordion-5 block

With plus/minus indicators

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-5.json

v-accordion-6 block

With borders and rounded corners

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-6.json

v-accordion-7 block

Embedded within a Card

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-7.json

v-accordion-8 block

Nested accordion example with bordered items

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-8.json

v-accordion-9 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 block

Changelog / Release Notes with versioned entries

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-10.json

v-accordion-11 block

Searchable FAQ with live keyword filter

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-11.json

v-accordion-12 block

Settings sidebar navigation with icon sections

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-12.json

v-accordion-13 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 block

Onboarding step tracker with completion state

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-14.json

v-accordion-15 block

Product specifications table by category

npx shadcn@latest add https://ui.cnippet.dev/r/v-accordion-15.json

v-alert-1 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-1.json

v-alert-2 block

With Icon

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-2.json

v-alert-3 block

With Icon and Action Buttons

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-3.json

v-alert-4 block

Info Alert

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-4.json

v-alert-5 block

Success Alert

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-5.json

v-alert-6 block

Warning Alert

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-6.json

v-alert-7 block

Error Alert

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-7.json

v-alert-8 block

Stacked alerts within a Frame

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-8.json

v-alert-9 block

Alert with actions integrated within a Frame

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-9.json

v-alert-10 block

Feature discovery alert

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-10.json

v-alert-11 block

Dismissible announcement banner with CTA

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-11.json

v-alert-12 block

Cookie consent banner with accept and decline

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-12.json

v-alert-13 block

Storage limit warning with usage progress bar

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-13.json

v-alert-14 block

Update available with async install feedback

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-14.json

v-alert-15 block

Email verification with resend countdown

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-15.json

v-alert-dialog-1 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-1.json

v-alert-dialog-2 block

Small Size Alert Dialog

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-2.json

v-alert-dialog-3 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 block

Task Success Confirmation

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-4.json

v-alert-dialog-5 block

Account Deactivation Confirmation

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-5.json

v-alert-dialog-6 block

Warning For Unsaved Changes

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-6.json

v-alert-dialog-7 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 block

System Update Notification

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-8.json

v-alert-dialog-9 block

Billing Warning For Expired Subscriptions

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-9.json

v-alert-dialog-10 block

Logout Confirmation Dialog

npx shadcn@latest add https://ui.cnippet.dev/r/v-alert-dialog-10.json

v-alert-dialog-11 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 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 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 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 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 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-1.json

v-autocomplete-2 block

Disabled

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-2.json

v-autocomplete-3 block

Sizes

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-3.json

v-autocomplete-4 block

With Label

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-4.json

v-autocomplete-5 block

Inline Autocomplete

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-5.json

v-autocomplete-6 block

Auto Highlight

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-6.json

v-autocomplete-7 block

With Clear Button

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-7.json

v-autocomplete-8 block

With Trigger and Clear Buttons

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-8.json

v-autocomplete-9 block

With Search Icon

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-9.json

v-autocomplete-10 block

Grouped Items

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-10.json

v-autocomplete-11 block

Limit Results

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-11.json

v-autocomplete-12 block

Async Search

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-12.json

v-autocomplete-13 block

Form Integration

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-13.json

v-autocomplete-14 block

Timezone Picker

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-14.json

v-autocomplete-15 block

Person Picker

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-15.json

v-autocomplete-16 block

Country picker with flag and ISO code

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-16.json

v-autocomplete-17 block

Repository picker with language and star count

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-17.json

v-autocomplete-18 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 block

Priority selector with icon and description

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-19.json

v-autocomplete-20 block

Tech stack picker grouped by category

npx shadcn@latest add https://ui.cnippet.dev/r/v-autocomplete-20.json

v-avatar-1 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-1.json

v-avatar-2 block

With Fallback

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-2.json

v-avatar-3 block

Different Sizes

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-3.json

v-avatar-4 block

Different Radius

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-4.json

v-avatar-5 block

Avatar Group

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-5.json

v-avatar-6 block

Avatar Group With Numeric Count

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-6.json

v-avatar-7 block

With Details and Badge

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-7.json

v-avatar-8 block

Avatar Social Proof With Text Label

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-8.json

v-avatar-9 block

Compact Social Proof With Initials

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-9.json

v-avatar-10 block

With Hover Effect

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-10.json

v-avatar-11 block

With Hover Effect & Tooltips

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-11.json

v-avatar-12 block

Avatar Inside An Empty State Example

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-12.json

v-avatar-13 block

With Loading State Demonstration

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-13.json

v-avatar-14 block

With Custom Badge

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-14.json

v-avatar-15 block

With Ring Animation

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-15.json

v-avatar-16 block

With Dropdown Menu

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-16.json

v-avatar-17 block

Team grid with online presence status dots

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-17.json

v-avatar-18 block

Pull request comment thread

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-18.json

v-avatar-19 block

Interactive assignee picker with selection state

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-19.json

v-avatar-20 block

Contributor leaderboard with rank and commit count

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-20.json

v-avatar-21 block

Profile card with stats and action buttons

npx shadcn@latest add https://ui.cnippet.dev/r/v-avatar-21.json

v-badge-1 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-1.json

v-badge-2 block

Outline

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-2.json

v-badge-3 block

Secondary

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-3.json

v-badge-4 block

Destructive

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-4.json

v-badge-5 block

Info

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-5.json

v-badge-6 block

Success

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-6.json

v-badge-7 block

Warning

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-7.json

v-badge-8 block

Error

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-8.json

v-badge-9 block

Size Variations

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-9.json

v-badge-10 block

With Icon

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-10.json

v-badge-11 block

With Link

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-11.json

v-badge-12 block

With Count

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-12.json

v-badge-13 block

Status dot indicators (Online, Busy, Away, Offline)

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-13.json

v-badge-14 block

Release channel tags (Stable, Beta, Experimental, Deprecated)

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-14.json

v-badge-15 block

Subscription plan tiers with pricing

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-15.json

v-badge-16 block

Notification category badges with unread counts

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-16.json

v-badge-17 block

Priority labels in a task list

npx shadcn@latest add https://ui.cnippet.dev/r/v-badge-17.json

v-breadcrumb-1 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-1.json

v-breadcrumb-2 block

With custom separator

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-2.json

v-breadcrumb-3 block

With Dropdown Menu

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-3.json

v-breadcrumb-4 block

With Next.js Link

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-4.json

v-breadcrumb-5 block

With Icons For Each Item

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-5.json

v-breadcrumb-6 block

With Avatar

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-6.json

v-breadcrumb-7 block

Inside Card

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-7.json

v-breadcrumb-8 block

Starting With Home Icon

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-8.json

v-breadcrumb-9 block

Button-style

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-9.json

v-breadcrumb-10 block

With Project, Sser and Document Info

npx shadcn@latest add https://ui.cnippet.dev/r/v-breadcrumb-10.json

v-breadcrumb-11 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 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 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 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 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 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-1.json

v-button-2 block

Outline

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-2.json

v-button-3 block

Secondary

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-3.json

v-button-4 block

Destructive

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-4.json

v-button-5 block

Destructive Outline

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-5.json

v-button-6 block

Ghost

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-6.json

v-button-7 block

Link

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-7.json

v-button-8 block

Extra-small Size

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-8.json

v-button-9 block

Small Size

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-9.json

v-button-10 block

Large Size

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-10.json

v-button-11 block

Extra-large Size

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-11.json

v-button-12 block

Disabled

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-12.json

v-button-13 block

Icon

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-13.json

v-button-14 block

Button with an icon on the right

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-14.json

v-button-15 block

Button with an icon on the left

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-15.json

v-button-16 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 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 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 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 block

Star button with count

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-20.json

v-button-21 block

Button with an unread badge

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-21.json

v-button-22 block

Button with icon, label, and shortcut keys

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-22.json

v-button-23 block

Icon-only copy button with feedback

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-23.json

v-button-24 block

Animated hamburger / close toggle button

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-24.json

v-button-25 block

Sliding Icon Button (Hover reveal)

npx shadcn@latest add https://ui.cnippet.dev/r/v-button-25.json

v-button-26 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 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 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 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 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 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-1.json

v-calendar-2 block

Fallback Only

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-2.json

v-calendar-3 block

Different Sizes

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-3.json

v-calendar-4 block

Dropdown Navigation

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-4.json

v-calendar-5 block

Custom Select Dropdown

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-5.json

v-calendar-6 block

Custom Combobox Dropdown

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-6.json

v-calendar-7 block

Multiple Selection

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-7.json

v-calendar-8 block

Appointment Booking

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-8.json

v-calendar-9 block

Two-Month Range Picker

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-9.json

v-calendar-10 block

Event Indicators

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-10.json

v-calendar-11 block

Date Picker with Presets

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-11.json

v-calendar-12 block

Date of Birth

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-12.json

v-calendar-13 block

Week Picker

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-13.json

v-calendar-14 block

Basic calendar

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-14.json

v-calendar-15 block

Basic calendar

npx shadcn@latest add https://ui.cnippet.dev/r/v-calendar-15.json

v-calendar-16 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 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 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 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 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 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-1.json

v-card-2 block

With Border

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-2.json

v-card-3 block

With Border Separation

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-3.json

v-card-4 block

With Link

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-4.json

v-card-5 block

With Dropdown Menu

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-5.json

v-card-6 block

With Image

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-6.json

v-card-7 block

With Image Scale Hover Effect

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-7.json

v-card-8 block

With Image and Shadow Fade Effect

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-8.json

v-card-9 block

With Stacked depth Effect

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-9.json

v-card-10 block

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-10.json

v-card-11 block

Expandable Content Card

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-11.json

v-card-12 block

With Overflow Menu

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-12.json

v-card-13 block

With Header Badge & Actions

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-13.json

v-card-14 block

With Icon, Title and Link

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-14.json

v-card-15 block

With Header Label and Link

npx shadcn@latest add https://ui.cnippet.dev/r/v-card-15.json

v-card-16 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 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 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 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 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 block

Default

npx shadcn@latest add https://ui.cnippet.dev/r/v-carousel-1.json

v-carousel-2 block

Multiple Items

npx shadcn@latest add https://ui.cnippet.dev/r/v-carousel-2.json

v-carousel-3 block

Custom Spacing

npx shadcn@latest add https://ui.cnippet.dev/r/v-carousel-3.json

v-carousel-4 block

Vertical Orientation

npx shadcn@latest add https://ui.cnippet.dev/r/v-carousel-4.json