> ## Documentation Index
> Fetch the complete documentation index at: https://songbird.studiocollective.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Atoms (`components/atoms/`)

# Atoms (`components/atoms/`)

Primitive UI elements — the smallest reusable building blocks. Built on [Radix UI](https://radix-ui.com/) primitives and styled with Tailwind CSS + [`class-variance-authority`](https://cva.style/).

## 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'`.