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.
`RotaryKnob.tsx`	Premium rotary knob with arc visualization, value labels, and color theming. Used across all stock plugin UIs for consistent look-and-feel.
`ADSRView.tsx`	Interactive ADSR envelope editor with draggable handles for attack, decay, sustain, and release. Used in synth plugin UIs.
`AudioWaveform.tsx`	Audio waveform display component for rendering audio clip peaks.
`SessionClipSlot.tsx`	Clip slot component for session/performance view — displays clip state and triggers playback.
`CodeEditor.tsx`	CodeMirror-based text editor with syntax highlighting. Used by ScriptFX editor and BirdFilePanel.
`BirdIcon.tsx`	Songbird logo/icon component.
`IconButton.tsx`	Square icon button with size variants (`xs`/`sm`/`md`), active state, and an optional `tooltip` prop that wraps in `TooltipAtom`. The canonical primitive for panel chrome — toolbars, panel headers, breadcrumb actions, row hover affordances.
`ChatIcons.tsx`	Icon set for the AI chat interface.
`PluginDivider.tsx`	Visual divider for plugin UI section separation.
`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 use React.forwardRef for composability.
Tailwind-only — No CSS files per component. All styles via Tailwind utility classes.
Barrel export — index.ts re-exports all atoms for clean imports: import { Button } from '@/components/atoms'.

Architecture

State & Data

Components

Atoms (`components/atoms/`)

Atoms (`components/atoms/`)

Components

Design Conventions

​Atoms (components/atoms/)

​Components

​Design Conventions

Atoms (`components/atoms/`)

Components

Design Conventions