macOS, iPadOS and iOS.
One web framework.
A set of React components that look and behave like Apple’s own controls. Theme it to any brand, ship it to every screen, and let ui-sdk handle the keyboard, focus and accessibility.
| Task | Owner | Due | Status |
|---|---|---|---|
| Write the theming guide | Maya ChenMe | Nov 18 | In progress |
| Right-to-left screenshots | Theo ParkTheo | Today | In progress |
| Contrast pass on Nebula | Ana LimaAna | Today | In review |
| Record the component walkthrough | Theo ParkTheo | Nov 19 | Not started |
| Publish release notes | Maya ChenMe | Nov 21 | Not started |
| Ship the floating tab bar | Kofi MensahKofi | Nov 12 | Done |
| Audit focus rings | Ana LimaAna | Nov 10 | Done |
- 591components, from push buttons and menus to windows, sheets and the Dock
- 3platforms from one codebase: macOS, iPadOS and iOS
- 4built-in themes: Ember, System, Nebula and Graphite
- 12artwork styles, drawn from a seed for covers and placeholders
Platforms
Emulate all Apple interfaces using the UI SDK.
Put data-platform on any element and the components inside take that platform’s sizes and habits. Here is the same settings form three times, with no changes to its code.
Themes
Easily customize themes for your brand.
A theme answers about a dozen questions: the accent, the ink, the surfaces, a tint for fills, a radius scale and a font. Every other color, shadow and corner derives from those seeds, in light and dark.
[data-theme="acme"] {
--mb-accent: light-dark(#6d3df5, #9b7bff);
--mb-accent-secondary: light-dark(#c026a8, #ff7ad9);
--mb-ink: light-dark(#14102b, #f3f1ff);
--mb-bg: light-dark(#ffffff, #100c24);
--mb-tint: light-dark(#66618a, #9a94c9);
--mb-radius-scale: 1.15;
}Components
Every UI element from the Human Interface Guidelines (and more).
Menus, sliders, calendars, alerts and command palettes that look and behave like the native control, at a glance and under the hand. Every tile below works.
November 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 |
Click it, or use its shortcut from anywhere on this page.
Materials and motion
Glass materials and motion straight from Swift UI, built for the web.
Bars, sidebars and menus are translucent and blur what’s behind them, and turn solid when someone asks for less transparency. Movement runs on spring curves, shipped as CSS tokens.
Accessibility and agents
Built on ui-sdk.
Ready for people and agents.
macbetter adds the Apple look and feel. Behavior comes from ui-sdk, shadcn’s headless component library, so the hard parts of every control are already built and tested.
Keyboard. Arrow keys, typeahead, Escape and shortcuts work the way each control works on a Mac.
Focus. Dialogs and menus move focus in and give it back. Keyboard focus shows the accent ring.
ARIA. Roles, names and states come from ui-sdk, so screen readers hear a switch as a switch.
Right to left. Layouts use logical properties and mirror their glyphs. Set dir="rtl" and it flips.
Server rendering. Components render on the server, and the platform is set before the first paint.
Agents. ui-sdk’s agent bridge lists every control by name and state, and acts through the same API people use.
pnpm add macbetter @ui-sdk/react @ui-sdk/coreimport { Button } from "macbetter/button"
import { Switch } from "macbetter/switch"
export function JoinNetwork() {
return (
<form data-theme="nebula" data-platform="ios">
<label>
Wi-Fi
<Switch defaultChecked />
</label>
<Button variant="filled" type="submit">
Join network
</Button>
</form>
)
}Get started
Extremely easy to implement
Install the package, import a button, and add the rest as you need them. Every component has a page with live examples for all three platforms.