Registry

The macOS 27 theme: colors, fills, materials, text styles, radii and control sizes, mapped onto shadcn tokens. Import app/macos.css from your global stylesheet.

Push buttons in every macOS 27 style: the accent-filled default button, bordered, tinted, borderless and destructive, from mini to extra large.

A single-line text field with the macOS hairline border and accent focus ring.

A multi-line text field that grows with its content.

An accessible label for form controls, set in the macOS body text style.

A capsule search field with a magnifying glass, in content, Liquid Glass toolbar and sidebar styles, and a filter field.

A 16pt rounded checkbox that fills with the accent color, with mixed state support.

A set of radio buttons where only one can be selected at a time.

The macOS 27 toggle with a pill-shaped knob, in mini, small, medium and large sizes.

A thin capsule track with the macOS 27 pill knob. Supports ranges and tick marks.

A number field with the small up and down arrows beside it, stepped by clicks, held arrows and the keyboard.

A determinate progress bar in the accent color.

A pop-up button that opens a menu of options, in bordered and System Settings styles.

A tabs for switching between views, with a plain tab bar variant.

A hairline that divides content horizontally or vertically.

A pull-down menu with shortcuts, checkmarks, submenus and the macOS 27 rounded highlight.

The menu that appears on right-click or Control-click.

The macOS menu bar: the app menus on the left and status items with the clock on the right.

A modal panel window with a close button in the traffic light position.

A macOS 27 alert: a narrow glass panel with a bold title, message and capsule buttons.

A panel that slides in from an edge of the window.

Rich content in a glass bubble attached to a control.

A small label that explains a control on hover.

The window frame: corner radius, shadow, traffic lights, the inactive state, dragging, resizing, and minimizing into the Dock.

The Liquid Glass shelf of app icons with magnification, running indicators, badges, labels and auto-hide. Windows minimize into it.

The System Settings layout: titled sections of rounded groups, each row a label and a control.

An inspector pane like Xcode's or Pages': sections of right-aligned labels beside small controls.

The colored rounded-square icons used in System Settings and other lists.

A round picture of a person, with initials on the macOS contact gradient as a fallback.

shadcn/ui's Recharts charts, restyled after Swift Charts: secondary axis labels, hairline grids, round markers and a glass tooltip.

A button that stays pressed, like Bold in a format bar.

Toggles in a row: one of several, or any number with multiple.

Buttons and fields joined into one control, like the + and − buttons under a list.

Form layout: a label, the control, a description and errors, in groups and fieldsets.

A text field with icons, text or buttons inside it.

A verification code field with one box per character, on Base UI's OTP Field.

The browser's own select, dressed as a macOS pop-up button.

A text field that filters a menu of choices as you type.

The macOS graphical date picker: today in red, the chosen day on an accent circle.

An inline callout in a pane: a tinted box with a symbol, a title and a description.

A small capsule: an accent label, a grey count or the red badge of a Dock icon.

The macOS spinning progress indicator: twelve spokes that turn a step at a time.

A grey placeholder that pulses while content loads.

The empty state of a list or pane: a large grey symbol, a title and a hint.

macOS notifications: glass banners at the top right that slide in and stack.

A path like Finder's path bar: small icons and names, separated by chevrons.

Page links: borderless, with the current page filled with the accent color.

Site navigation with menus that morph from one to the next, on the menu material.

A command palette in the style of Spotlight, built on cmdk.

A macOS box: a rounded panel with a hairline edge, a header, content and a footer.

Disclosure sections like Finder's Get Info window, with triangles that turn as they open.

A section that shows and hides its content with a height animation.

Slides you swipe or step through with round arrow buttons, built on Embla.

Keeps content, such as an image, at a width-to-height ratio.

A row of a list: an icon or picture, a title and description, and actions at the end.

Key caps for keyboard shortcuts: ⌘, ⇧, ⌥, ⌃ and letters.

A plain table styled as a macOS list: grey column titles, stripes and an accent selected row.

An outline of rows that open and close with disclosure triangles, with arrow-key navigation and focused and unfocused selection.

A scrolling region with macOS overlay scrollers that appear while you scroll.

A split view: panels with dividers to drag, like Mail's message list and preview.

Code with syntax colors in SF Mono, a title, line numbers and a copy button.

A preview that appears while the pointer rests on a link, on the popover's glass.

A panel that slides in from an edge and can be swiped away.

Sets left-to-right or right-to-left for the Base UI parts inside.

Message bubbles as in Messages: blue for what you send, grey for what you receive.

A message with its sender, avatar and footer, holding one or more bubbles.

A transcript that keeps the newest message in view, with a button back to it.

A file in a message: its icon or picture, name and size, with an upload state.

A note between messages: a date, a status or a divider.

The steps an assistant takes, with status and details that unfold.

Questions asked one at a time, with choices, text answers and progress.

A sign-in window with email and password, a remember-me checkbox and a password-reset confirmation.

An app's Settings window: a tabs switches between General, Appearance and Notifications, each a grouped form of switches, pop-up buttons and a slider.

A save dialog with a file name, a folder pop-up, optional tags, and Cancel and Save.

A short reminder list you can search, check off and add to.

A feedback window with a topic, a subject, a message and a short thank-you after sending.