Components
Controls, menus, windows and lists in the style of macOS 27. Each one is a shadcn/ui component you install with the CLI.
Controls
ButtonPush buttons in every macOS 27 style: the accent-filled default button, bordered, tinted, borderless and destructive, from mini to extra large.Text FieldA single-line text field with the macOS hairline border and accent focus ring.Text AreaA multi-line text field that grows with its content.LabelAn accessible label for form controls, set in the macOS body text style.Search FieldA capsule search field with a magnifying glass, in content, Liquid Glass toolbar and sidebar styles, and a filter field.CheckboxA 16pt rounded checkbox that fills with the accent color, with mixed state support.Radio GroupA set of radio buttons where only one can be selected at a time.SwitchThe macOS 27 toggle with a pill-shaped knob, in mini, small, medium and large sizes.SliderA thin capsule track with the macOS 27 pill knob. Supports ranges and tick marks.StepperA number field with the small up and down arrows beside it, stepped by clicks, held arrows and the keyboard.Progress IndicatorA determinate progress bar in the accent color.Pop-up ButtonA pop-up button that opens a menu of options, in bordered and System Settings styles.TabsA tabs for switching between views, with a plain tab bar variant.SeparatorA hairline that divides content horizontally or vertically.ToggleA button that stays pressed, like Bold in a format bar.Toggle GroupToggles in a row: one of several, or any number with multiple.Button GroupButtons and fields joined into one control, like the + and − buttons under a list.
Forms
FieldForm layout: a label, the control, a description and errors, in groups and fieldsets.Input GroupA text field with icons, text or buttons inside it.OTP InputA verification code field with one box per character, on Base UI's OTP Field.Native SelectThe browser's own select, dressed as a macOS pop-up button.Combo BoxA text field that filters a menu of choices as you type.CalendarThe macOS graphical date picker: today in red, the chosen day on an accent circle.
Menus & Overlays
MenuA pull-down menu with shortcuts, checkmarks, submenus and the macOS 27 rounded highlight.Context MenuThe menu that appears on right-click or Control-click.Menu BarThe macOS menu bar: the app menus on the left and status items with the clock on the right.DialogA modal panel window with a close button in the traffic light position.AlertA macOS 27 alert: a narrow glass panel with a bold title, message and capsule buttons.SheetA panel that slides in from an edge of the window.PopoverRich content in a glass bubble attached to a control.TooltipA small label that explains a control on hover.Hover CardA preview that appears while the pointer rests on a link, on the popover's glass.DrawerA panel that slides in from an edge and can be swiped away.
Feedback
AlertAn inline callout in a pane: a tinted box with a symbol, a title and a description.BadgeA small capsule: an accent label, a grey count or the red badge of a Dock icon.SpinnerThe macOS spinning progress indicator: twelve spokes that turn a step at a time.SkeletonA grey placeholder that pulses while content loads.EmptyThe empty state of a list or pane: a large grey symbol, a title and a hint.ToastmacOS notifications: glass banners at the top right that slide in and stack.
Navigation
BreadcrumbA path like Finder's path bar: small icons and names, separated by chevrons.PaginationPage links: borderless, with the current page filled with the accent color.Navigation MenuSite navigation with menus that morph from one to the next, on the menu material.CommandA command palette in the style of Spotlight, built on cmdk.
Windows & Layout
WindowThe window frame: corner radius, shadow, traffic lights, the inactive state, dragging, resizing, and minimizing into the Dock.DockThe Liquid Glass shelf of app icons with magnification, running indicators, badges, labels and auto-hide. Windows minimize into it.ToolbarProThe unified window toolbar: a title, Liquid Glass button groups and a search field.Toolbar Button GroupProLiquid Glass capsules of toolbar buttons: actions like back and forward, or a set that works like radio buttons, like Finder's view switcher.SidebarProA full-height source list sidebar with sections, symbols and selection.Grouped FormThe System Settings layout: titled sections of rounded groups, each row a label and a control.InspectorAn inspector pane like Xcode's or Pages': sections of right-aligned labels beside small controls.Icon TileThe colored rounded-square icons used in System Settings and other lists.AvatarA round picture of a person, with initials on the macOS contact gradient as a fallback.
Lists & Tables
File List TableProA list view with a sortable header, 20pt rows, alternating stripes and disclosure triangles.File List ColumnsProA plain list as used by Finder's column view, with focused and unfocused selection.File List Icon ViewProFinder's icon view: big icons and thumbnails in a grid, with date groups, drag to select and drag to move.File List Gallery ViewProFinder's gallery view: a large preview over a strip of thumbnails, with the file's information beside it.Tree ViewAn outline of rows that open and close with disclosure triangles, with arrow-key navigation and focused and unfocused selection.Chartshadcn/ui's Recharts charts, restyled after Swift Charts: secondary axis labels, hairline grids, round markers and a glass tooltip.
Content
CardA macOS box: a rounded panel with a hairline edge, a header, content and a footer.AccordionDisclosure sections like Finder's Get Info window, with triangles that turn as they open.CollapsibleA section that shows and hides its content with a height animation.CarouselSlides you swipe or step through with round arrow buttons, built on Embla.Aspect RatioKeeps content, such as an image, at a width-to-height ratio.ItemA row of a list: an icon or picture, a title and description, and actions at the end.KbdKey caps for keyboard shortcuts: ⌘, ⇧, ⌥, ⌃ and letters.TableA plain table styled as a macOS list: grey column titles, stripes and an accent selected row.Scroll AreaA scrolling region with macOS overlay scrollers that appear while you scroll.ResizableA split view: panels with dividers to drag, like Mail's message list and preview.Code BlockCode with syntax colors in SF Mono, a title, line numbers and a copy button.DirectionSets left-to-right or right-to-left for the Base UI parts inside.
Chat
BubbleMessage bubbles as in Messages: blue for what you send, grey for what you receive.MessageA message with its sender, avatar and footer, holding one or more bubbles.Message ScrollerA transcript that keeps the newest message in view, with a button back to it.AttachmentA file in a message: its icon or picture, name and size, with an upload state.MarkerA note between messages: a date, a status or a divider.TraceThe steps an assistant takes, with status and details that unfold.QuestionnaireQuestions asked one at a time, with choices, text answers and progress.