macOS, built with shadcn/ui.
Native-looking controls, menus, windows and sidebars for the web, matched to macOS 27. Copy them into your project with the shadcn CLI and make them yours.
npx shadcn@latest add @cupertinoui/buttonYou can’t undo this action.
- components
- 77
- blocks
- 17
- appearances
- 2
- accent colors
- 8
Matched to macOS 27
Colors, text styles and control sizes are what macOS 27 itself reports, and the window chrome was measured from real screenshots.
Liquid Glass
Toolbar capsules, full-height sidebars, glass menus and popovers, and the inactive window look.
Light, dark and accents
Both appearances and every macOS accent color, driven by CSS variables in a single file.
shadcn/ui compatible
Same component names and props. Stock shadcn components pick up the macOS tokens too.
Blocks
Complete windows you can drop into a page. Sign In, Preferences and Reminders are free. Finder, Mail and the other app windows come with Pro.
A shadcn registry
Install with the shadcn CLI. You own the code: every component is copied into your project.
Feels like a Mac. Because it works like one.
Not just the look: the details people expect from macOS. Everything below is live, so go ahead and try it.
A whole desktop, in a web page.
Finder, System Settings, Mail, Notes, Safari and Calendar, built only from CupertinoUI. Drag the windows, resize them, minimize them into the Dock or open apps from it.
77 components
Every control you know from a Mac, with keyboard support and accessibility from Base UI.
Up and running in three steps.
The shadcn CLI does the work. See the installation guide for the details.
- 1
Add the registry
Point the namespace at CupertinoUI in components.json.
"@cupertinoui": "https://cupertino-ui.com/r/{name}.json" - 2
Install the theme
Colors, materials, text styles and radii, in one CSS file.
npx shadcn@latest add @cupertinoui/macos-theme - 3
Add components
Pick what you need; each one brings its dependencies along.
npx shadcn@latest add @cupertinoui/window @cupertinoui/dock
Questions
Does it work with my shadcn/ui project?
Yes. CupertinoUI is a shadcn registry: the same CLI installs it, components keep the shadcn names and props, and the theme maps the shadcn tokens to macOS values, so stock components fit in too.
Is it free?
Yes. Every component, the theme and the smaller blocks are MIT licensed. CupertinoUI Pro adds Pro components and the macOS app blocks, such as Finder, Notes and Safari, monthly, yearly or with a one-time Lifetime license.
Do I own the code?
Like shadcn/ui, every component is copied into your project. Change anything; there is no package to upgrade or work around.
What does it need?
React 19 and Tailwind CSS v4. Next.js works out of the box, and any setup the shadcn CLI supports will do.
Light, dark and accent colors?
Both appearances and all eight macOS accent colors, from CSS variables in a single theme file. Windows also have the inactive look, with grey traffic lights and accents.
Is it accessible?
Menus, dialogs, selects, sliders and the other interactive parts are built on Base UI, with keyboard navigation and screen reader support.
Is CupertinoUI made by Apple?
No. CupertinoUI is an independent project and isn’t affiliated with or endorsed by Apple. macOS is a trademark of Apple Inc.
Start building for the Mac on the web.
Add the registry, install the theme and pick your components.