macOS-style components for shadcn/ui with a free MIT-licensed core, CSS-variable theming, and light and dark appearance.
Disclosure sections like Finder's Get Info window, with triangles that turn as they open.
An inline callout in a pane: a tinted box with a symbol, a title and a description.
A macOS 27 alert: a narrow glass panel with a bold title, message and capsule buttons.
Keeps content, such as an image, at a width-to-height ratio.
A file in a message: its icon or picture, name and size, with an upload state.
A round picture of a person, with initials on the macOS contact gradient as a fallback.
A small capsule: an accent label, a grey count or the red badge of a Dock icon.
A path like Finder's path bar: small icons and names, separated by chevrons.
Message bubbles as in Messages: blue for what you send, grey for what you receive.
Push buttons in every macOS 27 style: the accent-filled default button, bordered, tinted, borderless and destructive, from mini to extra large.
Buttons and fields joined into one control, like the + and − buttons under a list.
The macOS graphical date picker: today in red, the chosen day on an accent circle.
A macOS box: a rounded panel with a hairline edge, a header, content and a footer.
Slides you swipe or step through with round arrow buttons, built on Embla.
shadcn/ui's Recharts charts, restyled after Swift Charts: secondary axis labels, hairline grids, round markers and a glass tooltip.
A 16pt rounded checkbox that fills with the accent color, with mixed state support.
Code with syntax colors in SF Mono, a title, line numbers and a copy button.
A section that shows and hides its content with a height animation.
A text field that filters a menu of choices as you type.
A command palette in the style of Spotlight, built on cmdk.
The menu that appears on right-click or Control-click.
A modal panel window with a close button in the traffic light position.
Sets left-to-right or right-to-left for the Base UI parts inside.
The Liquid Glass shelf of app icons with magnification, running indicators, badges, labels and auto-hide. Windows minimize into it.
A panel that slides in from an edge and can be swiped away.
The empty state of a list or pane: a large grey symbol, a title and a hint.
A feedback window with a topic, a subject, a message and a short thank-you after sending.
Form layout: a label, the control, a description and errors, in groups and fieldsets.
The System Settings layout: titled sections of rounded groups, each row a label and a control.
A preview that appears while the pointer rests on a link, on the popover's glass.
The colored rounded-square icons used in System Settings and other lists.
A text field with icons, text or buttons inside it.
An inspector pane like Xcode's or Pages': sections of right-aligned labels beside small controls.
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.
An accessible label for form controls, set in the macOS body text style.
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.
A note between messages: a date, a status or a divider.
A pull-down menu with shortcuts, checkmarks, submenus and the macOS 27 rounded highlight.
The macOS menu bar: the app menus on the left and status items with the clock on the right.
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.
The browser's own select, dressed as a macOS pop-up button.
Site navigation with menus that morph from one to the next, on the menu material.
A verification code field with one box per character, on Base UI's OTP Field.
Page links: borderless, with the current page filled with the accent color.
Rich content in a glass bubble attached to a control.
A pop-up button that opens a menu of options, in bordered and System Settings styles.