---
name: "@diceui"
slug: "diceui"
description: "Dice UI is an accessible shadcn/ui extension built with Radix UI primitives, React, TypeScript, and Tailwind CSS. It ships ~40 advanced components not found in the base shadcn set, including action-bar, angle-slider, avatar-group, badge-overflow, color-picker, color-swatch, combobox, compare-slider, cropper, data-grid, data-table, editable, file-upload, gauge, kanban, listbox, marquee, mask-input, masonry, media-player, mention, phone-input, QR-code, rating, responsive-dialog, scroll-spy, segmented-input, selection-toolbar, sortable, speed-dial, stepper, tags-input, time-picker, timeline, and tour. Also includes utility components (client-only, hitbox, portal, presence). All components are copy-paste installable via the shadcn CLI. Use for: filling gaps in a shadcn/ui project where complex interactive primitives like kanban boards, media players, sortable lists, or color pickers are needed without adopting a full third-party library."
category: "Component library (general)"
tags: ["accessibility", "animation", "audio", "cards", "components", "dashboard", "design-system", "forms", "hooks", "icons", "loaders", "media", "navigation", "onboarding", "overlays", "tables", "theming"]
framework: "react"
license: "MIT"
author: "sadmann7"
website: "https://www.diceui.com/"
github: "https://github.com/sadmann7/diceui"
registry: "https://diceui.com/r/registry/registry.json"
pro: false
pro_url: null
github_stars: 2026
component_count: 242
generated_at: "2026-07-28T08:00:50.948Z"
---

# @diceui

Dice UI is an accessible shadcn/ui extension built with Radix UI primitives, React, TypeScript, and Tailwind CSS. It ships ~40 advanced components not found in the base shadcn set, including action-bar, angle-slider, avatar-group, badge-overflow, color-picker, color-swatch, combobox, compare-slider, cropper, data-grid, data-table, editable, file-upload, gauge, kanban, listbox, marquee, mask-input, masonry, media-player, mention, phone-input, QR-code, rating, responsive-dialog, scroll-spy, segmented-input, selection-toolbar, sortable, speed-dial, stepper, tags-input, time-picker, timeline, and tour. Also includes utility components (client-only, hitbox, portal, presence). All components are copy-paste installable via the shadcn CLI. Use for: filling gaps in a shadcn/ui project where complex interactive primitives like kanban boards, media players, sortable lists, or color pickers are needed without adopting a full third-party library.

## Links

- Website: https://www.diceui.com/
- GitHub: https://github.com/sadmann7/diceui
- Registry JSON: https://diceui.com/r/registry/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/diceui
- This file: https://sh4dcn.vercel.app/md/diceui.md

## Install

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

## Components (242)

| name | type | description | install |
| --- | --- | --- | --- |
| action-bar | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/action-bar.json` |
| angle-slider | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/angle-slider.json` |
| avatar-group | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/avatar-group.json` |
| badge-overflow | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/badge-overflow.json` |
| banner | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/banner.json` |
| checkbox-group | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/checkbox-group.json` |
| circular-progress | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/circular-progress.json` |
| color-picker | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-picker.json` |
| color-swatch | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-swatch.json` |
| compare-slider | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/compare-slider.json` |
| cropper | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/cropper.json` |
| combobox | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/combobox.json` |
| editable | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/editable.json` |
| file-upload | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload.json` |
| fps | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/fps.json` |
| gauge | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/gauge.json` |
| kanban | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/kanban.json` |
| key-value | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/key-value.json` |
| listbox | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/listbox.json` |
| marquee | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/marquee.json` |
| mask-input | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/mask-input.json` |
| masonry | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/masonry.json` |
| media-player | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/media-player.json` |
| mention | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/mention.json` |
| phone-input | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/phone-input.json` |
| relative-time-card | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/relative-time-card.json` |
| responsive-dialog | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/responsive-dialog.json` |
| scroller | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroller.json` |
| scroll-spy | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroll-spy.json` |
| segmented-input | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/segmented-input.json` |
| selection-toolbar | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/selection-toolbar.json` |
| sortable | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/sortable.json` |
| speed-dial | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/speed-dial.json` |
| stack | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/stack.json` |
| stat | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/stat.json` |
| status | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/status.json` |
| stepper | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/stepper.json` |
| swap | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/swap.json` |
| qr-code | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/qr-code.json` |
| rating | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/rating.json` |
| tags-input | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/tags-input.json` |
| timeline | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/timeline.json` |
| time-picker | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker.json` |
| tour | registry:ui | — | `npx shadcn@latest add https://diceui.com/r/{style}/tour.json` |
| action-bar-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/action-bar-demo.json` |
| action-bar-position-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/action-bar-position-demo.json` |
| angle-slider-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-demo.json` |
| angle-slider-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-controlled-demo.json` |
| angle-slider-range-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-range-demo.json` |
| angle-slider-themes-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-themes-demo.json` |
| angle-slider-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-form-demo.json` |
| avatar-group-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-demo.json` |
| avatar-group-truncation-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-truncation-demo.json` |
| avatar-group-rtl-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-rtl-demo.json` |
| avatar-group-icons-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-icons-demo.json` |
| avatar-group-custom-overflow-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-custom-overflow-demo.json` |
| badge-overflow-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/badge-overflow-demo.json` |
| badge-overflow-multiline-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/badge-overflow-multiline-demo.json` |
| badge-overflow-interactive-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/badge-overflow-interactive-demo.json` |
| banner-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/banner-demo.json` |
| banner-stacked-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/banner-stacked-demo.json` |
| checkbox-group-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/checkbox-group-demo.json` |
| checkbox-group-animated-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/checkbox-group-animated-demo.json` |
| checkbox-group-horizontal-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/checkbox-group-horizontal-demo.json` |
| checkbox-group-multi-selection-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/checkbox-group-multi-selection-demo.json` |
| checkbox-group-validation-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/checkbox-group-validation-demo.json` |
| circular-progress-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/circular-progress-demo.json` |
| circular-progress-interactive-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/circular-progress-interactive-demo.json` |
| circular-progress-colors-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/circular-progress-colors-demo.json` |
| color-picker-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-picker-demo.json` |
| color-picker-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-picker-controlled-demo.json` |
| color-picker-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-picker-form-demo.json` |
| color-picker-inline-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-picker-inline-demo.json` |
| color-swatch-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-swatch-demo.json` |
| color-swatch-sizes-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-swatch-sizes-demo.json` |
| color-swatch-transparency-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/color-swatch-transparency-demo.json` |
| combobox-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/combobox-demo.json` |
| combobox-custom-filter-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/combobox-custom-filter-demo.json` |
| combobox-debounced-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/combobox-debounced-demo.json` |
| combobox-groups-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/combobox-groups-demo.json` |
| combobox-multiple-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/combobox-multiple-demo.json` |
| combobox-tags-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/combobox-tags-demo.json` |
| combobox-virtualized-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/combobox-virtualized-demo.json` |
| compare-slider-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/compare-slider-demo.json` |
| compare-slider-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/compare-slider-controlled-demo.json` |
| compare-slider-customization-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/compare-slider-customization-demo.json` |
| compare-slider-vertical-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/compare-slider-vertical-demo.json` |
| cropper-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/cropper-demo.json` |
| cropper-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/cropper-controlled-demo.json` |
| cropper-file-upload-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/cropper-file-upload-demo.json` |
| cropper-shapes-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/cropper-shapes-demo.json` |
| cropper-video-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/cropper-video-demo.json` |
| data-grid-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/data-grid-demo.json` |
| data-table-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/data-table-demo.json` |
| editable-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/editable-demo.json` |
| editable-autosize-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/editable-autosize-demo.json` |
| editable-double-click-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/editable-double-click-demo.json` |
| editable-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/editable-form-demo.json` |
| editable-todo-list-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/editable-todo-list-demo.json` |
| file-upload-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload-demo.json` |
| file-upload-chat-input-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload-chat-input-demo.json` |
| file-upload-circular-progress-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload-circular-progress-demo.json` |
| file-upload-direct-upload-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload-direct-upload-demo.json` |
| file-upload-fill-progress-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload-fill-progress-demo.json` |
| file-upload-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload-form-demo.json` |
| file-upload-uploadthing-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload-uploadthing-demo.json` |
| file-upload-validation-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/file-upload-validation-demo.json` |
| fps-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/fps-demo.json` |
| fps-strategy-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/fps-strategy-demo.json` |
| gauge-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/gauge-demo.json` |
| gauge-sizes-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/gauge-sizes-demo.json` |
| gauge-colors-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/gauge-colors-demo.json` |
| gauge-variants-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/gauge-variants-demo.json` |
| hitbox-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/hitbox-demo.json` |
| hitbox-sizes-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/hitbox-sizes-demo.json` |
| hitbox-positions-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/hitbox-positions-demo.json` |
| hitbox-radii-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/hitbox-radii-demo.json` |
| hitbox-debug-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/hitbox-debug-demo.json` |
| segmented-input-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/segmented-input-demo.json` |
| selection-toolbar-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/selection-toolbar-demo.json` |
| selection-toolbar-info-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/selection-toolbar-info-demo.json` |
| segmented-input-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/segmented-input-form-demo.json` |
| segmented-input-rgb-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/segmented-input-rgb-demo.json` |
| segmented-input-vertical-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/segmented-input-vertical-demo.json` |
| marquee-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/marquee-demo.json` |
| marquee-logo-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/marquee-logo-demo.json` |
| marquee-vertical-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/marquee-vertical-demo.json` |
| marquee-rtl-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/marquee-rtl-demo.json` |
| mask-input-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/mask-input-demo.json` |
| mask-input-custom-pattern-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/mask-input-custom-pattern-demo.json` |
| mask-input-validation-modes-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/mask-input-validation-modes-demo.json` |
| mask-input-card-information-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/mask-input-card-information-demo.json` |
| mask-input-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/mask-input-form-demo.json` |
| kanban-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/kanban-demo.json` |
| kanban-dynamic-overlay-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/kanban-dynamic-overlay-demo.json` |
| key-value-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/key-value-demo.json` |
| key-value-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/key-value-form-demo.json` |
| key-value-validation-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/key-value-validation-demo.json` |
| key-value-paste-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/key-value-paste-demo.json` |
| listbox-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/listbox-demo.json` |
| listbox-grid-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/listbox-grid-demo.json` |
| listbox-group-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/listbox-group-demo.json` |
| listbox-horizontal-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/listbox-horizontal-demo.json` |
| masonry-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/masonry-demo.json` |
| masonry-linear-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/masonry-linear-demo.json` |
| masonry-ssr-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/masonry-ssr-demo.json` |
| media-player-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/media-player-demo.json` |
| media-player-audio-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/media-player-audio-demo.json` |
| media-player-error-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/media-player-error-demo.json` |
| media-player-hls-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/media-player-hls-demo.json` |
| media-player-playlist-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/media-player-playlist-demo.json` |
| media-player-settings-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/media-player-settings-demo.json` |
| mention-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/mention-demo.json` |
| mention-custom-filter-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/mention-custom-filter-demo.json` |
| mention-custom-trigger-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/mention-custom-trigger-demo.json` |
| phone-input-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/phone-input-demo.json` |
| phone-input-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/phone-input-form-demo.json` |
| phone-input-custom-countries-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/phone-input-custom-countries-demo.json` |
| qr-code-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/qr-code-demo.json` |
| qr-code-customization-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/qr-code-customization-demo.json` |
| qr-code-formats-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/qr-code-formats-demo.json` |
| qr-code-overlay-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/qr-code-overlay-demo.json` |
| rating-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/rating-demo.json` |
| rating-themes-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/rating-themes-demo.json` |
| rating-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/rating-controlled-demo.json` |
| rating-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/rating-form-demo.json` |
| relative-time-card-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/relative-time-card-demo.json` |
| relative-time-card-timezones-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/relative-time-card-timezones-demo.json` |
| relative-time-card-variants-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/relative-time-card-variants-demo.json` |
| responsive-dialog-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/responsive-dialog-demo.json` |
| responsive-dialog-confirm-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/responsive-dialog-confirm-demo.json` |
| scroller-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroller-demo.json` |
| scroller-hidden-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroller-hidden-demo.json` |
| scroller-horizontal-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroller-horizontal-demo.json` |
| scroller-navigation-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroller-navigation-demo.json` |
| scroll-spy-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroll-spy-demo.json` |
| scroll-spy-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroll-spy-controlled-demo.json` |
| scroll-spy-vertical-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/scroll-spy-vertical-demo.json` |
| sortable-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/sortable-demo.json` |
| sortable-dynamic-overlay-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/sortable-dynamic-overlay-demo.json` |
| sortable-handle-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/sortable-handle-demo.json` |
| sortable-primitive-values-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/sortable-primitive-values-demo.json` |
| speed-dial-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/speed-dial-demo.json` |
| speed-dial-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/speed-dial-controlled-demo.json` |
| speed-dial-side-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/speed-dial-side-demo.json` |
| speed-dial-labels-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/speed-dial-labels-demo.json` |
| speed-dial-hover-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/speed-dial-hover-demo.json` |
| stack-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stack-demo.json` |
| stack-no-expand-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stack-no-expand-demo.json` |
| stack-side-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stack-side-demo.json` |
| stat-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stat-demo.json` |
| stat-variants-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stat-variants-demo.json` |
| stat-layout-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stat-layout-demo.json` |
| pending-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/pending-demo.json` |
| pending-wrapper-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/pending-wrapper-demo.json` |
| pending-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/pending-form-demo.json` |
| pending-link-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/pending-link-demo.json` |
| pending-switch-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/pending-switch-demo.json` |
| status-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/status-demo.json` |
| status-variants-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/status-variants-demo.json` |
| status-text-only-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/status-text-only-demo.json` |
| status-list-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/status-list-demo.json` |
| stepper-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stepper-demo.json` |
| swap-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/swap-demo.json` |
| swap-animations-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/swap-animations-demo.json` |
| stepper-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stepper-form-demo.json` |
| stepper-validation-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stepper-validation-demo.json` |
| stepper-vertical-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/stepper-vertical-demo.json` |
| tags-input-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/tags-input-demo.json` |
| tags-input-editable-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/tags-input-editable-demo.json` |
| tags-input-sortable-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/tags-input-sortable-demo.json` |
| tags-input-validation-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/tags-input-validation-demo.json` |
| time-picker-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker-demo.json` |
| time-picker-step-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker-step-demo.json` |
| time-picker-seconds-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker-seconds-demo.json` |
| time-picker-placeholder-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker-placeholder-demo.json` |
| time-picker-open-on-focus-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker-open-on-focus-demo.json` |
| time-picker-input-group-click-action-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker-input-group-click-action-demo.json` |
| time-picker-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker-controlled-demo.json` |
| time-picker-form-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/time-picker-form-demo.json` |
| timeline-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/timeline-demo.json` |
| timeline-horizontal-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/timeline-horizontal-demo.json` |
| timeline-rtl-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/timeline-rtl-demo.json` |
| timeline-alternate-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/timeline-alternate-demo.json` |
| timeline-horizontal-alternate-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/timeline-horizontal-alternate-demo.json` |
| timeline-custom-dot-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/timeline-custom-dot-demo.json` |
| tour-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/tour-demo.json` |
| tour-controlled-demo | registry:example | — | `npx shadcn@latest add https://diceui.com/r/{style}/tour-controlled-demo.json` |
| utils | registry:lib | — | `npx shadcn@latest add https://diceui.com/r/{style}/utils.json` |
| compose-refs | registry:lib | — | `npx shadcn@latest add https://diceui.com/r/{style}/compose-refs.json` |
| client-only | registry:component | — | `npx shadcn@latest add https://diceui.com/r/{style}/client-only.json` |
| direction-provider | registry:component | — | `npx shadcn@latest add https://diceui.com/r/{style}/direction-provider.json` |
| hitbox | registry:component | — | `npx shadcn@latest add https://diceui.com/r/{style}/hitbox.json` |
| portal | registry:component | — | `npx shadcn@latest add https://diceui.com/r/{style}/portal.json` |
| pending | registry:component | — | `npx shadcn@latest add https://diceui.com/r/{style}/pending.json` |
| presence | registry:component | — | `npx shadcn@latest add https://diceui.com/r/{style}/presence.json` |
| visually-hidden | registry:component | — | `npx shadcn@latest add https://diceui.com/r/{style}/visually-hidden.json` |
| visually-hidden-input | registry:component | — | `npx shadcn@latest add https://diceui.com/r/{style}/visually-hidden-input.json` |
| use-as-ref | registry:hook | — | `npx shadcn@latest add https://diceui.com/r/{style}/use-as-ref.json` |
| use-isomorphic-layout-effect | registry:hook | — | `npx shadcn@latest add https://diceui.com/r/{style}/use-isomorphic-layout-effect.json` |
| use-lazy-ref | registry:hook | — | `npx shadcn@latest add https://diceui.com/r/{style}/use-lazy-ref.json` |
| use-mobile | registry:hook | — | `npx shadcn@latest add https://diceui.com/r/{style}/use-mobile.json` |

## For AI agents

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