Introduction

Cupertino UI

A shadcn-compatible component registry, designed after Apple Human Interface Guidelines. Each component is a drop-in replacement for its shadcn counterpart — same name, same props, same data-slot attributes. Read on for installation, philosophy, and the component catalog.

Installation

Install any Cupertino component into an existing shadcn project. The component is written to components/ui/<name>.tsx, replacing the shadcn version (same API, different style).

$ npx shadcn@latest add https://cupertino-ui.vercel.app/r/button.json

Don’t have shadcn set up yet? Follow the shadcn installation guide first.

Philosophy

Apple’s four design principles, applied to a shadcn registry.

Clarity

Generous spacing, deliberate type, confident colour.

Deference

Subtle chrome. Content leads, UI recedes.

Depth

Layered surfaces. Motion telegraphs hierarchy.

Consistency

Same shadcn API. Same data-slot. Drop-in.

Components

Accordion

iOS grouped-list style — 44pt touch targets, smooth chevron rotation, subtle separator. Drop-in replacement for shadcn Accordion.

$ npx shadcn add https://cupertino-ui.vercel.app/r/accordion.json

Alert

rounded-2xl, muted fill. Destructive variant uses Apple system red. Supports leading icon, title, description, and action slot.

Heads up!

You can add components to your app using the CLI.

Error

Your session has expired. Please sign in again.

$ npx shadcn add https://cupertino-ui.vercel.app/r/alert.json

Alert Dialog

iOS-native alert dialog — 270px max-width, rounded-3xl, centered header, full-width separator-divided footer buttons.

$ npx shadcn add https://cupertino-ui.vercel.app/r/alert-dialog.json

Aspect Ratio

Pure utility wrapper that maintains a fixed ratio. No visible styling — wraps any child in a ratio-locked container.

16 / 9

$ npx shadcn add https://cupertino-ui.vercel.app/r/aspect-ratio.json

Avatar

Circular, 40pt default. Medium-weight initials fallback. Supports sm/lg sizes, badge overlay, and stacked group.

CNCNCNJD

CNJDMK

$ npx shadcn add https://cupertino-ui.vercel.app/r/avatar.json

Badge

Full pill, semibold, tracking-tight. The destructive variant uses Apple system red — designed for notification counts.

DefaultSecondary3OutlineGhost

$ npx shadcn add https://cupertino-ui.vercel.app/r/badge.json

Breadcrumb

13pt navigation trail — chevron separator, pill hover on links, current page in medium weight.

$ npx shadcn add https://cupertino-ui.vercel.app/r/breadcrumb.json

Button

Capsule shape, 44pt touch target, scale-press feedback. Six variants — default, outline, secondary, ghost, destructive, link — matching shadcn one-for-one.

$ npx shadcn add https://cupertino-ui.vercel.app/r/button.json

Button Group

Apple HIG segmented button cluster — shared rounded-xl shell, dividers between members, supports separators and label addons.

https://

$ npx shadcn add https://cupertino-ui.vercel.app/r/button-group.json

Calendar

Apple HIG date grid — rounded-2xl container, circular day cells, today highlighted with primary fill, muted weekday labels.

May 2026

$ npx shadcn add https://cupertino-ui.vercel.app/r/calendar.json

Card

rounded-2xl, soft shadow, subtle ring. All shadcn composition slots (Header, Title, Description, Content, Action, Footer) are preserved.

Notifications

Choose how you receive updates.

Push notifications

$ npx shadcn add https://cupertino-ui.vercel.app/r/card.json

Carousel

Apple HIG horizontal scroll — rounded-2xl slides, pill dots indicator, smooth Embla snap scroll, secondary ghost nav buttons.

Mac

iPhone

iPad

Apple Watch

$ npx shadcn add https://cupertino-ui.vercel.app/r/carousel.json

Chart

Apple HIG charts — Recharts wrapper with rounded-2xl blur tooltip, hairline grid, rounded-full legend dots. Bar and area variants shown.

$ npx shadcn add https://cupertino-ui.vercel.app/r/chart.json

Checkbox

22pt touch-friendly, 6px radius, bold checkmark. Scale-press feedback with 200ms transition. Primary fill when checked.

UncheckedCheckedDisabled

$ npx shadcn add https://cupertino-ui.vercel.app/r/checkbox.json

Collapsible

Headless expand/collapse primitive. Wire any trigger and content — pair with Button and the accordion pattern for a HIG feel.

$ npx shadcn add https://cupertino-ui.vercel.app/r/collapsible.json

Combobox

Apple HIG combobox — autocomplete input dengan list saran. Built on base-ui combobox + Input Group shell.

$ npx shadcn add https://cupertino-ui.vercel.app/r/combobox.json

Command

Apple HIG command palette — rounded-2xl modal, prominent search input, grouped sections with uppercase 11px labels, ⌘K shortcut hint.

$ npx shadcn add https://cupertino-ui.vercel.app/r/command.json

Context Menu

Right-click context menu mirroring dropdown-menu — rounded-2xl, 15pt items, uppercase 11px section labels, destructive variant.

Right-click here

$ npx shadcn add https://cupertino-ui.vercel.app/r/context-menu.json

Data Table

Built on TanStack Table + Cupertino Table primitives — column sorting, pagination, and row actions. Install @tanstack/react-table to enable full features.

Invoice	Status	Method	Amount
INV-001	Paid	Apple Pay	$250.00
INV-002	Pending	Card	$150.00
INV-003	Paid	Apple Pay	$320.00
INV-004	Failed	Card	$90.00

$ npx shadcn add https://cupertino-ui.vercel.app/r/table.json

Date Picker

Composed from Calendar + Popover — no separate component. Apple HIG date picker with rounded-2xl popover, calendar grid, and formatted trigger button.

$ npx shadcn add https://cupertino-ui.vercel.app/r/calendar.json https://cupertino-ui.vercel.app/r/popover.json

Dialog

rounded-3xl surface, blur backdrop, 17pt semibold title. X close button top-right. Optional footer row.

$ npx shadcn add https://cupertino-ui.vercel.app/r/dialog.json

Direction

RTL/LTR direction provider — wraps Radix DirectionProvider to set text direction for an entire subtree. Useful for Arabic, Hebrew, and other RTL languages.

LTR (default)

Hello, world! Left to right.

RTL

مرحبا بالعالم! من اليمين إلى اليسار.

$ npx shadcn add https://cupertino-ui.vercel.app/r/direction.json

Drawer

Apple HIG bottom sheet — Vaul-based, rounded-t-3xl with iOS grabber, blur overlay, same surface as sheet.

$ npx shadcn add https://cupertino-ui.vercel.app/r/drawer.json

Dropdown Menu

rounded-2xl surface, 15pt items, uppercase section labels, ⌘ keyboard shortcuts. Full submenu and radio/checkbox support.

$ npx shadcn add https://cupertino-ui.vercel.app/r/dropdown-menu.json

Empty

Apple HIG empty-state — large muted icon in rounded-full container, 15pt semibold title, 13pt muted description, action slot.

No messages

When you receive messages, they'll appear here.

$ npx shadcn add https://cupertino-ui.vercel.app/r/empty.json

Field

Apple HIG form field wrapper — composes label, control, description, and error in a single semantic group with consistent spacing.

$ npx shadcn add https://cupertino-ui.vercel.app/r/field.json

Hover Card

rounded-2xl popover surface, 13pt text, shadow-xl. Appears on hover after a short delay — ideal for user profiles and rich previews.

$ npx shadcn add https://cupertino-ui.vercel.app/r/hover-card.json

Input

44pt height, rounded-xl, filled background that turns crisp white on focus. Pairs naturally with Label.

$ npx shadcn add https://cupertino-ui.vercel.app/r/input.json

Input Group

Apple HIG input group — composes input with leading/trailing addons (icons, text, buttons, kbd). Shared rounded-xl shell, single focus ring across the group.

⌘K

@cupertino.dev

$ npx shadcn add https://cupertino-ui.vercel.app/r/input-group.json

Input OTP

Apple HIG segmented code input — rounded-xl cells, 44pt height, focus ring per active cell, pulsing caret.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

$ npx shadcn add https://cupertino-ui.vercel.app/r/input-otp.json

Item

Apple HIG list row — leading media slot (icon or image), title + description content, trailing actions, three sizes.

Notifications

Get notified when something happens.

Favorites

Quick access to items you've starred.

Profile

$ npx shadcn add https://cupertino-ui.vercel.app/r/item.json

Kbd

Keyboard shortcut indicator. Mono badge with subtle border and inset shadow — inline-flex by default so it sits naturally beside text.

Search ⌘KSave ⌘SQuit ⌘Q

$ npx shadcn add https://cupertino-ui.vercel.app/r/kbd.json

Label

15pt medium weight, tracking-tight. Built on Radix Label, so it forwards htmlFor and supports peer-disabled.

Dark mode

$ npx shadcn add https://cupertino-ui.vercel.app/r/label.json

Menubar

macOS-style top-level menus — rounded-xl bar, rounded-2xl dropdowns, 13pt tight-tracking trigger labels, reuses dropdown-menu tokens.

$ npx shadcn add https://cupertino-ui.vercel.app/r/menubar.json

Native Select

Apple HIG native select — uses the platform's native dropdown for accessibility, styled to match Input. Best for mobile and form-heavy contexts.

$ npx shadcn add https://cupertino-ui.vercel.app/r/native-select.json

Pagination

Active page uses primary pill, ghosts for others. 44pt touch targets. Previous/Next show text on larger screens.

$ npx shadcn add https://cupertino-ui.vercel.app/r/pagination.json

Progress

8pt rounded-full track with primary fill. Smooth 300ms ease-out animation as value changes.

$ npx shadcn add https://cupertino-ui.vercel.app/r/progress.json

Radio Group

22pt circle, border-2, primary fill with white inner dot when selected. Scale-press feedback and 200ms transition.

Option One

Option Two

Option Three

$ npx shadcn add https://cupertino-ui.vercel.app/r/radio-group.json

Resizable

Split panes with Apple HIG handles — 1px divider that widens to 4px on hover, ring-ring/50 highlight on drag.

Left panel

Right panel

$ npx shadcn add https://cupertino-ui.vercel.app/r/resizable.json

Scroll Area

Thin 8pt scrollbar with rounded-full thumb. Hides until hover on desktop, matches native iOS scroll behavior.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

$ npx shadcn add https://cupertino-ui.vercel.app/r/scroll-area.json

Select

44pt rounded-xl trigger with muted fill. rounded-2xl dropdown, 15pt items, primary checkmark on selected.

$ npx shadcn add https://cupertino-ui.vercel.app/r/select.json

Separator

Subtle horizontal or vertical rule at 70% border opacity. Use it to divide list items, sections, and inline metadata.

Account

Manage your settings.

Profile

Billing

Sign out

$ npx shadcn add https://cupertino-ui.vercel.app/r/separator.json

Sheet

Slide-over surface — right by default; use side='bottom' for iOS-style modal with a grabber indicator. Rounded-3xl on top/bottom variants.

$ npx shadcn add https://cupertino-ui.vercel.app/r/sheet.json

Sidebar

Apple HIG sidebar — collapsible app shell with grouped items, search slot, mobile sheet variant. Large API; install the component for the full surface.

$ npx shadcn add https://cupertino-ui.vercel.app/r/sidebar.json

Skeleton

rounded-xl muted pulse — composable loading placeholder that matches your content shape.

$ npx shadcn add https://cupertino-ui.vercel.app/r/skeleton.json

Slider

6pt track, white shadow thumb with scale-on-hover. Primary fill for the active range. Supports range (dual thumb) and vertical.

$ npx shadcn add https://cupertino-ui.vercel.app/r/slider.json

Sonner

Apple HIG toast notifications — rounded-2xl blur surface, subtle shadow, icon-coded severity. Place <Toaster /> once in your layout.

$ npx shadcn add https://cupertino-ui.vercel.app/r/sonner.json

Spinner

Apple HIG activity indicator — ring arc animation matching iOS. sm / default / lg sizes. Use text color to tint.

$ npx shadcn add https://cupertino-ui.vercel.app/r/spinner.json

Switch

iOS exact dimensions — 51×31pt — with a thumb shadow and 200ms transition. Use size='sm' for compact contexts (40×24pt).

OnOffSmallDisabled

$ npx shadcn add https://cupertino-ui.vercel.app/r/switch.json

Table

Apple HIG data table — 13px cells, hairline borders, uppercase 11px column headers, hover row bg-muted/40.

Product	Category	Price	Status
MacBook Pro	Mac	$1,999	In Stock
iPhone 16 Pro	iPhone	$999	In Stock
iPad Pro	iPad	$1,099	Low Stock
Apple Watch Ultra	Watch	$799	In Stock

$ npx shadcn add https://cupertino-ui.vercel.app/r/table.json

Tabs

iOS Segmented Control by default — pill container with a white selected pill that gains a soft shadow. Use variant='line' for the underline style.

Manage your account preferences.

$ npx shadcn add https://cupertino-ui.vercel.app/r/tabs.json

Textarea

rounded-xl, muted fill, 15pt with relaxed line-height. Focus clears background fill for readability.

$ npx shadcn add https://cupertino-ui.vercel.app/r/textarea.json

Toast

shadcn deprecated the Radix-based Toast in favor of Sonner. Use the Sonner component — same install, same API, better UX. See Sonner above.

$ npx shadcn add https://cupertino-ui.vercel.app/r/sonner.json

Toggle

44pt, rounded-xl. Primary fill when pressed-on; transparent when off. Default and outline variants, scale-press feedback.

$ npx shadcn add https://cupertino-ui.vercel.app/r/toggle.json

Toggle Group

Composed toggle buttons — spacing=0 creates an iOS segmented-control attachment with shared borders. Supports single and multiple selection.

$ npx shadcn add https://cupertino-ui.vercel.app/r/toggle-group.json

Tooltip

Dark rounded-lg pill with 12pt medium label and soft slide-in (200ms). Wrap any trigger and provide content.

$ npx shadcn add https://cupertino-ui.vercel.app/r/tooltip.json

Typography

Apple HIG type scale — SF Pro-style sizing (40/28/22/17/15/13pt), tight tracking on display sizes, semibold for headings.

The quick brown fox

Jumps over the lazy dog

Section heading

Subsection

A lead paragraph introduces a section with lighter weight and tighter tracking.

Body copy renders at 15pt with relaxed line height for readable paragraphs. Inline code looks like npm install.

Large accent text

Small caption text

Muted secondary text for hints and descriptions.

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

First list item with proper marker
Second list item with relaxed leading
Third list item

$ npx shadcn add https://cupertino-ui.vercel.app/r/typography.json

Cupertino UI

Installation

Philosophy

Components

Is it accessible?

Is it styled?

Is it animated?

Command Palette

No messages

The quick brown fox

Jumps over the lazy dog

Section heading

Subsection