Buttons

Pill-shaped (`rounded-full`) primary CTA in Action Blue, plus secondary outline-pill and ghost variants.

Variants
Sizes
With icons
States

Badges

A single-accent system: Action Blue for NEW and emphasis, neutral surfaces for status and labels.

Variants
DefaultSecondaryOutlineDestructive
Product identity
NEWBETAAvailableLiveCODE
With icons
Verified Featured

Cards

Alternating light and dark product tiles (edge-to-edge, no radius) plus a standard utility card at 18px radius.

Product tiles
NEW
iPhone 17 Pro

Titanium flagship

AUDIO
AirPods 4

Active noise cancellation

WATCH
Apple Watch

Health & fitness

SPATIAL
Vision Pro

Spatial computing

Standard card
Token plan
Pay-as-you-go pricing across every Apple product.
NEW
$0.70/ 1M input tokens

Includes 1M context window, JSON mode, and tool use.

Form controls

A react-hook-form form with zod validation — input, textarea, checkbox, switch, radio group, select, and slider bound via Controller.

0/200 characters

0.4

Select

A thin Select wrapper over Combobox. Common docs examples are available as props.

Selected: iphone-17-pro

Selected: blue, white

Select

Feedback

Alerts for inline messaging, Skeleton for loading, and toast for transient confirmations.

Alerts
Skeleton (loading)
Toasts

Overlays

Dialog for modal flows, DropdownMenu for action menus, Tooltip for inline hints.

Dialog
Dropdown menu
Tooltip

Navigation & data display

Tabs, Accordion, Avatar, and Table for dense information surfaces like docs and pricing pages.

Tabs
iPhone 17 Pro scores 3,546 on Geekbench 6 single-core, leading mobile silicon.
Accordion

Avatars
MMMX
ABC
+5
Table
ModelContextInput / 1MOutput / 1M
iPhone 17 Pro256GB$1,099—
iPhone 17 Pro Max256GB$1,199—
iPhone 17128GB$799—
iPhone 17 Plus128GB$899—