Atoms (components/atoms/)
Primitive UI elements — the smallest reusable building blocks. Built on Radix UI primitives and styled with Tailwind CSS + class-variance-authority.
Components
| Component | Description |
|---|---|
button.tsx | Button with variants: default, destructive, outline, secondary, ghost, link. Multiple sizes. |
card.tsx | Card container with header, content, footer sections. |
checkbox.tsx | Checkbox with Radix UI accessibility. |
input.tsx | Text input field. |
knob.tsx | Rotary knob control — drag to set value. Used for sends, pan, and macro controls. |
label.tsx | Form label. |
menubar.tsx | Top-level menu bar with dropdowns. |
onoff.tsx | Simple on/off toggle indicator. |
select.tsx | Dropdown select with Radix UI — search, scroll, option groups. |
separator.tsx | Visual divider. |
sheet.tsx | Slide-out sheet panel (Radix Dialog). |
sidebar.tsx | Collapsible sidebar navigation. |
skeleton.tsx | Loading placeholder skeleton. |
slider.tsx | Linear slider control. |
sliderBig.tsx | Large-format slider (volume faders). |
switch.tsx | Toggle switch. |
tabs.tsx | Tab navigation (Radix Tabs). |
textarea.tsx | Multi-line text input. |
toast.tsx / toaster.tsx | Toast notifications (Radix Toast). |
toggle.tsx / togglegroup.tsx | Toggle button and toggle groups. |
tooltip.tsx / tooltipAtom.tsx | Hover tooltips (Radix Tooltip). |
Design Conventions
- CVA variants — Use
cva()to define visual variants (size, color, state). Don’t hardcode conditional classes. - Radix primitives — Use Radix for accessibility (keyboard nav, ARIA, focus management). Don’t reimplement.
forwardRef— All atoms useReact.forwardReffor composability.- Tailwind-only — No CSS files per component. All styles via Tailwind utility classes.
- Barrel export —
index.tsre-exports all atoms for clean imports:import { Button } from '@/components/atoms'.