shadcn-based design system for the ResQ platform
@resq-sw/ui is a shared React component library built on shadcn/ui primitives with Radix UI, styled via Tailwind CSS v4, and distributed as a fully tree-shakeable ESM package.
- 55 components — accordion, alert, avatar, badge, button, calendar, card, chart, combobox, dialog, drawer, dropdown, input, select, sidebar, table, tabs, tooltip, and more
- Tree-shakeable subpath exports — import only what you use
- Strict TypeScript — full type definitions included
- Storybook — visual testing via Chromatic on every PR
bun add @resq-sw/uiPeer dependencies:
bun add react@^19 react-dom@^19 tailwindcss@^4Import components via subpath exports:
import { Button } from "@resq-sw/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@resq-sw/ui/card";
import { Input } from "@resq-sw/ui/input";Include the global stylesheet in your app entry point:
import "@resq-sw/ui/styles/globals.css";Or use the cn utility directly:
import { cn } from "@resq-sw/ui/lib/utils";| Component | Import |
|---|---|
| Accordion | @resq-sw/ui/accordion |
| Alert | @resq-sw/ui/alert |
| Alert Dialog | @resq-sw/ui/alert-dialog |
| Avatar | @resq-sw/ui/avatar |
| Badge | @resq-sw/ui/badge |
| Breadcrumb | @resq-sw/ui/breadcrumb |
| Button | @resq-sw/ui/button |
| Button Group | @resq-sw/ui/button-group |
| Calendar | @resq-sw/ui/calendar |
| Card | @resq-sw/ui/card |
| Carousel | @resq-sw/ui/carousel |
| Chart | @resq-sw/ui/chart |
| Checkbox | @resq-sw/ui/checkbox |
| Collapsible | @resq-sw/ui/collapsible |
| Combobox | @resq-sw/ui/combobox |
| Command | @resq-sw/ui/command |
| Context Menu | @resq-sw/ui/context-menu |
| Dialog | @resq-sw/ui/dialog |
| Drawer | @resq-sw/ui/drawer |
| Dropdown Menu | @resq-sw/ui/dropdown-menu |
| Empty | @resq-sw/ui/empty |
| Field | @resq-sw/ui/field |
| Hover Card | @resq-sw/ui/hover-card |
| Input | @resq-sw/ui/input |
| Input Group | @resq-sw/ui/input-group |
| Input OTP | @resq-sw/ui/input-otp |
| Item | @resq-sw/ui/item |
| Kbd | @resq-sw/ui/kbd |
| Label | @resq-sw/ui/label |
| Menubar | @resq-sw/ui/menubar |
| Native Select | @resq-sw/ui/native-select |
| Navigation Menu | @resq-sw/ui/navigation-menu |
| Pagination | @resq-sw/ui/pagination |
| Popover | @resq-sw/ui/popover |
| Progress | @resq-sw/ui/progress |
| Radio Group | @resq-sw/ui/radio-group |
| Resizable | @resq-sw/ui/resizable |
| Scroll Area | @resq-sw/ui/scroll-area |
| Select | @resq-sw/ui/select |
| Separator | @resq-sw/ui/separator |
| Sheet | @resq-sw/ui/sheet |
| Sidebar | @resq-sw/ui/sidebar |
| Skeleton | @resq-sw/ui/skeleton |
| Slider | @resq-sw/ui/slider |
| Sonner (Toast) | @resq-sw/ui/sonner |
| Spinner | @resq-sw/ui/spinner |
| Switch | @resq-sw/ui/switch |
| Table | @resq-sw/ui/table |
| Tabs | @resq-sw/ui/tabs |
| Textarea | @resq-sw/ui/textarea |
| Toggle | @resq-sw/ui/toggle |
| Toggle Group | @resq-sw/ui/toggle-group |
| Tooltip | @resq-sw/ui/tooltip |
Browse and interact with all components:
- Latest (master): master--69b2711843dac80a70e4ca83.chromatic.com
- Component library: chromatic.com/library?appId=69b2711843dac80a70e4ca83&branch=master
PR branches are published automatically — swap master for any branch name in the URLs above.
See .github/CONTRIBUTING.md and .github/DEVELOPMENT.md.
bun install
bun run dev # watch mode build
bun run storybook # local storybook at :6006
bun run test # vitest
bun run build # production build → lib/Mike Odnis 💻 🖋 📖 🤔 🚇 🚧 📆 🔧 |