Skills

Teach your AI agent to build with cupertino-ui.

What is a skill?

A skill is a set of instructions an AI coding agent (like Claude Code) loads when it works on a matching task. The cupertino-ui skill teaches the agent how to set up the theme, which tokens and conventions make UIs feel like Apple software, how to compose the components, and which pitfalls to avoid — so you can say “make an Apple-style settings screen” and get idiomatic results.

What the agent learns

Setup order: shadcn init → theme tokens → components, and why the theme must come first
The semantic tokens: label hierarchy, fills, grouped backgrounds, SF type scale, materials
HIG conventions: hairline separators, cursor-default controls, press feedback, dark mode
Composition patterns: settings lists, NavigationStack push flows, macOS window shells, audio playback
Known pitfalls, like the tailwind-merge class-collision issue and the top-edge backdrop-filter bug

Install into a project (recommended)

Installs the skill files into .claude/skills/cupertino-ui/ in your repo, so every agent session in the project picks it up:

npx shadcn@latest add https://cupertino-ui.baltoon.jp/r/skill.json

Install for your user account

To make the skill available in every project, copy it into your home directory instead:

npx shadcn@latest add https://cupertino-ui.baltoon.jp/r/skill.json
mkdir -p ~/.claude/skills && cp -r .claude/skills/cupertino-ui ~/.claude/skills/

What's inside

Two files: SKILL.md (setup, tokens, conventions, patterns, pitfalls) and references/components.md (the full catalog of all components with exports and links). The full source is below.

SKILL.md

---
name: cupertino-ui
description: >
  How to install and build UIs with cupertino-ui — the shadcn-style React
  component library that reproduces Apple's Human Interface Guidelines
  (SwiftUI look-and-feel) on Tailwind CSS v4 + Radix. Use this skill whenever
  the user mentions cupertino-ui, wants Apple/iOS/macOS-style UI in React or
  Next.js, asks for SwiftUI-like components on the web (switches, segmented
  controls, sheets, inset-grouped lists, sidebars, tab bars, navigation
  push transitions, Apple Music-style players), or is adding components from
  the cupertino-ui registry — even if they just say "make it feel like an
  Apple app" without naming the library.
---

# cupertino-ui

cupertino-ui distributes Apple-HIG React components the shadcn way: the CLI
copies the component **source** into the user's project (`components/ui/`),
where it can be edited freely. There is no runtime package to depend on.
Docs and live demos: https://cupertino-ui.baltoon.jp

## Setup (once per project)

Requirements: React 18+/Next.js and **Tailwind CSS v4** (the tokens use
`@theme`/`@utility`, which do not exist in v3).

```bash
# 1. shadcn plumbing, if the project has no components.json yet
npx shadcn@latest init

# 2. theme tokens + cn() helper — REQUIRED before any component
npx shadcn@latest add --overwrite https://cupertino-ui.baltoon.jp/r/theme.json
npm install tw-animate-css
```

Then import the theme in the global stylesheet, after Tailwind:

```css
@import "tailwindcss";
@import "tw-animate-css";
@import "../cupertino-ui-theme.css";
```

Every component looks broken without step 2 — the classes reference tokens
(`bg-blue`, `text-label`, `material-thick`, `text-body`) that only exist once
the theme CSS is loaded.

## Adding components

```bash
npx shadcn@latest add https://cupertino-ui.baltoon.jp/r/<name>.json
# e.g. button, switch, list, navigation-stack, now-playing …
```

```tsx
import { Button } from "@/components/ui/button";

<Button variant="tinted">Continue</Button>
```

For the full catalog (64 components) with exports, key props, and usage
snippets, read [references/components.md](references/components.md). Skim its
table of contents and read only the sections you need.

## Design tokens — use these, not raw hex

Colors follow Apple's semantic system and adapt to dark mode automatically:

| Purpose | Classes |
|---|---|
| Accent / system colors | `bg-blue text-blue` (also `red green orange yellow teal cyan mint indigo purple pink brown`, `gray`–`gray-6`) |
| Text hierarchy | `text-label`, `text-secondary-label`, `text-tertiary-label`, `text-quaternary-label` |
| Fills (controls, platters) | `bg-fill`, `bg-fill-secondary`, `bg-fill-tertiary`, `bg-fill-quaternary` |
| Backgrounds | `bg-background`, `bg-secondary-background`; grouped screens: `bg-grouped`, `bg-grouped-secondary` |
| Materials (blur) | `material-ultrathin` / `-thin` / `-regular` / `-thick` |

Type scale = SF text styles with correct tracking: `text-large-title`,
`text-title-1/2/3`, `text-headline`, `text-body`, `text-callout`,
`text-subheadline`, `text-footnote`, `text-caption-1/2`. Prefer these over
`text-sm`/`text-lg` — they carry HIG size, line-height, and letter-spacing.

Radii tokens (7/10/12/16/20 px): `rounded-[var(--radius-control)]`,
`--radius-field`, `--radius-card`, `--radius-group`, `--radius-sheet`.
Shadows: `shadow-[var(--shadow-card)]`, `--shadow-menu`, `--shadow-window`.

Dark mode is class-based: toggle `dark` on `<html>`. All tokens swap
automatically; never write `dark:` overrides for token-based colors.

To re-tint the whole UI, override one variable:

```css
:root, .dark { --system-blue: var(--system-indigo); } /* or a brand color */
```

## Conventions that make it feel like Apple

- **Hairlines, not borders.** Separators are 0.5px shadows:
  `shadow-[0_0.5px_0_0_var(--separator)]` (or inset ring variants). A 1px
  `border` immediately looks non-Apple.
- **`cursor-default select-none`** on buttons and controls — macOS controls
  don't show a pointer cursor.
- Focus rings: `focus-visible:ring-[3px] focus-visible:ring-blue/40`.
- Press feedback: `active:scale-[0.97]` / `active:opacity-*` rather than
  color-only changes.
- Grouped screens (Settings-style) sit on `bg-grouped` with
  `bg-grouped-secondary` cards; content screens use `bg-background`.

## Composition patterns

**iOS settings screen** — `List` + rows with controls:

```tsx
<List header="Connectivity" footer="Explanatory footnote.">
  <ListItem icon={<Wifi />} detail={<Switch defaultChecked />}>Wi-Fi</ListItem>
  <ListItem icon={<Bluetooth />} detail="On" chevron onClick={...}>Bluetooth</ListItem>
</List>
```

**Push navigation without routing** — `NavigationStack` renders SwiftUI-style
slide transitions and a back-button nav bar entirely client-side:

```tsx
<NavigationStack title="Settings">
  <List>
    <NavigationLink title="Wi-Fi" icon={<Wifi />} destination={<WifiScreen />} />
  </List>
</NavigationStack>
```

**macOS window shell** — toolbar + collapsible floating sidebar:

```tsx
<SidebarProvider selected={sel} onSelect={setSel}>
  <Toolbar><SidebarToggle /><ToolbarTitle>Files</ToolbarTitle></Toolbar>
  <div className="flex min-h-0 flex-1">
    <Sidebar><SidebarSection title="Favorites">…</SidebarSection></Sidebar>
    <main>…</main>
  </div>
</SidebarProvider>
```

**Audio / Apple Music UIs** — wrap once in `AudioPlayerProvider`; every music
component (`MiniPlayer`, `NowPlaying`, `TrackList`, `LyricsView`, `QueueList`)
reads the same `useAudioPlayer()` context. Use `load(queue)` to prepare a
queue and `play(queue, i)` only from a user gesture — **never autoplay**.

**Toasts** — render `<Toaster />` once, then call
`toast({ title, description, icon, iconColor })` from anywhere.


## Motion & feel (fluid-interface rules baked in)

The components follow Apple's fluid-interface guidance; keep these when
extending them:

- **Respond on pointer-down** — press feedback is `:active` (instant), never
  click-only. Keep `active:scale-*` on anything tappable.
- **Springs, not fixed easings, for anything touched.** The theme ships
  `--spring-smooth` (critically damped) and `--spring-bouncy` (momentum) as
  CSS `linear()` easings — default to smooth; use bouncy only after a flick.
- **Anchor overlays to their trigger**: menus/popovers set their
  transform-origin from the Radix popper variable (see the origin class in
  dropdown-menu.tsx) and "materialize" with a small `blur-in` — copy that
  pattern for new overlays.
- **Gestures**: `Sheet` (bottom) drags 1:1 with the pointer, rubber-bands
  above rest, and decides commit/cancel from **projected momentum**
  (`(v/1000)·d/(1−d)`, d≈0.998) with the release velocity handed to the
  exit. `NavigationStack` has the iOS left-edge swipe-back with the same
  projection; `Carousel` adds mouse drag that projects the flick but pages
  one item per gesture. Reuse the `project`/`rubberband` helpers for new
  gestures.
- **Type scale is rem/em-based** — it follows the user's browser text size
  (Dynamic Type). Keep new type utilities in rem with em tracking; never
  reintroduce px font sizes.
- **Reduced motion/transparency/contrast** are handled in the theme for
  materials and animations — never add motion that bypasses them.

## Pitfalls

- `shadcn init` scaffolds a starter `components/ui/button.tsx`; when adding this
  registry's `button`, answer yes to the overwrite prompt (or pass
  `--overwrite`) so the starter doesn't shadow it. Install the theme with
  `--overwrite` too, so its enhanced `lib/utils.ts` replaces the plain one.
- Install `theme.json` **first**; it also ships the project's `cn()` helper,
  whose `extendTailwindMerge` config knows the custom type-scale classes.
  Replacing it with a plain `twMerge` silently drops color classes when they
  meet type classes (e.g. `text-body` deleting `text-blue`).
- Don't apply `material-*` utilities to sticky/fixed bars at the very top of
  the viewport — Chrome mis-renders `backdrop-filter: saturate()` at the top
  edge. Use `bg-background/80 backdrop-blur-xl` there instead.
- Components assume `tw-animate-css` is imported (enter/exit + accordion
  keyframes).
- Prefer platform idiom when choosing components: iOS surfaces use `Sheet`
  (bottom) / `ActionSheet` / `Dialog` (alert); macOS surfaces use
  `DropdownMenu`, `ContextMenu`, `Popover`, `Toolbar`, `Menubar`.

references/components.md

# cupertino-ui component catalog

Install any component with:

```bash
npx shadcn@latest add https://cupertino-ui.baltoon.jp/r/<slug>.json
```

Import from `@/components/ui/<slug>`. Per-component docs with live demos:
`https://cupertino-ui.baltoon.jp/docs/components/<slug>`

## Table of contents

- [Controls](#controls) — button, checkbox, color-picker, control-group, date-picker, input-otp, radio-group, segmented-control, slider, stepper, switch, toggle-group
- [Inputs](#inputs) — combobox, form, input, label, search-field, select, textarea
- [Layout & content](#layout-content) — accordion, alert, avatar, badge, breadcrumb, card, carousel, content-unavailable, disclosure-group, gauge, list, page-control, progress, resizable, scroll-area, separator, skeleton, spinner, table
- [Liquid Glass](#liquid-glass) — glass, glass-button, glass-tab-bar
- [Overlays](#overlays) — action-sheet, command, dialog, hover-card, popover, sheet, toast, tooltip
- [Menus & navigation](#menus-navigation) — context-menu, dropdown-menu, menubar, navigation-stack, sidebar, tab-bar, toolbar
- [Music](#music) — album-grid, album-header, audio-player, lyrics-view, mini-player, now-playing, queue-list, track-list

## Controls

### Button (`button`)

Filled, tinted, gray, plain, and destructive styles. SwiftUI counterpart: `Button + .buttonStyle(.borderedProminent)`.

Exports: `Button`, `buttonVariants`

### Checkbox (`checkbox`)

The macOS checkbox: accent square with a white check. SwiftUI counterpart: `Toggle + .toggleStyle(.checkbox)`.

Exports: `Checkbox`

### Color Picker (`color-picker`)

The rainbow-ring well plus system-color swatches. SwiftUI counterpart: `ColorPicker`.

Exports: `ColorPicker`

### Control Group (`control-group`)

A bordered cluster of buttons on one platter. SwiftUI counterpart: `ControlGroup`.

Exports: `ControlGroup`, `ControlGroupButton`

### Date Picker (`date-picker`)

The inline calendar with month paging. SwiftUI counterpart: `DatePicker + .datePickerStyle(.graphical)`.

Exports: `DatePicker`

### Input OTP (`input-otp`)

Verification-code cells with a blinking caret.

Exports: `InputOTP`, `InputOTPGroup`, `InputOTPSeparator`, `InputOTPSlot`

### Radio Group (`radio-group`)

macOS radio buttons with the accent fill. SwiftUI counterpart: `Picker + .pickerStyle(.radioGroup)`.

Exports: `RadioGroup`, `RadioGroupItem`

### Segmented Control (`segmented-control`)

The selected segment floats on a white platter. SwiftUI counterpart: `Picker + .pickerStyle(.segmented)`.

Exports: `SegmentedControl`, `SegmentedControlList`, `SegmentedControlTrigger`, `SegmentedControlContent`

### Slider (`slider`)

The iOS slider with the 28pt white thumb. SwiftUI counterpart: `Slider`.

Exports: `Slider`

### Stepper (`stepper`)

The iOS − / + control. SwiftUI counterpart: `Stepper`.

Exports: `Stepper`

### Switch (`switch`)

The iOS toggle with the springy knob. SwiftUI counterpart: `Toggle`.

Exports: `Switch`

### Toggle Group (`toggle-group`)

The macOS toggle cluster on one platter. SwiftUI counterpart: `Toggle + ControlGroup`.

Exports: `ToggleGroup`, `ToggleGroupItem`

## Inputs

### Combobox (`combobox`)

Bordered field with a filtered suggestion menu. SwiftUI counterpart: `NSComboBox`.

Exports: `Combobox`

### Form (`form`)

Grouped-inset sections of label/control rows. SwiftUI counterpart: `Form`.

Exports: `Form`, `FormRow`, `FormSection`

### Input (`input`)

iOS inset field or macOS rounded-border text field. SwiftUI counterpart: `TextField`.

Exports: `Input`, `inputVariants`

### Label (`label`)

Form label set in the subheadline style. SwiftUI counterpart: `LabeledContent`.

Exports: `Label`

### Search Field (`search-field`)

The iOS search bar with clear and Cancel. SwiftUI counterpart: `.searchable(text:)`.

Exports: `SearchField`

### Select (`select`)

The macOS pop-up button with the accent chevron capsule. SwiftUI counterpart: `Picker + .pickerStyle(.menu)`.

Exports: `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectScrollDownButton`, `SelectScrollUpButton`, `SelectSeparator`, `SelectTrigger`, `SelectValue`

### Textarea (`textarea`)

Multiline text on an iOS inset field. SwiftUI counterpart: `TextEditor`.

Exports: `Textarea`

## Layout & content

### Accordion (`accordion`)

Grouped-inset disclosure list with rotating chevrons. SwiftUI counterpart: `DisclosureGroup in a List`.

Exports: `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`

### Alert (`alert`)

Inline tinted banner for warnings and status.

Exports: `Alert`, `AlertDescription`, `AlertTitle`

### Avatar (`avatar`)

Contacts-style circular avatar with a monogram fallback. SwiftUI counterpart: `AsyncImage in a Circle clip`.

Exports: `Avatar`, `AvatarFallback`, `AvatarImage`

### Badge (`badge`)

iOS badges and tinted capsules. SwiftUI counterpart: `.badge(_:)`.

Exports: `Badge`, `badgeVariants`

### Breadcrumb (`breadcrumb`)

The Finder path bar with chevron separators.

Exports: `Breadcrumb`, `BreadcrumbEllipsis`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbList`, `BreadcrumbPage`, `BreadcrumbSeparator`

### Card (`card`)

A grouped-inset card with a hairline shadow. SwiftUI counterpart: `GroupBox`.

Exports: `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`

### Carousel (`carousel`)

Scroll-snap paging with a dot indicator. SwiftUI counterpart: `TabView + .tabViewStyle(.page)`.

Exports: `Carousel`, `CarouselItem`

### Content Unavailable (`content-unavailable`)

The centered empty state with symbol, title, and actions. SwiftUI counterpart: `ContentUnavailableView`.

Exports: `ContentUnavailable`

### Disclosure Group (`disclosure-group`)

Rotating-chevron rows that reveal indented content. SwiftUI counterpart: `DisclosureGroup`.

Exports: `DisclosureGroup`

### Gauge (`gauge`)

The open-ring dial and the linear capacity bar. SwiftUI counterpart: `Gauge`.

Exports: `Gauge`

### List (`list`)

The iOS Settings list: icon tiles, chevrons, hairline separators. SwiftUI counterpart: `List + .listStyle(.insetGrouped)`.

Exports: `List`, `ListItem`

### Page Control (`page-control`)

Dots for paged content. SwiftUI counterpart: `UIPageControl`.

Exports: `PageControl`

### Progress (`progress`)

The thin linear progress bar. SwiftUI counterpart: `ProgressView(value:)`.

Exports: `Progress`

### Resizable (`resizable`)

Draggable split-view divider. SwiftUI counterpart: `NavigationSplitView divider`.

Exports: `ResizableHandle`, `ResizablePanel`, `ResizablePanelGroup`

### Scroll Area (`scroll-area`)

macOS overlay scrollbars. SwiftUI counterpart: `ScrollView`.

Exports: `ScrollArea`, `ScrollBar`

### Separator (`separator`)

A hairline divider. SwiftUI counterpart: `Divider`.

Exports: `Separator`

### Skeleton (`skeleton`)

Redaction placeholder for loading states. SwiftUI counterpart: `.redacted(reason: .placeholder)`.

Exports: `Skeleton`

### Spinner (`spinner`)

The activity indicator with eight fading spokes. SwiftUI counterpart: `ProgressView()`.

Exports: `Spinner`

### Table (`table`)

The macOS list view with alternating rows. SwiftUI counterpart: `Table`.

Exports: `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`

## Liquid Glass

### Glass (`glass`)

Liquid Glass: the light-bending control-layer material, regular and clear. SwiftUI counterpart: `glassEffect(_:in:)`.

Exports: `Glass`, `GlassSheen`, `glassVariants`

### Glass Button (`glass-button`)

Liquid Glass capsule button with springy press and optional tint. SwiftUI counterpart: `.buttonStyle(.glass)`.

Exports: `GlassButton`, `glassButtonVariants`

### Glass Tab Bar (`glass-tab-bar`)

Floating glass capsule with a pill morphing between tabs. SwiftUI counterpart: `TabView (iOS 26)`.

Exports: `GlassTabBar`

## Overlays

### Action Sheet (`action-sheet`)

Stacked action groups rising from the bottom, with a detached Cancel. SwiftUI counterpart: `.confirmationDialog(_:isPresented:)`.

Exports: `ActionSheet`, `ActionSheetAction`, `ActionSheetCancel`, `ActionSheetClose`, `ActionSheetContent`, `ActionSheetGroup`, `ActionSheetHeader`, `ActionSheetTrigger`

### Command (`command`)

Spotlight: the cmd-K command palette.

Exports: `Command`, `CommandDialog`, `CommandEmpty`, `CommandGroup`, `CommandInput`, `CommandItem`, `CommandList`, `CommandSeparator`, `CommandShortcut`

### Dialog (`dialog`)

The iOS alert with hairline-separated actions. SwiftUI counterpart: `.alert(_:isPresented:)`.

Exports: `Dialog`, `DialogAction`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`

### Hover Card (`hover-card`)

A hover preview panel on thick material.

Exports: `HoverCard`, `HoverCardContent`, `HoverCardTrigger`

### Popover (`popover`)

A blurred material panel anchored to a control. SwiftUI counterpart: `.popover(isPresented:)`.

Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverTrigger`

### Sheet (`sheet`)

The iOS bottom sheet with a grabber. SwiftUI counterpart: `.sheet(isPresented:)`.

Exports: `Sheet`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetOverlay`, `SheetPortal`, `SheetTitle`, `SheetTrigger`

### Toast (`toast`)

iOS notification banners; call toast() from anywhere.

Exports: `toast`, `Toaster`

### Tooltip (`tooltip`)

The macOS help tag. SwiftUI counterpart: `.help(_:)`.

Exports: `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`

## Menus & navigation

### Context Menu (`context-menu`)

The macOS right-click menu. SwiftUI counterpart: `.contextMenu { ... }`.

Exports: `ContextMenu`, `ContextMenuCheckboxItem`, `ContextMenuContent`, `ContextMenuGroup`, `ContextMenuItem`, `ContextMenuLabel`, `ContextMenuPortal`, `ContextMenuRadioGroup`, `ContextMenuRadioItem`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuSub`, `ContextMenuSubContent`, `ContextMenuSubTrigger`, `ContextMenuTrigger`

### Dropdown Menu (`dropdown-menu`)

The macOS pull-down menu on a blurred material. SwiftUI counterpart: `Menu`.

Exports: `DropdownMenu`, `DropdownMenuCheckboxItem`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuPortal`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`

### Menubar (`menubar`)

The macOS menu bar with material menus. SwiftUI counterpart: `.commands { CommandMenu(...) }`.

Exports: `Menubar`, `MenubarCheckboxItem`, `MenubarContent`, `MenubarGroup`, `MenubarItem`, `MenubarLabel`, `MenubarMenu`, `MenubarPortal`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarSeparator`, `MenubarShortcut`, `MenubarSub`, `MenubarSubContent`, `MenubarSubTrigger`, `MenubarTrigger`

### Navigation Stack (`navigation-stack`)

Push/pop slide transitions with a back-button nav bar. SwiftUI counterpart: `NavigationStack + NavigationLink`.

Exports: `NavigationLink`, `NavigationStack`, `useNavigation`

### Sidebar (`sidebar`)

The macOS/iPadOS source list with accent selection. SwiftUI counterpart: `NavigationSplitView`.

Exports: `Sidebar`, `SidebarItem`, `SidebarProvider`, `SidebarSection`, `SidebarToggle`, `useSidebar`

### Tab Bar (`tab-bar`)

The iOS bottom tab bar on blurred material. SwiftUI counterpart: `TabView`.

Exports: `TabBar`, `TabBarContent`, `TabBarItem`, `TabBarList`

### Toolbar (`toolbar`)

The macOS window toolbar with icon buttons. SwiftUI counterpart: `.toolbar { ToolbarItem(...) }`.

Exports: `Toolbar`, `ToolbarButton`, `ToolbarSeparator`, `ToolbarSpacer`, `ToolbarTitle`

## Music

### Album Grid (`album-grid`)

The Apple Music library grid. SwiftUI counterpart: `LazyVGrid of artwork`.

Exports: `AlbumCard`, `AlbumGrid`

### Album Header (`album-header`)

Album artwork, red artist name, Play / Shuffle.

Exports: `AlbumHeader`

### Audio Player (`audio-player`)

Queue, transport, seek, volume — as a hook. SwiftUI counterpart: `MusicKit player`.

Exports: `AudioPlayerProvider`, `formatTime`, `useAudioPlayer`

### Lyrics View (`lyrics-view`)

Bold synced lyric lines that light up with playback. SwiftUI counterpart: `MusicKit lyrics`.

Exports: `LyricsView`

### Mini Player (`mini-player`)

The floating capsule above the tab bar.

Exports: `MiniPlayer`

### Now Playing (`now-playing`)

The full player with shrinking artwork.

Exports: `NowPlaying`

### Queue List (`queue-list`)

Up Next: current track pinned, upcoming below.

Exports: `QueueList`

### Track List (`track-list`)

Numbered rows with animated equalizer bars.

Exports: `EqualizerBars`, `TrackList`, `TrackRow`