UI showcase

Design stack

shadcn/ui-style components live under components/ui. Primitives are from Base UI (@base-ui/react), not Radix. Icons in this showcase use Lucide (lucide-react) for consistency with the rest of the kit.

Next.js 16

App Router, React 19, Tailwind v4.

shadcn registry

Composable UI modules you own and can restyle.

Base UI

Accessible primitives: Dialog, Popover, Menu, Select, etc.

Lucide

Stroke icons via lucide-react (Icon suffix exports in this repo).

Alert

macOS alert panel from Figma 121:11166 (stacked full-width pill actions and side-by-side footer). appearance="callout" is the bordered inline alert from shadcn docs.

Panel — stacked (Type=Stacked)

Save this message as a draft?

This message has not been sent and contains unsaved changes. You can save it as a draft to work on later.

Panel — side-by-side (Type=Side-by-side)

Save this message as a draft?

This message has not been sent and contains unsaved changes. You can save it as a draft to work on later.

Panel — destructive tone

Delete this item?

This action cannot be undone. The file will be removed from iCloud and this device.

Callout (shadcn-style inline)

Heads up

Bordered inline alert — use appearance="callout".

Error

Something went wrong.

AlertDialog

Modal primitive (Base UI) with the same sheet chrome as Dialog. Trigger opens a focused confirmation.

Component catalog

Registry-style modules in this repo, grouped for navigation. Overlays and forms map closely to shadcn docs; implementation uses Base UI where the template specifies it.

Actions & buttons

buttonbutton-grouptoggletoggle-groupdropdown-menucontext-menumenubarnavigation-menu

Forms & inputs

inputtextarealabelcheckboxradio-groupswitchselectnative-selectsliderfieldinput-groupinput-otpsearch-fieldstepper-fieldcombo-box-fieldcomboboxcalendarform (via field)

Overlays & surfaces

dialogalert-dialogsheetdrawerpopovertooltiphover-cardcommand

Layout & structure

cardseparatorscroll-arearesizablesidebartabsaccordioncollapsibleaspect-ratio

Feedback & data

alertalert-footeralert-buttonprogressspinnerskeletonsonneravatarbadgestatus-badgetablelist-group-titleemptypaginationchartcarousel

macOS Figma kit (custom)

glass-panelmaterial-swatchaccent-swatchesswitch-matrixsegmented-controlgroup-boxcolor-welltoolbarmenu-barmenu-bar-leadingmenu-bar-trailingmenu-bar-logomenu-bar-metadocktitle-barwindow-framemac-notificationdisclosure-rowlist-item-rowimage-welldial-controlmeter-barprogress-ringnotification-bannerpull-down-buttoncontrol-captionhelp-popover

Figma macOS kit → code audit

Manual coverage check against kit pages. “Partial” means a subset or web-approximation (e.g. cursors, complex form layouts).

Kit page	Status	Implementation notes
Alerts	Done	Alert panel + AlertButton (Figma 121:11166), callout appearance, AlertDialog, NotificationBanner
Boxes	Done	GroupBox, Card
Buttons	Done	Button (Figma 121:11922 push metrics + accent), ButtonGroup, Toggle, PullDownButton
Color Wells	Done	ColorWell, AccentSwatches
Combo Boxes	Done	ComboBoxField (Figma 121:11950), Combobox
Dialogs	Done	Dialog (Figma 121:11578 shell), AlertDialog
Disclosure Controls	Done	DisclosureRow, Collapsible, Accordion
Forms	Partial	Field, inputs; kit captions via ControlCaption
Image Wells	Done	ImageWell
Lists and Tables	Done	Table + TableHead (121:12606), ListItemRow, ListGroupTitle, outline indent + disclosure
Menu Bar and Dock	Done	MenuBar + leading/trailing/logo/meta (Figma 121:13196; shell-ready for TopBar), Dock
Menus	Done	DropdownMenu, ContextMenu, Menubar
Notifications	Done	Sonner, NotificationBanner
Pointers	Partial	Showcase cursor tiles; no SVG cursor assets
Pop-up and Pull-down Buttons	Done	Select + Combobox lists (Figma 121:11977 / Menus 121:12539), POPUP_TRIGGER on /ui; PullDownButton
Popovers	Done	Popover + HoverCard (Figma 121:11282 — 13px radius, layered shadow, SVG beak); nav viewport uses same elevation tokens
Progress Indicators	Done	Progress linear (Figma 121:12207 — 10/6pt pill, tint fill, indeterminate sweep), Spinner, ProgressRing, MeterBar
Search Fields	Done	SearchField
Segmented Controls	Done	SegmentedControl, Tabs
Scrollbar	Done	ScrollArea (default + system thumb)
Sheets	Done	Sheet, Drawer
Sidebars	Done	Sidebar
Sliders and Dials	Done	Slider, DialControl
Steppers	Done	StepperField, StepperRail (inside / outside / no field)
Text Fields	Done	Input, Textarea, InputGroup
Toggles	Done	Switch, SwitchMatrix, Checkbox, RadioGroup
Toolbars and Titlebars	Done	Toolbar, toolbar-kit (well, icon, pop-up, pull-down, search, utility tabs), TitleBar layouts, WindowFrame
Tooltips	Done	Tooltip
Windows	Done	WindowFrame, TitleBarChrome
Colors / Materials / Text Styles	Partial	globals.css tokens; MaterialSwatch

Figma file — all pages

Full document scan: file scLfie3Vn4Ep1pxIjRKioO. Separator rows in Figma are omitted from this list. Examples page includes frames such as Notifications, Utility Window, Dialog/Save, Alerts, Menus, List, Form.

Page	Category
Cover	Meta
Getting Started	Meta
Examples	Examples
Colors	Foundation
Materials	Foundation
Text Styles	Foundation
Alerts	Components
Boxes	Components
Buttons	Components
Color Wells	Components
Combo Boxes	Components
Dialogs	Components
Disclosure Controls	Components
Forms	Components
Image Wells	Components
Lists and Tables	Components
Menu Bar and Dock	Components
Menus	Components
Notifications	Components
Pointers	Components
Pop-up and Pull-down Buttons	Components
Popovers	Components
Progress Indicators	Components
Search Fields	Components
Segmented Controls	Components
Scrollbar	Components
Sheets	Components
Sidebars	Components
Sliders and Dials	Components
Steppers	Components
Text Fields	Components
Toggles	Components
Toolbars and Titlebars	Components
Tooltips	Components
Windows	Components
Change log	Meta
License	Meta
_Kit	Internal

GlassPanel

Present in the macOS kit file; liquid-glass frost steps (web approximation).

Regular

Medium

Large

AccentSwatches

System accent swatches from the Appearance collection.

red

orange

yellow

green

mint

teal

cyan

blue

indigo

purple

pink

brown

SegmentedControl

Figma 121:12394 — tab-like segments with optional panels (Base UI Tabs).

With selection — panels mirror the active segment.

List content

No selection (inset dividers) — set defaultValue={null} (Base UI Tabs).

Size variants — size on SegmentedControlList (sm · md · lg · xl).

Materials (frost)

Figma: Materials — liquid glass blur steps (web approximation).

Regular frost

Medium frost

Large frost

Semantic colors

CSS variables from Appearance collection.

Background

Foreground

Primary

Muted

Card

Destructive

Border sample

Buttons

Push buttons from Figma (121:11922): 24px height, 16px horizontal padding, 6px corner radius, SF footnote weight. Default / Preferred = default; Bordered neutral = outline; Bordered secondary = secondary; Bordered colored = accent; Bordered destructive = destructive; Borderless = ghost.

Variants (default size, 24px)

Sizes

Icon & arrow-style (24px well)

ButtonGroup

Preset

Icon pair (toolbar)

Toggle

Toolbar-style press toggle; metrics match push buttons. Variants: default / outline. Sizes: sm, default, lg.

ToggleGroup

Exclusive or multi-select groups sharing outline chrome.

Multiple selection

Single selection (default)

Accordion

Panel: frosted shell and dividers. Cards: stacked surfaces for FAQs and marketing.

Supporting copy for the first panel.

Each row is its own glassy card with an open-state ring.

Collapsible

Show / hide a region without accordion chrome.

Details

Input & Label

Text fields match Figma 121:12220 (idle / focus / disabled), 479:5336 (content vs form vs over-glass), and the 16–36px height ramp 480:340.

Figma-style secondary label / caption under the field.

Text field heights (fieldSize)

Surface context (fieldContext)

Disabled

Textarea

Multi-line field with kit typography.

Notes

Checkbox

Checked, unchecked, indeterminate, disabled, and inactive-window styling.

Accept terms

Inactive window · mixed checkbox

Mixed

Checkbox

Radio group

Horizontal group with inactive-window item styling.

Option A

Option B

Radio (inactive window)

Switch

Default and large sizes; active vs inactive window chrome.

Inactive window

Tabs

shadcn-style Tabs on Base UI primitives — list triggers and animated panels.

Profile panel

Card

Header, description, and content regions.

Card

Description text

Content area

Badge

Primitives plus Apple-style capsule tones (`neutral`, `success`, `warning`, `info`). Use `StatusBadge` for API / workflow tokens.

DefaultSecondaryOutlineDestructiveGhostLinkNeutralSuccessWarningInfo

StatusBadge (inferred tone + optional dot)

ActivePaidPast DueDraftRunningFailedPlanned

Toast & macOS notification

Sonner toasts and the custom MacNotificationToast layout.

Progress

Determinate bar with label/value row; indeterminate size="sm" variant.

Export

Indeterminate

Slider

Range input with kit track and thumb. Optional ticks, center bias, and midline.

Default

Ticks

Center bias + midline

Spinner

Inline loading indicator.

Skeleton

Placeholder block for loading layouts.

Dialog

Save-sheet chrome from Figma 121:11578 (26px radius, 20px padding, dual shadow). Pass size="sm" for 390px-wide sheets.

Dropdown menu

Pop-up control track and list from Figma 121:11977 (shared list chrome with Menus 121:12539).

Select

Single-select with the same pop-up chrome as menus.

Popover

Anchored floating panel (Base UI Popover).

Tooltip

Hover or focus hint anchored to a trigger.

Sheet

Side sheet / inspector (Vaul) with kit header chrome.

Kbd

Keyboard shortcut styling for inline help.

⌘K

GroupBox

Bordered field group from the kit.

Group box

Field

ColorWell

Selectable color chips for pickers.

Toolbar

Figma 647:1886, 648:4796, 641:1685 — segmented icon groups, pop-up / pull-down wells, and embedded search.

UtilityPanelTabStrip

Utility window tab strip (Figma 121:11770).

DisclosureRow

Single-row disclosure with nested body.

Nested content for settings or inspector sections.

StepperField & StepperRail

Inside vs outside rails, inactive window, and rail-only control (121:12079).

Inside field (540:1629)

Outside field (540:4659)

Inactive window

StepperRail only

SearchField

Search control with clear affordance.

Query

ComboBoxField

Figma 121:11950 — 24px height, hairline bezel, inset chevron well (same outer ring as ButtonGroup).

Region

ImageWell

Image drop / picker well (kit Image Wells).

ListItemRow

Figma 121:12606 — levels, tones, stripe, disclosure, and ListGroupTitle.

Locations

Macintosh HD

Local disk

Documents

Annual_Report.pdf

12 pages · PDF

1.2 MB

Draft_notes.pages

In progress

Shared copy (inactive window)

Gray selection fill

Archived.zip

Read-only

Alternating row

stripe="subtle" (quaternary fill)

DialControl

Circular range input with top tick (Figma 121:12063 / 293:1110). Sizes sm through xl.

Default (24px)

All sizes

MenuBar & Dock

Menu bar: Figma 121:13196 (frosted strip, 4px hit radii, 11px horizontal item padding). MenuBarLeading / Trailing match Layer 0 TopBar; Dock shows pill icon row.

ScrollArea

Default kit scrollbar vs system thumb variant.

Default scrollbar

Scrollable line 1

Scrollable line 2

Scrollable line 3

Scrollable line 4

Scrollable line 5

Scrollable line 6

Scrollable line 7

Scrollable line 8

Scrollable line 9

Scrollable line 10

Scrollable line 11

Scrollable line 12

System thumb

Scrollable line 1

Scrollable line 2

Scrollable line 3

Scrollable line 4

Scrollable line 5

Scrollable line 6

Scrollable line 7

Scrollable line 8

Scrollable line 9

Scrollable line 10

Scrollable line 11

Scrollable line 12

WindowFrame

Figma 651:9252, 585:3384 — unified document chrome with toolbar; utility panel layout with compact title bar.

Unified title + toolbar

Document

— Edited

Window body uses kit control font size and translucent fill.

Utility panel

Utilities

22px title bar, 10px traffic lights (585:3384).

TitleBarChrome

Document-leading title strip (651:9252) without full window body.

Notes

Shared folder— Edited

PullDownButton

Label + chevron well pop-up (Save dialog control).

NotificationBanner

Inline dismissible strip; all tone variants.

ReminderDefault tone — general notices.

Software updateVersion 26.1 is ready to install.

SavedChanges synced to iCloud.

Storage almost fullFree up space to keep syncing.

Sync failedCheck your network connection and try again.

ProgressRing

Circular determinate progress.

MeterBar

Labeled horizontal meter readout.

Cursors

Reference tiles for pointer styles used in kit examples.

Default

Text

Crosshair

Resize NS

Grab

Sidebar (static preview)

SidebarProvider + collapsible="none" for a non-overlay strip (Figma: Sidebars).

Table (lists)

Figma 121:12606: 28px column headers (11px label + sort glyph), 20px body rows, hairline borders, striped alternating quaternary fill, secondary column tint. Use aria-sort on TableHead; data-state="selected" on TableRow for active selection.

Name	Kind	Size
Document.pdf	File	1.2 MB
Archive	Folder	—

Design stack

Alert

AlertDialog

Component catalog

Figma macOS kit → code audit

Figma file — all pages

GlassPanel

AccentSwatches

SwitchMatrix

SegmentedControl

Materials (frost)

Semantic colors

Buttons

Toggle

ToggleGroup

Accordion

First item

Second item

Card stack — first

Card stack — second

Collapsible

Input & Label

Textarea

Checkbox

Radio group

Switch

Tabs

Card

Badge

Toast & macOS notification

Progress

Slider

Spinner

Skeleton

Dialog

Dropdown menu

Select

Popover

Tooltip

Sheet

Kbd

GroupBox

ColorWell

Toolbar

UtilityPanelTabStrip

DisclosureRow

StepperField & StepperRail

SearchField

ComboBoxField

ImageWell

ListItemRow

DialControl

MenuBar & Dock

ScrollArea

WindowFrame

TitleBarChrome

PullDownButton

NotificationBanner

ProgressRing

MeterBar

Cursors

Sidebar (static preview)

Table (lists)

Avatar