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

60 components react shadcn-cli MIT

website ↗ github ↗ registry ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://diceui.com/r/registry/registry.json

pnpm pnpm dlx shadcn@latest add https://diceui.com/r/registry/registry.json

bun bunx shadcn@latest add https://diceui.com/r/registry/registry.json

fetch registry curl -s https://diceui.com/r/registry/registry.json

Components

60 total

action-bar ui

npx shadcn@latest add https://diceui.com/r/{style}/action-bar.json

angle-slider ui

npx shadcn@latest add https://diceui.com/r/{style}/angle-slider.json

avatar-group ui

npx shadcn@latest add https://diceui.com/r/{style}/avatar-group.json

badge-overflow ui

npx shadcn@latest add https://diceui.com/r/{style}/badge-overflow.json

banner ui

npx shadcn@latest add https://diceui.com/r/{style}/banner.json

checkbox-group ui

npx shadcn@latest add https://diceui.com/r/{style}/checkbox-group.json

circular-progress ui

npx shadcn@latest add https://diceui.com/r/{style}/circular-progress.json

color-picker ui

npx shadcn@latest add https://diceui.com/r/{style}/color-picker.json

color-swatch ui

npx shadcn@latest add https://diceui.com/r/{style}/color-swatch.json

compare-slider ui

npx shadcn@latest add https://diceui.com/r/{style}/compare-slider.json

cropper ui

npx shadcn@latest add https://diceui.com/r/{style}/cropper.json

combobox ui

npx shadcn@latest add https://diceui.com/r/{style}/combobox.json

editable ui

npx shadcn@latest add https://diceui.com/r/{style}/editable.json

file-upload ui

npx shadcn@latest add https://diceui.com/r/{style}/file-upload.json

fps ui

npx shadcn@latest add https://diceui.com/r/{style}/fps.json

gauge ui

npx shadcn@latest add https://diceui.com/r/{style}/gauge.json

kanban ui

npx shadcn@latest add https://diceui.com/r/{style}/kanban.json

key-value ui

npx shadcn@latest add https://diceui.com/r/{style}/key-value.json

listbox ui

npx shadcn@latest add https://diceui.com/r/{style}/listbox.json

marquee ui

npx shadcn@latest add https://diceui.com/r/{style}/marquee.json

mask-input ui

npx shadcn@latest add https://diceui.com/r/{style}/mask-input.json

masonry ui

npx shadcn@latest add https://diceui.com/r/{style}/masonry.json

media-player ui

npx shadcn@latest add https://diceui.com/r/{style}/media-player.json

mention ui

npx shadcn@latest add https://diceui.com/r/{style}/mention.json

phone-input ui

npx shadcn@latest add https://diceui.com/r/{style}/phone-input.json

relative-time-card ui

npx shadcn@latest add https://diceui.com/r/{style}/relative-time-card.json

responsive-dialog ui

npx shadcn@latest add https://diceui.com/r/{style}/responsive-dialog.json

scroller ui

npx shadcn@latest add https://diceui.com/r/{style}/scroller.json

scroll-spy ui

npx shadcn@latest add https://diceui.com/r/{style}/scroll-spy.json

segmented-input ui

npx shadcn@latest add https://diceui.com/r/{style}/segmented-input.json

selection-toolbar ui

npx shadcn@latest add https://diceui.com/r/{style}/selection-toolbar.json

sortable ui

npx shadcn@latest add https://diceui.com/r/{style}/sortable.json

speed-dial ui

npx shadcn@latest add https://diceui.com/r/{style}/speed-dial.json

stack ui

npx shadcn@latest add https://diceui.com/r/{style}/stack.json

stat ui

npx shadcn@latest add https://diceui.com/r/{style}/stat.json

status ui

npx shadcn@latest add https://diceui.com/r/{style}/status.json

stepper ui

npx shadcn@latest add https://diceui.com/r/{style}/stepper.json

swap ui

npx shadcn@latest add https://diceui.com/r/{style}/swap.json

qr-code ui

npx shadcn@latest add https://diceui.com/r/{style}/qr-code.json

rating ui

npx shadcn@latest add https://diceui.com/r/{style}/rating.json

tags-input ui

npx shadcn@latest add https://diceui.com/r/{style}/tags-input.json

timeline ui

npx shadcn@latest add https://diceui.com/r/{style}/timeline.json

time-picker ui

npx shadcn@latest add https://diceui.com/r/{style}/time-picker.json

tour ui

npx shadcn@latest add https://diceui.com/r/{style}/tour.json

action-bar-demo example

npx shadcn@latest add https://diceui.com/r/{style}/action-bar-demo.json

action-bar-position-demo example

npx shadcn@latest add https://diceui.com/r/{style}/action-bar-position-demo.json

angle-slider-demo example

npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-demo.json

angle-slider-controlled-demo example

npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-controlled-demo.json

angle-slider-range-demo example

npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-range-demo.json

angle-slider-themes-demo example

npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-themes-demo.json

angle-slider-form-demo example

npx shadcn@latest add https://diceui.com/r/{style}/angle-slider-form-demo.json

avatar-group-demo example

npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-demo.json

avatar-group-truncation-demo example

npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-truncation-demo.json

avatar-group-rtl-demo example

npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-rtl-demo.json

avatar-group-icons-demo example

npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-icons-demo.json

avatar-group-custom-overflow-demo example

npx shadcn@latest add https://diceui.com/r/{style}/avatar-group-custom-overflow-demo.json

badge-overflow-demo example

npx shadcn@latest add https://diceui.com/r/{style}/badge-overflow-demo.json

badge-overflow-multiline-demo example

npx shadcn@latest add https://diceui.com/r/{style}/badge-overflow-multiline-demo.json

badge-overflow-interactive-demo example

npx shadcn@latest add https://diceui.com/r/{style}/badge-overflow-interactive-demo.json

banner-demo example

npx shadcn@latest add https://diceui.com/r/{style}/banner-demo.json