React + Storybook
with Claude Code

Design a Button component. Four variants: primary (solid, brand color), secondary (outlined, neutral border), ghost (transparent, gets a soft background on hover), and danger (red, for destructive actions). Three sizes — sm, md, lg — with proportional padding and font size. Show variations with a left icon, right icon, loading spinner (replaces the icon), disabled appearance (reduced opacity), and full-width. Subtle hover lift, clear focus ring.

Design an Input field. Sizes: sm, md, lg. Five states: default (neutral border), hover (slightly darker border), focused (accent-colored ring around the field), disabled (muted background, reduced opacity), readonly (subtle background tint), and error (red border, optional red message below). Support optional left and right icons inside the field — icon color shifts to match the current state.

Design a Badge component for status labels. Five semantic variants — success (green), warning (amber), danger (red), info (blue), neutral (gray) — each with a subtle tinted background and matching darker text. Two sizes: sm (tight padding) and md (a bit more breathing room). Two shapes: pill (fully rounded ends) and square (small corner radius). Optional small dot indicator before the text in the same accent color.

Design an Avatar component. Five sizes — xs, sm, md, lg, xl — with matching font sizes for initials. Two shapes: circle (default) and square (small radius). When no image is provided, fall back gracefully to initials on a soft colored background. Optional status dot in the bottom-right corner — online (green), offline (gray), away (amber) — with a thin white ring around it for separation.

Design a Checkbox component. Sizes: sm, md, lg. Five states: unchecked (just border), checked (filled with accent color, white check icon), indeterminate (filled, with a minus icon instead of check), disabled (muted), and focused (accent ring around the box). Subtle scale-in animation on the icon when toggling. Optional label beside the box, with the entire row clickable.

Design a Radio component along with a RadioGroup container. States: unselected (just border), selected (border with a filled inner dot in accent color), disabled (muted), and focused (accent ring around the outer circle). Subtle scale-in transition for the inner dot when selected. RadioGroup supports horizontal or vertical layout with consistent spacing. Each option clickable across the whole row.

Design a Switch (toggle) component. Sizes: sm, md, lg with proportional thumb and track. States: off (neutral gray track, thumb left), on (accent-colored track, thumb right), disabled (muted), focused (accent ring around the track). Smooth thumb slide and color transition (~200ms) between states. Optional text label can sit on the left or right side of the switch.

Design a Spinner for loading states. Sizes: sm, md, lg, xl. Three visual variants: circle (a classic spinning arc with a transparent gap, rotating continuously), dots (three small dots bouncing in sequence), and pulse (a single circle scaling in and out). Spinner color matches the current text color by default but can be overridden. Smooth, continuous animation.

Design a Tooltip that appears on hover above (or beside) any element. Four positions: top, bottom, left, right. A dark rounded rectangle with light text and a small triangular arrow pointing toward the trigger. Subtle fade-in with a slight position shift on appear (~150ms). Has a small offset gap from the trigger so it doesn't sit flush against it.

Design a Divider for separating content. Two orientations: horizontal (full width) and vertical (full height). Three line styles: solid, dashed, and dotted, all in a soft neutral color. Optional centered label — when present, the line breaks around it with consistent spacing on each side. The label uses smaller, muted text.

Design a SearchBar built on top of the Input primitive. A magnifying-glass icon sits on the left in muted gray, a clear (X) button appears on the right only when there's text (with a subtle hover state), and an optional keyboard shortcut hint (e.g. ⌘K) sits on the far right inside a small rounded chip. Placeholder text is muted gray. Sizes: sm, md, lg.

Design a FormField wrapper that groups a label, input, and helper text together. Label above (medium weight) with a red asterisk after it when the field is required. The input child renders in the middle. Below sits either helper text (small, muted gray) or an error message (small, red) — the error replaces the helper when present, and the label color shifts to red. Consistent vertical spacing between all three pieces.

Design a Card — a contained surface for grouping related content. Optional header with a bold title, smaller muted subtitle below, and an action area on the right (e.g. a menu icon). Body for main content. Optional footer for action buttons, separated by a subtle divider. Padding variants: sm, md, lg. A clickable variant lifts subtly on hover with a slightly stronger shadow.

Design an Alert for inline notifications. Four variants — info (blue), success (green), warning (amber), danger (red) — each with a tinted background and a matching icon (info circle, checkmark, warning triangle, alert octagon). Layout: icon on the left, then a bold title with message body below it, an optional close (X) button in the top right, and an optional action button (text link or small button) on the right.

Design a Tag — a small inline element for labels or filters. Text in the middle, optional leading icon on the left, and an optional removable (X) button on the right with a subtle hover state. Color variants matching the Badge system (success, warning, danger, info, neutral) — provide both subtle (tinted background) and solid (filled) treatments. Sizes: sm, md. Pill-shaped with rounded ends.

Design a Modal with three subparts: Modal.Header (with title and a close X button on the right), Modal.Body (main content area), and Modal.Footer (right-aligned action buttons, separated from the body by a subtle divider). Sizes: sm, md, lg, xl. Sits centered on a dimmed semi-transparent backdrop. Smooth scale-and-fade in on open, fade out on close. Rounded corners with a soft shadow.

Design Tabs with three subparts: Tabs.List (the row of tab buttons), Tabs.Tab (an individual tab), and Tabs.Panel (the content area below). Three variants: underline (active tab has an accent bottom border that slides between tabs), pill (active tab has a filled accent background), and enclosed (tabs sit in a bordered container with the active tab connected to the panel below). Clear active/inactive states, hover state for inactive tabs, focus ring for keyboard users.

Design an Accordion with three subparts: Accordion.Item (one row), Accordion.Trigger (the clickable header with label and chevron icon), and Accordion.Content (the collapsible body). Two states per item: collapsed (only trigger visible, chevron points down) and expanded (content visible, chevron rotated 180° to point up). Smooth height animation when expanding. Subtle divider between adjacent items. Trigger has hover and focus states.

Design a Dropdown menu with five subparts: Dropdown.Trigger (button that opens it), Dropdown.Menu (the floating panel), Dropdown.Item (a menu option), Dropdown.Separator (thin line between groups), and Dropdown.Label (small uppercase muted label for grouping). Menu has soft shadow, rounded corners, subtle fade-in. Items show hover (light background) and selected (check icon on right) states. Items support an optional leading icon and a trailing shortcut hint in muted text. A danger variant has red text.

Design a DataTable with subparts: Table (container), Table.Header (sticky top row), Table.HeaderCell (with optional sort arrow that flips between ascending/descending), Table.Body, Table.Row (with hover state), and Table.Cell. Variants: default (row borders), striped (alternating row backgrounds), and borderless. Loading state shows shimmering skeleton rows. Empty state shows a centered icon with a friendly message when there's no data.