Skip to content
NewQuery Builder and Presentation

Composable components
for shadcn/ui

Accessible components built with React, TypeScript and Tailwind CSS. Copy-paste ready and fully customizable.

Get startedView components
Backlog4
DesignA11yKeyboardRTL+99
DesignA11yKeyboard
DUI-241
Add keyboard support to the angle slider
AMJSKO
API+99
API
DUI-238
Expose controlled value on the tour
JS
Docs+99
Docs
DUI-234
Document the query builder output options
KO
Bug+99
Bug
DUI-231
Badge overflow hides the last chip on narrow rows
RT
THE CATALOG

Components for the parts nobody wants to build.

Action BarAct on a selectionNEW
GaugeShow a value against a range
File UploadDrop, track and remove files
Color PickerPick from the area or type a hex
StepperGuide users step by step
Command StackNested pages in one paletteNEW
Data GridEdit cells from the keyboard
THE SOURCE

Copied into your project.
Yours to customize.

  • Every state covered

    Hover, focus, disabled, empty and error states are all styled. Keyboard navigation, RTL and screen reader support work out of the box.

  • Built from parts

    Every part works controlled or uncontrolled and takes a render prop or asChild, so you can extend or replace any piece.

  • Base UI or Radix UI

    Pick the primitive library that matches your app. Component names, props and styles stay the same either way.

components/task-actions.tsx
import {  ActionBar,  ActionBarGroup,  ActionBarItem,} from "@/components/ui/action-bar"; return (  <ActionBar open={open} onOpenChange={setOpen}>    <ActionBarGroup>      <ActionBarItem onSelect={onAssign}>        <UserPlus />        Assign      </ActionBarItem>    </ActionBarGroup>  </ActionBar>);