ActiveFeaturedComponent library (general)2,068
@diceui
Component library (general) · MIT · data updated 2026-09-05
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.
accessibilityanimationaudiocardscomponentsdashboarddesign-systemformshooksiconsloadersmedianavigationonboardingoverlaystablestheming
Install
npx shadcn@latest add https://diceui.com/r/registry/registry.jsonHealth
StatusActive
Last commit1 day ago
LicenseMIT
Open issues67
ArchivedNo
Stars2,068
Components (246)
action-barangle-slideravatar-groupbadge-overflowbannercheckbox-groupcircular-progresscolor-pickercolor-swatchcompare-slidercroppercomboboxeditablefile-uploadfpsgaugekanbankey-valuelistboxmarqueemask-inputmasonrymedia-playermentionphone-inputpresentationrelative-time-cardresponsive-dialogscrollerscroll-spysegmented-inputselection-toolbarsortablespeed-dialstackstatstatusstepperswapqr-coderatingtags-inputtimelinetime-pickertouraction-bar-demoaction-bar-position-demoangle-slider-demoangle-slider-controlled-demoangle-slider-range-demoangle-slider-themes-demoangle-slider-form-demoavatar-group-demoavatar-group-truncation-demoavatar-group-rtl-demoavatar-group-icons-demoavatar-group-custom-overflow-demobadge-overflow-demobadge-overflow-multiline-demobadge-overflow-interactive-demo
Components: action-bar, angle-slider, avatar-group, badge-overflow, banner, checkbox-group, circular-progress, color-picker, color-swatch, compare-slider, cropper, combobox, editable, file-upload, fps, gauge, kanban, key-value, listbox, marquee, mask-input, masonry, media-player, mention, phone-input, presentation, relative-time-card, responsive-dialog, scroller, scroll-spy, segmented-input, selection-toolbar, sortable, speed-dial, stack, stat, status, stepper, swap, qr-code, rating, tags-input, timeline, time-picker, tour, action-bar-demo, action-bar-position-demo, angle-slider-demo, angle-slider-controlled-demo, angle-slider-range-demo, angle-slider-themes-demo, angle-slider-form-demo, avatar-group-demo, avatar-group-truncation-demo, avatar-group-rtl-demo, avatar-group-icons-demo, avatar-group-custom-overflow-demo, badge-overflow-demo, badge-overflow-multiline-demo, badge-overflow-interactive-demo, banner-demo, banner-stacked-demo, checkbox-group-demo, checkbox-group-animated-demo, checkbox-group-horizontal-demo, checkbox-group-multi-selection-demo, checkbox-group-validation-demo, circular-progress-demo, circular-progress-interactive-demo, circular-progress-colors-demo, color-picker-demo, color-picker-controlled-demo, color-picker-form-demo, color-picker-inline-demo, color-swatch-demo, color-swatch-sizes-demo, color-swatch-transparency-demo, combobox-demo, combobox-custom-filter-demo, combobox-debounced-demo, combobox-groups-demo, combobox-multiple-demo, combobox-tags-demo, combobox-virtualized-demo, compare-slider-demo, compare-slider-controlled-demo, compare-slider-customization-demo, compare-slider-vertical-demo, cropper-demo, cropper-controlled-demo, cropper-file-upload-demo, cropper-shapes-demo, cropper-video-demo, data-grid-demo, data-table-demo, editable-demo, editable-autosize-demo, editable-double-click-demo, editable-form-demo, editable-todo-list-demo, file-upload-demo, file-upload-chat-input-demo, file-upload-circular-progress-demo, file-upload-direct-upload-demo, file-upload-fill-progress-demo, file-upload-form-demo, file-upload-uploadthing-demo, file-upload-validation-demo, fps-demo, fps-strategy-demo, gauge-demo, gauge-sizes-demo, gauge-colors-demo, gauge-variants-demo, hitbox-demo, hitbox-sizes-demo, hitbox-positions-demo, hitbox-radii-demo, hitbox-debug-demo, segmented-input-demo, selection-toolbar-demo, selection-toolbar-info-demo, segmented-input-form-demo, segmented-input-rgb-demo, segmented-input-vertical-demo, marquee-demo, marquee-logo-demo, marquee-vertical-demo, marquee-rtl-demo, mask-input-demo, mask-input-custom-pattern-demo, mask-input-validation-modes-demo, mask-input-card-information-demo, mask-input-form-demo, kanban-demo, kanban-dynamic-overlay-demo, key-value-demo, key-value-form-demo, key-value-validation-demo, key-value-paste-demo, listbox-demo, listbox-grid-demo, listbox-group-demo, listbox-horizontal-demo, masonry-demo, masonry-linear-demo, masonry-ssr-demo, media-player-demo, media-player-audio-demo, media-player-error-demo, media-player-hls-demo, media-player-playlist-demo, media-player-settings-demo, mention-demo, mention-custom-filter-demo, mention-custom-trigger-demo, phone-input-demo, phone-input-form-demo, phone-input-custom-countries-demo, presentation-demo, presentation-editing-demo, qr-code-demo, qr-code-customization-demo, qr-code-formats-demo, qr-code-overlay-demo, rating-demo, rating-themes-demo, rating-controlled-demo, rating-form-demo, relative-time-card-demo, relative-time-card-timezones-demo, relative-time-card-variants-demo, responsive-dialog-demo, responsive-dialog-confirm-demo, scroller-demo, scroller-hidden-demo, scroller-horizontal-demo, scroller-navigation-demo, scroll-spy-demo, scroll-spy-controlled-demo, scroll-spy-vertical-demo, sortable-demo, sortable-dynamic-overlay-demo, sortable-handle-demo, sortable-primitive-values-demo, speed-dial-demo, speed-dial-controlled-demo, speed-dial-side-demo, speed-dial-labels-demo, speed-dial-hover-demo, stack-demo, stack-no-expand-demo, stack-side-demo, stat-demo, stat-variants-demo, stat-layout-demo, pending-demo, pending-wrapper-demo, pending-form-demo, pending-link-demo, pending-switch-demo, status-demo, status-variants-demo, status-text-only-demo, status-list-demo, stepper-demo, swap-demo, swap-animations-demo, stepper-form-demo, stepper-validation-demo, stepper-vertical-demo, tags-input-demo, tags-input-editable-demo, tags-input-sortable-demo, tags-input-validation-demo, time-picker-demo, time-picker-step-demo, time-picker-seconds-demo, time-picker-placeholder-demo, time-picker-open-on-focus-demo, time-picker-input-group-click-action-demo, time-picker-controlled-demo, time-picker-form-demo, timeline-demo, timeline-horizontal-demo, timeline-rtl-demo, timeline-alternate-demo, timeline-horizontal-alternate-demo, timeline-custom-dot-demo, tour-demo, tour-controlled-demo, utils, compose-refs, client-only, direction-provider, hitbox, portal, pending, presence, presentation-zoom-select, visually-hidden, visually-hidden-input, use-as-ref, use-isomorphic-layout-effect, use-lazy-ref, use-mobilePreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.