Skip to main content

​
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

ComponentDescription
button.tsxButton with variants: default, destructive, outline, secondary, ghost, link. Multiple sizes.
card.tsxCard container with header, content, footer sections.
checkbox.tsxCheckbox with Radix UI accessibility.
input.tsxText input field.
knob.tsxRotary knob control — drag to set value. Used for sends, pan, and macro controls.
RotaryKnob.tsxPremium rotary knob with arc visualization, value labels, and color theming. Used across all stock plugin UIs for consistent look-and-feel.
ADSRView.tsxInteractive ADSR envelope editor with draggable handles for attack, decay, sustain, and release. Used in synth plugin UIs.
AudioWaveform.tsxAudio waveform display component for rendering audio clip peaks.
SessionClipSlot.tsxClip slot component for session/performance view — displays clip state and triggers playback.
CodeEditor.tsxCodeMirror-based text editor with syntax highlighting. Used by ScriptFX editor and BirdFilePanel.
BirdIcon.tsxSongbird logo/icon component.
IconButton.tsxSquare 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.tsxIcon set for the AI chat interface.
PluginDivider.tsxVisual divider for plugin UI section separation.
label.tsxForm label.
menubar.tsxTop-level menu bar with dropdowns.
onoff.tsxSimple on/off toggle indicator.
select.tsxDropdown select with Radix UI — search, scroll, option groups.
separator.tsxVisual divider.
sheet.tsxSlide-out sheet panel (Radix Dialog).
sidebar.tsxCollapsible sidebar navigation.
skeleton.tsxLoading placeholder skeleton.
slider.tsxLinear slider control.
sliderBig.tsxLarge-format slider (volume faders).
switch.tsxToggle switch.
tabs.tsxTab navigation (Radix Tabs).
textarea.tsxMulti-line text input.
toast.tsx / toaster.tsxToast notifications (Radix Toast).
toggle.tsx / togglegroup.tsxToggle button and toggle groups.
tooltip.tsx / tooltipAtom.tsxHover 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'.