Quantumblack Design System Registry
designsystem.quantumblack.comFreemanifest served live
A shadcn-based component library for the QuantumBlack Design System (QBDS). Open Source. Open Code.
Items
47
2026-08-03Every entry in its own registry.json, counted last night.Free to install
47
2026-08-03Item endpoints that returned source without credentials.Behind a key
0
2026-08-03Item endpoints that answered 401.Last push
4 days ago
46 stars. Both figures are GitHub's about this repository, not ones this index measured.Components
Search withinFreeits item endpoint answered without a keyPaidits item endpoint answered 401Unverifiedit serves no item endpoint we could ask
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | Vertical stack of expand/collapse rows for progressively disclosing grouped content. Defaults to regular size with chevron on the right. | Components | Free | 1 dep | |
| Alertalert | Displays contextual messages with two layouts (modal, long). Compose with AlertIcon, AlertContent, AlertTitle, AlertDescription, and optional AlertClose. | Components | Free | no deps | |
| Aspect Ratioaspect-ratio | Constrains content to a fixed width-to-height ratio — ideal for images, video placeholders, and media cards. | Components | Free | 1 dep | |
| Avataravatar | An avatar component with support for images and tooltips. | Components | Free | 1 dep | |
| Badgebadge | A badge component. | Components | Free | 1 dep | |
| Buttonbutton | Allows users to take actions with a single click or tap. | Components | Free | 1 dep | |
| Button Groupbutton-group | Groups related buttons together with a constant 12px QBDS gap. Supports horizontal and vertical orientation. | Components | Free | 1 dep | |
| Calendarcalendar | A date picker component built with react-day-picker. | Components | Free | 2 deps | |
| Cardcard | A card component. | Components | Free | no deps | |
| Checkboxcheckbox | Allows users to select multiple items from a list of options. | Components | Free | 1 dep | |
| Comboboxcombobox | Autocomplete input with a list of suggestions. Supports sizes (sm, default, lg), inline variant, and input group addons. | Components | Free | 1 dep | |
| Context Menucontext-menu | A menu triggered by a right-click (or long-press) on a target element. Supports items, checkboxes, radio groups, submenus, shortcuts, and destructive actions. | Components | Free | 1 dep · 2 files | |
| Date Pickerdate-picker | Date picker examples with input integration for single date and date range selection. The Date Picker is built using a composition of the <Popover />, <Input /> and the <Calendar /> components. | Components | Free | 2 deps | |
| Dialogdialog | A dialog component. | Components | Free | 1 dep | |
| Dropdown Menudropdown-menu | A contextual menu triggered by a button. Supports items, checkboxes, radio groups, submenus, shortcuts, and destructive actions. | Components | Free | 1 dep · 2 files | |
| Fieldfield | Composable form field elements — label, help text, error feedback, and layout primitives (FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldContent, FieldTitle, FieldDescription, FieldError). | Components | Free | 1 dep | |
| Iconicon | Material Symbols Sharp icon via variable font. Optical-size-matched per QBDS size (sm/default/lg). | Components | Free | no deps | |
| Icon Shellicon-shell | Wraps Icon with QBDS size, tone, and opacity. variant for static icons; hoverable for icon-only buttons. disabled overrides styling. | Components | Free | 1 dep | |
| Inputinput | A text input field with support for variants (default, inline) and sizes (small, default, large). | Components | Free | no deps | |
| Input Groupinput-group | A composite input component with support for icons, buttons, and text addons. | Components | Free | no deps | |
| Labellabel | A component that displays a label for form elements. | Components | Free | no deps | |
| Popoverpopover | A popover component. | Components | Free | 1 dep | |
| Radio Groupradio-group | A radio group component. | Components | Free | 2 deps | |
| Scroll Areascroll-area | A scrollable viewport with custom scrollbars, built on Radix Scroll Area primitives. | Components | Free | 1 dep | |
| Segmented Controlssegmented-controls | Single-select segmented control with secondary-filled and ghost variants across four sizes. | Components | Free | 1 dep | |
| Selectselect | A select component with single and multiple selection support. | Components | Free | 1 dep | |
| Separatorseparator | A visual divider that separates content. Supports horizontal and vertical orientation. | Components | Free | 1 dep | |
| Sheetsheet | Slide-over panel built on Radix Dialog. Used by Sidebar on mobile. | Components | Free | 1 dep | |
| Sidebarsidebar | Composable sidebar with collapsible sections, mobile sheet, and icon mode. shadcn API. | Components | Free | 3 deps · 2 files | |
| Skeletonskeleton | Placeholder loading state. Used by Sidebar. | Components | Free | no deps | |
| Sliderslider | An input where the user selects a value from within a given range. | Components | Free | 1 dep | |
| Sonnersonner | A toast notification component. | Components | Free | 2 deps | |
| Switchswitch | A switch component. | Components | Free | 1 dep | |
| Tabletable | A responsive table component. | Components | Free | no deps | |
| Tabstabs | A responsive tabs component. | Components | Free | 1 dep | |
| Tagtag | A dismissable tag with icons, variants (primary, secondary, accent, outline, accent-outline), pill shape, and sizes. Leading IconShell color is consumer-managed via tagIconTone (secondary → neutral-inverse). | Components | Free | no deps | |
| Tag Toggletag-toggle | A toggleable tag with icons, pill shape, and sizes. Built on Base UI Toggle. | Components | Free | 1 dep | |
| Textareatextarea | Displays a form textarea or a component that looks like a textarea. | Components | Free | no deps | |
| Time Inputtime-input | Custom time input with composable segment-based hh:mm entry, keyboard navigation, and clock icon trigger. Exports TimeInputRoot, TimeSegmentInput, TimeSeparator, TimeInputTrigger, and TimeInput convenience wrapper. | Components | Free | no deps · 2 files | |
| Time Pickertime-picker | Individual components for building time picker interfaces. Includes TimePickerItem (radio list item) and TimePickerList (scrollable list) with size support (sm, default, lg). | Components | Free | no deps · 2 files | |
| Toggletoggle | A toggle component. | Components | Free | 1 dep | |
| Toolbartoolbar | Groups icon-only controls with keyboard navigation. Defaults to an unboxed horizontal layout; also supports optional boxed containers, vertical orientation, circle and square shapes, and sm, reg, and lg sizes. | Components | Free | 1 dep | |
| Tooltiptooltip | A component that displays informative text when users hover over an element. | Components | Free | 1 dep |
Themes
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Global Themetheme | Brand themed styles using Tailwind and Shadcn/ui | Themes | Free | no deps |
Utilities
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| QBDS Utilitiesutils | Tailwind class merge with QBDS typography class-group support. | Utilities | Free | 2 deps |
Examples
Search within| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Formform | Form recipes built on the Field primitive. Includes a React Hook Form + zod example (stacked layout) and a TanStack Form + zod example (inline layout) with header, sectioned fields (text, date, time, textarea, checkboxes), and submit/cancel actions. | Examples | Free | 5 deps · 2 files | |
| Tag Grouptag-group | Examples of grouped tags — dismissable, with avatars, and toggleable — across sizes, shapes, and outlines. | Examples | Free | no deps |
