Hyper-dense UI components for people who actually need to get things done.
Documentation • Installation • Themes • Components
A React component library for building dense, professional interfaces like those found in Photoshop, Blender, VS Code, and other tools where screen real estate is precious and every pixel earns its keep.
Not everything needs to be a big, friendly button with 48px of padding. Sometimes you need 47 controls visible at once. We don't judge.
- Compact by default — Designed for information-dense interfaces
- 17 themes — From Photoshop dark to Windows 95 (yes, really)
- Radix primitives — Accessible, unstyled foundations
- Tailwind CSS — Utility-first styling with CSS variables
- TypeScript — Full type safety
- Themeable — Swap themes at runtime via
data-theme
# Install the package
npm install @chadcn/ui
# Or use the CLI to add components individually
npx chadcn init
npx chadcn add panel toolbar sliderimport { Panel, PropertyRow, NumberSpinner, Slider } from '@chadcn/ui';
import '@chadcn/ui/styles.css';
function TransformPanel() {
return (
<Panel title="Transform" collapsible>
<PropertyRow label="Position X">
<NumberSpinner defaultValue={0} suffix="px" />
</PropertyRow>
<PropertyRow label="Position Y">
<NumberSpinner defaultValue={0} suffix="px" />
</PropertyRow>
<PropertyRow label="Rotation">
<Slider defaultValue={0} max={360} suffix="°" />
</PropertyRow>
</Panel>
);
}Set a theme on your root element:
<html data-theme="photoshop">| Theme | Description |
|---|---|
photoshop |
Adobe Photoshop-inspired dark |
blender |
Blender 3D darker theme |
gimp |
GIMP-inspired dark |
vscode |
Visual Studio Code dark |
| Theme | Description |
|---|---|
dracula |
Popular purple-accented dark theme |
nord |
Arctic, bluish palette |
cyberpunk |
Neon pink and cyan |
synthwave |
Retro 80s purple and pink |
coffee |
Warm coffee browns |
sunset |
Orange and purple gradient |
aqua |
Ocean blue-green |
retro |
Warm cream and brown |
| Theme | Description |
|---|---|
win95 |
Windows 95/98 with 3D beveled controls |
winxp |
Windows XP Luna Blue |
macos9 |
Mac OS 9 Platinum |
| Theme | Description |
|---|---|
light |
Light theme |
high-contrast |
Maximum contrast |
- Panel — Collapsible container with header
- Toolbar — Horizontal/vertical toolbar with toggle groups
- PropertyRow — Label + control pairs for property panels
- Input — Compact text input
- NumberSpinner — Numeric input with scrubbing support
- Slider — Range slider with optional value input
- ColorInput — Color picker with presets
- Checkbox — Compact checkbox
- Switch — Toggle switch
- Select — Dropdown select
- TreeView — Hierarchical list (layers panel style)
- Tabs — Tabbed interface with multiple variants
- Accordion — Collapsible sections
- ContextMenu — Right-click menus
- Tooltip — Hover tooltips
- Button — Compact buttons with variants
- ScrollArea — Custom scrollbars
- Separator — Dividers
# Install dependencies
pnpm install
# Start Storybook
pnpm storybook
# Build
pnpm build
# Lint
pnpm lintProfessional tools have dense interfaces for a reason — experts need information and controls at their fingertips, not hidden behind three clicks and a hamburger menu.
This library provides the building blocks for interfaces that respect your users' expertise.
Inspired by shadcn/ui, built on Radix, styled with Tailwind CSS.
Windows 95/98 theme colors referenced from 98.css by Jordan Scales.
MIT © kadajett