Build prompt · GPUIxUI

Paste this into an agent before it starts. It is generated at build time from the pages the site ships: component rows from the Components index, block rows from the block pages' frontmatter.

416 words of instructions · 116 components · 18 blocks

# GPUIxUI

A React component library for **GPUix**, a native desktop UI runtime. Components
are TypeScript, themed by semantic roles, and rendered by GPUix's reconciler
rather than the DOM. Tags are GPUix hosts (`div`, `text`, `img`, `input`,
`anchored`), so a browser habit that needs the DOM does not always carry over.

## Install

    npx shadcn@latest add @sudokw/primitives-button

`shadcn add` writes the component's source, the `@gpuixui/*` runtime and the
npm packages it imports. Items are `<package>-<component>`, listed with
`npx shadcn@latest search @sudokw`. React 19; `@gpuix/native` is prebuilt for
Apple Silicon, Linux x64 and Windows.

The copied files need the GPUix JSX runtime:

    { "jsx": "react-jsx", "jsxImportSource": "@gpuix/react" }

## Run

The repository is a workspace on Node 24 with `nub`:

    nub install
    nub run dev:docs         # the documentation site
    nub run dev:playground   # the native playground window
    nub run check            # types, exports, lint, format
    nub run test             # every package
    nub run --filter <pkg> test

`nub run fmt` does not apply the repo's formatter config; use
`sh node_modules/.bin/oxfmt --config .oxfmtrc.json <files>`.

## Window

    render(<App />, {
      title: "My app", width: 1100, height: 720,
      minWidth: 720, minHeight: 480,
    });

GPUix opens one window per process. Always set `minWidth`/`minHeight`: a shell of
a 260px rail beside a pane has a size below which neither fits, and without a
minimum the window lets a pane collapse into a clipped column.

## Appearance

A docs page carries no appearance in its URL: the platform switch is the app's
own state — React for the page, local storage for the next visit — so a URL
names the page and nothing else. The switch offers three axes: the platform
(`darwin`, `win32`, `linux`, `default`), the palette (`dark`, `light`) and
an authored look (`luna`, `aero`, `omarchy`).

There is **no OS appearance query** in GPUix 0.11.0 (a measured absence: no
`appearance`, `prefers*` or `reduce*` export). The app owns the mode and passes
it in; `@gpuixui/motion` takes reduced motion as a boolean for the same reason.

## Rules

- Effect for logic: typed failures, `Option` for absence, `Schema` at
  boundaries. No `any`, no casts, no `@ts-ignore`.
- Semantic roles only (`bg-card`, `text-muted-foreground`); a literal colour
  fails review.
- Every fix lands with a test that fails without it.
- No `transform` in native code: the runtime has none.

## Contribute

Fork, branch from `master`, keep the change one idea, and run the gates before
pushing. A component needs its page (`packages/<pkg>/docs/<name>.mdx`), an
inventory row, and a behaviour test. Report runtime limits rather than mocking
them.

## Components (116)

- Accordion — Stacked sections, one or several open (https://gpuixui.sudokw.com/components/accordion)
- Alert — A persistent, in-flow message about the current state (https://gpuixui.sudokw.com/components/alert)
- Aspect ratio — A box whose height follows its width through one ratio (https://gpuixui.sudokw.com/components/aspect-ratio)
- Auth — Sign in, sign up, reset and one-time codes (https://gpuixui.sudokw.com/components/auth)
- Auto height — A reveal that grows to its content's measured height (https://gpuixui.sudokw.com/components/auto-height)
- Avatar — A person or team as a picture, falling back to initials (https://gpuixui.sudokw.com/components/avatar)
- Avatar group — A facepile of overlapping avatars with an overflow chip (https://gpuixui.sudokw.com/components/avatar-group)
- Badge — A short status label on a pill, never a control (https://gpuixui.sudokw.com/components/badge)
- Breadcrumb — The trail to the current page, with a collapsing middle (https://gpuixui.sudokw.com/components/breadcrumb)
- Bubble — The message surface, with variants and reactions (https://gpuixui.sudokw.com/components/bubble)
- Button — The primary action, with busy and disabled states (https://gpuixui.sudokw.com/components/button)
- Calendar — A month grid for a day, several days, or a range (https://gpuixui.sudokw.com/components/calendar)
- Card — A bounded surface that groups related content (https://gpuixui.sudokw.com/components/card)
- Carousel — Discrete slide stepping, a dot per slide, arrow keys (https://gpuixui.sudokw.com/components/carousel)
- Chat — A conversation with a following transcript (https://gpuixui.sudokw.com/components/chat)
- Checkbox — An independent yes/no with an optional mixed state (https://gpuixui.sudokw.com/components/checkbox)
- Code block — Source or output, tokenized by @tanstack/highlight (https://gpuixui.sudokw.com/components/code-block)
- Collapsible — One section that reveals its body on demand (https://gpuixui.sudokw.com/components/collapsible)
- Color picker — A swatch that opens the saturation, hue and alpha rails (https://gpuixui.sudokw.com/components/color-picker)
- Color swatches — One colour chosen from a fixed row (https://gpuixui.sudokw.com/components/color-swatches)
- Combobox — A searchable single- or multi-select with ranked options (https://gpuixui.sudokw.com/components/combobox)
- Command menu — A searchable action list, the ⌘K palette (https://gpuixui.sudokw.com/components/command-menu)
- Confirmation dialog — The safe workflow for an action that cannot be undone (https://gpuixui.sudokw.com/components/confirm-dialog)
- Context menu — Menu rows at the pointer, or opened from the keyboard (https://gpuixui.sudokw.com/components/context-menu)
- Copy button — An icon action that copies a value and acknowledges it (https://gpuixui.sudokw.com/components/copy-button)
- Countdown — A remaining duration as clock text (https://gpuixui.sudokw.com/components/countdown)
- Counting number — A number that counts to its value (https://gpuixui.sudokw.com/components/counting-number)
- Date picker — A day or a span of days, chosen from a Calendar (https://gpuixui.sudokw.com/components/date-picker)
- Diagram — A Mermaid source, drawn by Pele (https://gpuixui.sudokw.com/components/diagram)
- Dialog — A modal surface that takes the window until it is dismissed (https://gpuixui.sudokw.com/components/dialog)
- Disclosure — An inspector section headed by a triangle (https://gpuixui.sudokw.com/components/disclosure)
- Drawer — A modal panel anchored to any window edge (https://gpuixui.sudokw.com/components/drawer)
- Dropdown menu — A list of actions anchored to the control that opened it (https://gpuixui.sudokw.com/components/dropdown-menu)
- Empty state — The panel a collection shows when it has no rows (https://gpuixui.sudokw.com/components/empty-state)
- Field and inline validation — A label, control and one message slot around an input (https://gpuixui.sudokw.com/components/field)
- Fieldset — A named group of fields with a disabled state (https://gpuixui.sudokw.com/components/fieldset)
- Form — Schema validation and a submit lifecycle around fields (https://gpuixui.sudokw.com/components/form)
- Glyph — A wall of generated characters for its own box (https://gpuixui.sudokw.com/components/glyph)
- Gradient — A two-stop gradient surface that breathes between ramps (https://gpuixui.sudokw.com/components/gradient)
- Gradient text — A phrase painted as a per-glyph colour ramp (https://gpuixui.sudokw.com/components/gradient-text)
- Highlight text — A phrase whose matches a marker wash sweeps across (https://gpuixui.sudokw.com/components/highlight-text)
- Hotkey recorder — Capture a chord and display it as keycaps (https://gpuixui.sudokw.com/components/hotkey-recorder)
- Hover card — A rich surface previewed from a name, on hover or on focus (https://gpuixui.sudokw.com/components/hover-card)
- Image zoom — A frame whose picture magnifies under the pointer (https://gpuixui.sudokw.com/components/image-zoom)
- Inline edit — Rename a value where it is displayed (https://gpuixui.sudokw.com/components/inline-edit)
- Input group — A field and its addons inside one bordered, focus-ringed row (https://gpuixui.sudokw.com/components/input-group)
- Inset group — A settings form's grouped rows, as System Settings draws them (https://gpuixui.sudokw.com/components/inset-group)
- Item — One row of a list, with media, text and actions (https://gpuixui.sudokw.com/components/item)
- Kanban — Columns of cards a person reorders with a pointer or the arrow keys (https://gpuixui.sudokw.com/components/kanban)
- Keyboard shortcuts — A cheat sheet of chords as platform keycaps (https://gpuixui.sudokw.com/components/keyboard-shortcuts)
- Knob — A rotary control for one value in a range (https://gpuixui.sudokw.com/components/knob)
- List — Rows with one tab stop, type-ahead and a row action (https://gpuixui.sudokw.com/components/list)
- Mention input — `@name` autocompletion in a text field (https://gpuixui.sudokw.com/components/mention-input)
- Message — A typical agent conversation (https://gpuixui.sudokw.com/components/message)
- Message Scroller — Follows new content, keeps a scrolled-up reader in place (https://gpuixui.sudokw.com/components/message-scroller)
- MultiStepForm — A gated wizard over Stepper, submitted on the last step (https://gpuixui.sudokw.com/components/multi-step-form)
- Navigation menu — A horizontal nav that opens one anchored panel at a time (https://gpuixui.sudokw.com/components/navigation-menu)
- Page transition — A region that swaps views with the house motion (https://gpuixui.sudokw.com/components/page-transition)
- Pagination — Previous and next controls around a stable-width page window (https://gpuixui.sudokw.com/components/pagination)
- Pinned list — Headers that stay pinned while rows scroll under them (https://gpuixui.sudokw.com/components/pinned-list)
- Popover — A floating panel anchored to the control that opened it (https://gpuixui.sudokw.com/components/popover)
- Preview card — A rich, hoverable card shown on hover or on a press (https://gpuixui.sudokw.com/components/preview-card)
- Progress — A determinate or indeterminate bar in the caller's scale (https://gpuixui.sudokw.com/components/progress)
- Reveal — Content that fades and travels into place (https://gpuixui.sudokw.com/components/reveal)
- Scroll fade — An edge that fades where more content is hidden (https://gpuixui.sudokw.com/components/scroll-fade)
- Scroll progress — A reading line for how far through content a reader is (https://gpuixui.sudokw.com/components/scroll-progress)
- Search input — A single-line search field with a clear affordance (https://gpuixui.sudokw.com/components/search-input)
- Segmented control — One choice among a few, as a Mac view switcher (https://gpuixui.sudokw.com/components/segmented-control)
- Select — One choice from a list, in a popover (https://gpuixui.sudokw.com/components/select)
- Separator — A rule between regions, decorative or announced (https://gpuixui.sudokw.com/components/separator)
- Sheet — A modal panel anchored to any of four window edges (https://gpuixui.sudokw.com/components/sheet)
- Shimmer — A travelling highlight painted into text, or a surface band over children the runtime cannot recolour (https://gpuixui.sudokw.com/components/shimmer)
- Sidebar — The persistent navigation panel, collapsible to icons (https://gpuixui.sudokw.com/components/sidebar)
- Skeleton — A placeholder block that reserves the box content will paint (https://gpuixui.sudokw.com/components/skeleton)
- Slider — One value on a track, or the two ends of a range (https://gpuixui.sudokw.com/components/slider)
- Sliding number — A number whose digits roll like a counter (https://gpuixui.sudokw.com/components/sliding-number)
- Spinner — A ring of ticks whose lit arc steps around the circle, in three sizes (https://gpuixui.sudokw.com/components/spinner)
- Stepper — Progress through named steps, from one value (https://gpuixui.sudokw.com/components/stepper)
- Switch — An immediate on/off pill with a sliding knob (https://gpuixui.sudokw.com/components/switch)
- Table — A bounded grid with a pinned header and sortable columns (https://gpuixui.sudokw.com/components/table)
- Tabs — A roving-focus tab list and the panels it switches (https://gpuixui.sudokw.com/components/tabs)
- Tag input — Keywords entered through a field, as removable chips (https://gpuixui.sudokw.com/components/tag-input)
- Theme toggler — The control that switches light and dark (https://gpuixui.sudokw.com/components/theme-toggler)
- Time picker — A time of day, entered as an HH:mm field (https://gpuixui.sudokw.com/components/time-picker)
- Timeline — A read-only rail of events the app marks (https://gpuixui.sudokw.com/components/timeline)
- Toast — A stacked, auto-dismissing notification queue (https://gpuixui.sudokw.com/components/toast)
- Toggle — A button that stays on, for a mode the next action uses (https://gpuixui.sudokw.com/components/toggle)
- Toggle group — A toolbar of related modes with one tab stop (https://gpuixui.sudokw.com/components/toggle-group)
- Tooltip — A short label on hover (https://gpuixui.sudokw.com/components/tooltip)
- User menu — An avatar and name that open the account actions (https://gpuixui.sudokw.com/components/user-menu)
- Box — A surface with tone, padding, radius, border and flex facts (https://gpuixui.sudokw.com/primitives/box)
- ButtonGroup — A row or column of related actions, attached or separated (https://gpuixui.sudokw.com/primitives/button-group)
- Checkbox group — Several independent choices sharing one tab stop (https://gpuixui.sudokw.com/primitives/checkbox-group)
- Grid — Equal tracks in two dimensions (https://gpuixui.sudokw.com/primitives/grid)
- IconButton — A square, icon-only action with a required name (https://gpuixui.sudokw.com/primitives/icon-button)
- Input — A single-line text field, controlled or uncontrolled (https://gpuixui.sudokw.com/primitives/input)
- Label — A control's visible name, with a required marker (https://gpuixui.sudokw.com/primitives/label)
- Meter — A measurement inside a range (https://gpuixui.sudokw.com/primitives/meter)
- NumberField — A number in a text field, with steps and optional bounds (https://gpuixui.sudokw.com/primitives/number-field)
- OTPField — A one-time code in length cells, held as one string (https://gpuixui.sudokw.com/primitives/otp-field)
- Progress — A determinate or indeterminate progress bar (https://gpuixui.sudokw.com/primitives/progress)
- RadioGroup — One choice from a small set, with arrow navigation (https://gpuixui.sudokw.com/primitives/radio-group)
- RangeSlider — Two values, the ends of one interval, on one track (https://gpuixui.sudokw.com/primitives/range-slider)
- Rating — A score in stars, whole or in halves (https://gpuixui.sudokw.com/primitives/rating)
- ScrollArea — A bounded container that scrolls on the chosen axes (https://gpuixui.sudokw.com/primitives/scroll-area)
- Separator — One theme-coloured rule between regions (https://gpuixui.sudokw.com/primitives/separator)
- Skeleton — A pulsing placeholder for content that has not arrived (https://gpuixui.sudokw.com/primitives/skeleton)
- Slider — A value on a track, by click, drag or keyboard (https://gpuixui.sudokw.com/primitives/slider)
- Spacer — Empty space as a fixed step or a flexible filler (https://gpuixui.sudokw.com/primitives/spacer)
- Spinner — An activity indicator drawn as a ring whose lit arc steps around the circle, because the runtime cannot rotate (https://gpuixui.sudokw.com/primitives/spinner)
- Stack — Children laid out along one axis, spaced by the theme scale (https://gpuixui.sudokw.com/primitives/stack)
- Text — One run of type, named by a theme role and a semantic tone (https://gpuixui.sudokw.com/primitives/text)
- TextArea — A multi-line text field sized in rows (https://gpuixui.sudokw.com/primitives/textarea)
- ThemeProvider — Supplies the theme every primitive draws with (https://gpuixui.sudokw.com/primitives/theme-provider)
- Toggle — A button whose action has a persistent on/off state (https://gpuixui.sudokw.com/primitives/toggle)
- Toggle group — A toolbar of related modes, pressed and unpressed (https://gpuixui.sudokw.com/primitives/toggle-group)

## Blocks (18)

- Calendar — A month grid with the selected day's agenda beside it (https://gpuixui.sudokw.com/blocks/calendar)
- Command centre — A command palette over a dimmed page (https://gpuixui.sudokw.com/blocks/command-centre)
- Conversations — A Messages-style window in four platform dresses (https://gpuixui.sudokw.com/blocks/conversations)
- Dashboard — An activity dashboard with stats and charts (https://gpuixui.sudokw.com/blocks/dashboard)
- Dashboard 01 — shadcn's dashboard — an inset sidebar, stat cards, and a chart of every shape (https://gpuixui.sudokw.com/blocks/dashboard-01)
- Dashboard management — A settings console with a workspace rail and one column of service sections (https://gpuixui.sudokw.com/blocks/dashboard-management)
- Data table — A deploy table with filtering, sorting, selection and paging (https://gpuixui.sudokw.com/blocks/data-table)
- Desktop — A whole XP-era or Aero-era desktop, from the library (https://gpuixui.sudokw.com/blocks/desktop)
- Email inbox — A mail client with a folder rail, message list and reading pane (https://gpuixui.sudokw.com/blocks/email-inbox)
- File manager — A three-pane file browser (https://gpuixui.sudokw.com/blocks/file-manager)
- Kanban board — A hunter's contract board with counted columns (https://gpuixui.sudokw.com/blocks/kanban)
- Notifications — A notification centre with filters and grouped rows (https://gpuixui.sudokw.com/blocks/notification-centre)
- Pipeline — A release pipeline in a native Mac window (https://gpuixui.sudokw.com/blocks/pipeline)
- Profile settings — A profile page with a photo, contact details and tabbed settings (https://gpuixui.sudokw.com/blocks/profile-settings)
- Settings dialog — A modal settings window (https://gpuixui.sudokw.com/blocks/settings-dialog)
- Sidebar — Sixteen sidebar blocks on one page, grouped (https://gpuixui.sudokw.com/blocks/sidebar)
- Sign in — A full sign-in page (https://gpuixui.sudokw.com/blocks/sign-in)
- Tasks — A Notion-style tasks view with an inbox and pinned docs (https://gpuixui.sudokw.com/blocks/tasks)

Edit this page on GitHubapps/docs/content/docs/getting-started/prompt.mdx

# GPUIxUI A React component library for **GPUix**, a native desktop UI runtime. Components are TypeScript, themed by semantic roles, and rendered by GPUix's reconciler rather than the DOM. Tags are GPUix hosts (`div`, `text`, `img`, `input`, `anchored`), so a browser habit that needs the DOM does not always carry over. ## Install npx shadcn@latest add @sudokw/primitives-button `shadcn add` writes the component's source, the `@gpuixui/*` runtime and the npm packages it imports. Items are `<package>-<component>`, listed with `npx shadcn@latest search @sudokw`. React 19; `@gpuix/native` is prebuilt for Apple Silicon, Linux x64 and Windows. The copied files need the GPUix JSX runtime: { "jsx": "react-jsx", "jsxImportSource": "@gpuix/react" } ## Run The repository is a workspace on Node 24 with `nub`: nub install nub run dev:docs # the documentation site nub run dev:playground # the native playground window nub run check # types, exports, lint, format nub run test # every package nub run --filter <pkg> test `nub run fmt` does not apply the repo's formatter config; use `sh node_modules/.bin/oxfmt --config .oxfmtrc.json <files>`. ## Window render(<App />, { title: "My app", width: 1100, height: 720, minWidth: 720, minHeight: 480, }); GPUix opens one window per process. Always set `minWidth`/`minHeight`: a shell of a 260px rail beside a pane has a size below which neither fits, and without a minimum the window lets a pane collapse into a clipped column. ## Appearance A docs page carries no appearance in its URL: the platform switch is the app's own state — React for the page, local storage for the next visit — so a URL names the page and nothing else. The switch offers three axes: the platform (`darwin`, `win32`, `linux`, `default`), the palette (`dark`, `light`) and an authored look (`luna`, `aero`, `omarchy`). There is **no OS appearance query** in GPUix 0.11.0 (a measured absence: no `appearance`, `prefers*` or `reduce*` export). The app owns the mode and passes it in; `@gpuixui/motion` takes reduced motion as a boolean for the same reason. ## Rules - Effect for logic: typed failures, `Option` for absence, `Schema` at boundaries. No `any`, no casts, no `@ts-ignore`. - Semantic roles only (`bg-card`, `text-muted-foreground`); a literal colour fails review. - Every fix lands with a test that fails without it. - No `transform` in native code: the runtime has none. ## Contribute Fork, branch from `master`, keep the change one idea, and run the gates before pushing. A component needs its page (`packages/<pkg>/docs/<name>.mdx`), an inventory row, and a behaviour test. Report runtime limits rather than mocking them. ## Components (116) - Accordion — Stacked sections, one or several open (https://gpuixui.sudokw.com/components/accordion) - Alert — A persistent, in-flow message about the current state (https://gpuixui.sudokw.com/components/alert) - Aspect ratio — A box whose height follows its width through one ratio (https://gpuixui.sudokw.com/components/aspect-ratio) - Auth — Sign in, sign up, reset and one-time codes (https://gpuixui.sudokw.com/components/auth) - Auto height — A reveal that grows to its content's measured height (https://gpuixui.sudokw.com/components/auto-height) - Avatar — A person or team as a picture, falling back to initials (https://gpuixui.sudokw.com/components/avatar) - Avatar group — A facepile of overlapping avatars with an overflow chip (https://gpuixui.sudokw.com/components/avatar-group) - Badge — A short status label on a pill, never a control (https://gpuixui.sudokw.com/components/badge) - Breadcrumb — The trail to the current page, with a collapsing middle (https://gpuixui.sudokw.com/components/breadcrumb) - Bubble — The message surface, with variants and reactions (https://gpuixui.sudokw.com/components/bubble) - Button — The primary action, with busy and disabled states (https://gpuixui.sudokw.com/components/button) - Calendar — A month grid for a day, several days, or a range (https://gpuixui.sudokw.com/components/calendar) - Card — A bounded surface that groups related content (https://gpuixui.sudokw.com/components/card) - Carousel — Discrete slide stepping, a dot per slide, arrow keys (https://gpuixui.sudokw.com/components/carousel) - Chat — A conversation with a following transcript (https://gpuixui.sudokw.com/components/chat) - Checkbox — An independent yes/no with an optional mixed state (https://gpuixui.sudokw.com/components/checkbox) - Code block — Source or output, tokenized by @tanstack/highlight (https://gpuixui.sudokw.com/components/code-block) - Collapsible — One section that reveals its body on demand (https://gpuixui.sudokw.com/components/collapsible) - Color picker — A swatch that opens the saturation, hue and alpha rails (https://gpuixui.sudokw.com/components/color-picker) - Color swatches — One colour chosen from a fixed row (https://gpuixui.sudokw.com/components/color-swatches) - Combobox — A searchable single- or multi-select with ranked options (https://gpuixui.sudokw.com/components/combobox) - Command menu — A searchable action list, the ⌘K palette (https://gpuixui.sudokw.com/components/command-menu) - Confirmation dialog — The safe workflow for an action that cannot be undone (https://gpuixui.sudokw.com/components/confirm-dialog) - Context menu — Menu rows at the pointer, or opened from the keyboard (https://gpuixui.sudokw.com/components/context-menu) - Copy button — An icon action that copies a value and acknowledges it (https://gpuixui.sudokw.com/components/copy-button) - Countdown — A remaining duration as clock text (https://gpuixui.sudokw.com/components/countdown) - Counting number — A number that counts to its value (https://gpuixui.sudokw.com/components/counting-number) - Date picker — A day or a span of days, chosen from a Calendar (https://gpuixui.sudokw.com/components/date-picker) - Diagram — A Mermaid source, drawn by Pele (https://gpuixui.sudokw.com/components/diagram) - Dialog — A modal surface that takes the window until it is dismissed (https://gpuixui.sudokw.com/components/dialog) - Disclosure — An inspector section headed by a triangle (https://gpuixui.sudokw.com/components/disclosure) - Drawer — A modal panel anchored to any window edge (https://gpuixui.sudokw.com/components/drawer) - Dropdown menu — A list of actions anchored to the control that opened it (https://gpuixui.sudokw.com/components/dropdown-menu) - Empty state — The panel a collection shows when it has no rows (https://gpuixui.sudokw.com/components/empty-state) - Field and inline validation — A label, control and one message slot around an input (https://gpuixui.sudokw.com/components/field) - Fieldset — A named group of fields with a disabled state (https://gpuixui.sudokw.com/components/fieldset) - Form — Schema validation and a submit lifecycle around fields (https://gpuixui.sudokw.com/components/form) - Glyph — A wall of generated characters for its own box (https://gpuixui.sudokw.com/components/glyph) - Gradient — A two-stop gradient surface that breathes between ramps (https://gpuixui.sudokw.com/components/gradient) - Gradient text — A phrase painted as a per-glyph colour ramp (https://gpuixui.sudokw.com/components/gradient-text) - Highlight text — A phrase whose matches a marker wash sweeps across (https://gpuixui.sudokw.com/components/highlight-text) - Hotkey recorder — Capture a chord and display it as keycaps (https://gpuixui.sudokw.com/components/hotkey-recorder) - Hover card — A rich surface previewed from a name, on hover or on focus (https://gpuixui.sudokw.com/components/hover-card) - Image zoom — A frame whose picture magnifies under the pointer (https://gpuixui.sudokw.com/components/image-zoom) - Inline edit — Rename a value where it is displayed (https://gpuixui.sudokw.com/components/inline-edit) - Input group — A field and its addons inside one bordered, focus-ringed row (https://gpuixui.sudokw.com/components/input-group) - Inset group — A settings form's grouped rows, as System Settings draws them (https://gpuixui.sudokw.com/components/inset-group) - Item — One row of a list, with media, text and actions (https://gpuixui.sudokw.com/components/item) - Kanban — Columns of cards a person reorders with a pointer or the arrow keys (https://gpuixui.sudokw.com/components/kanban) - Keyboard shortcuts — A cheat sheet of chords as platform keycaps (https://gpuixui.sudokw.com/components/keyboard-shortcuts) - Knob — A rotary control for one value in a range (https://gpuixui.sudokw.com/components/knob) - List — Rows with one tab stop, type-ahead and a row action (https://gpuixui.sudokw.com/components/list) - Mention input — `@name` autocompletion in a text field (https://gpuixui.sudokw.com/components/mention-input) - Message — A typical agent conversation (https://gpuixui.sudokw.com/components/message) - Message Scroller — Follows new content, keeps a scrolled-up reader in place (https://gpuixui.sudokw.com/components/message-scroller) - MultiStepForm — A gated wizard over Stepper, submitted on the last step (https://gpuixui.sudokw.com/components/multi-step-form) - Navigation menu — A horizontal nav that opens one anchored panel at a time (https://gpuixui.sudokw.com/components/navigation-menu) - Page transition — A region that swaps views with the house motion (https://gpuixui.sudokw.com/components/page-transition) - Pagination — Previous and next controls around a stable-width page window (https://gpuixui.sudokw.com/components/pagination) - Pinned list — Headers that stay pinned while rows scroll under them (https://gpuixui.sudokw.com/components/pinned-list) - Popover — A floating panel anchored to the control that opened it (https://gpuixui.sudokw.com/components/popover) - Preview card — A rich, hoverable card shown on hover or on a press (https://gpuixui.sudokw.com/components/preview-card) - Progress — A determinate or indeterminate bar in the caller's scale (https://gpuixui.sudokw.com/components/progress) - Reveal — Content that fades and travels into place (https://gpuixui.sudokw.com/components/reveal) - Scroll fade — An edge that fades where more content is hidden (https://gpuixui.sudokw.com/components/scroll-fade) - Scroll progress — A reading line for how far through content a reader is (https://gpuixui.sudokw.com/components/scroll-progress) - Search input — A single-line search field with a clear affordance (https://gpuixui.sudokw.com/components/search-input) - Segmented control — One choice among a few, as a Mac view switcher (https://gpuixui.sudokw.com/components/segmented-control) - Select — One choice from a list, in a popover (https://gpuixui.sudokw.com/components/select) - Separator — A rule between regions, decorative or announced (https://gpuixui.sudokw.com/components/separator) - Sheet — A modal panel anchored to any of four window edges (https://gpuixui.sudokw.com/components/sheet) - Shimmer — A travelling highlight painted into text, or a surface band over children the runtime cannot recolour (https://gpuixui.sudokw.com/components/shimmer) - Sidebar — The persistent navigation panel, collapsible to icons (https://gpuixui.sudokw.com/components/sidebar) - Skeleton — A placeholder block that reserves the box content will paint (https://gpuixui.sudokw.com/components/skeleton) - Slider — One value on a track, or the two ends of a range (https://gpuixui.sudokw.com/components/slider) - Sliding number — A number whose digits roll like a counter (https://gpuixui.sudokw.com/components/sliding-number) - Spinner — A ring of ticks whose lit arc steps around the circle, in three sizes (https://gpuixui.sudokw.com/components/spinner) - Stepper — Progress through named steps, from one value (https://gpuixui.sudokw.com/components/stepper) - Switch — An immediate on/off pill with a sliding knob (https://gpuixui.sudokw.com/components/switch) - Table — A bounded grid with a pinned header and sortable columns (https://gpuixui.sudokw.com/components/table) - Tabs — A roving-focus tab list and the panels it switches (https://gpuixui.sudokw.com/components/tabs) - Tag input — Keywords entered through a field, as removable chips (https://gpuixui.sudokw.com/components/tag-input) - Theme toggler — The control that switches light and dark (https://gpuixui.sudokw.com/components/theme-toggler) - Time picker — A time of day, entered as an HH:mm field (https://gpuixui.sudokw.com/components/time-picker) - Timeline — A read-only rail of events the app marks (https://gpuixui.sudokw.com/components/timeline) - Toast — A stacked, auto-dismissing notification queue (https://gpuixui.sudokw.com/components/toast) - Toggle — A button that stays on, for a mode the next action uses (https://gpuixui.sudokw.com/components/toggle) - Toggle group — A toolbar of related modes with one tab stop (https://gpuixui.sudokw.com/components/toggle-group) - Tooltip — A short label on hover (https://gpuixui.sudokw.com/components/tooltip) - User menu — An avatar and name that open the account actions (https://gpuixui.sudokw.com/components/user-menu) - Box — A surface with tone, padding, radius, border and flex facts (https://gpuixui.sudokw.com/primitives/box) - ButtonGroup — A row or column of related actions, attached or separated (https://gpuixui.sudokw.com/primitives/button-group) - Checkbox group — Several independent choices sharing one tab stop (https://gpuixui.sudokw.com/primitives/checkbox-group) - Grid — Equal tracks in two dimensions (https://gpuixui.sudokw.com/primitives/grid) - IconButton — A square, icon-only action with a required name (https://gpuixui.sudokw.com/primitives/icon-button) - Input — A single-line text field, controlled or uncontrolled (https://gpuixui.sudokw.com/primitives/input) - Label — A control's visible name, with a required marker (https://gpuixui.sudokw.com/primitives/label) - Meter — A measurement inside a range (https://gpuixui.sudokw.com/primitives/meter) - NumberField — A number in a text field, with steps and optional bounds (https://gpuixui.sudokw.com/primitives/number-field) - OTPField — A one-time code in length cells, held as one string (https://gpuixui.sudokw.com/primitives/otp-field) - Progress — A determinate or indeterminate progress bar (https://gpuixui.sudokw.com/primitives/progress) - RadioGroup — One choice from a small set, with arrow navigation (https://gpuixui.sudokw.com/primitives/radio-group) - RangeSlider — Two values, the ends of one interval, on one track (https://gpuixui.sudokw.com/primitives/range-slider) - Rating — A score in stars, whole or in halves (https://gpuixui.sudokw.com/primitives/rating) - ScrollArea — A bounded container that scrolls on the chosen axes (https://gpuixui.sudokw.com/primitives/scroll-area) - Separator — One theme-coloured rule between regions (https://gpuixui.sudokw.com/primitives/separator) - Skeleton — A pulsing placeholder for content that has not arrived (https://gpuixui.sudokw.com/primitives/skeleton) - Slider — A value on a track, by click, drag or keyboard (https://gpuixui.sudokw.com/primitives/slider) - Spacer — Empty space as a fixed step or a flexible filler (https://gpuixui.sudokw.com/primitives/spacer) - Spinner — An activity indicator drawn as a ring whose lit arc steps around the circle, because the runtime cannot rotate (https://gpuixui.sudokw.com/primitives/spinner) - Stack — Children laid out along one axis, spaced by the theme scale (https://gpuixui.sudokw.com/primitives/stack) - Text — One run of type, named by a theme role and a semantic tone (https://gpuixui.sudokw.com/primitives/text) - TextArea — A multi-line text field sized in rows (https://gpuixui.sudokw.com/primitives/textarea) - ThemeProvider — Supplies the theme every primitive draws with (https://gpuixui.sudokw.com/primitives/theme-provider) - Toggle — A button whose action has a persistent on/off state (https://gpuixui.sudokw.com/primitives/toggle) - Toggle group — A toolbar of related modes, pressed and unpressed (https://gpuixui.sudokw.com/primitives/toggle-group) ## Blocks (18) - Calendar — A month grid with the selected day's agenda beside it (https://gpuixui.sudokw.com/blocks/calendar) - Command centre — A command palette over a dimmed page (https://gpuixui.sudokw.com/blocks/command-centre) - Conversations — A Messages-style window in four platform dresses (https://gpuixui.sudokw.com/blocks/conversations) - Dashboard — An activity dashboard with stats and charts (https://gpuixui.sudokw.com/blocks/dashboard) - Dashboard 01 — shadcn's dashboard — an inset sidebar, stat cards, and a chart of every shape (https://gpuixui.sudokw.com/blocks/dashboard-01) - Dashboard management — A settings console with a workspace rail and one column of service sections (https://gpuixui.sudokw.com/blocks/dashboard-management) - Data table — A deploy table with filtering, sorting, selection and paging (https://gpuixui.sudokw.com/blocks/data-table) - Desktop — A whole XP-era or Aero-era desktop, from the library (https://gpuixui.sudokw.com/blocks/desktop) - Email inbox — A mail client with a folder rail, message list and reading pane (https://gpuixui.sudokw.com/blocks/email-inbox) - File manager — A three-pane file browser (https://gpuixui.sudokw.com/blocks/file-manager) - Kanban board — A hunter's contract board with counted columns (https://gpuixui.sudokw.com/blocks/kanban) - Notifications — A notification centre with filters and grouped rows (https://gpuixui.sudokw.com/blocks/notification-centre) - Pipeline — A release pipeline in a native Mac window (https://gpuixui.sudokw.com/blocks/pipeline) - Profile settings — A profile page with a photo, contact details and tabbed settings (https://gpuixui.sudokw.com/blocks/profile-settings) - Settings dialog — A modal settings window (https://gpuixui.sudokw.com/blocks/settings-dialog) - Sidebar — Sixteen sidebar blocks on one page, grouped (https://gpuixui.sudokw.com/blocks/sidebar) - Sign in — A full sign-in page (https://gpuixui.sudokw.com/blocks/sign-in) - Tasks — A Notion-style tasks view with an inbox and pinned docs (https://gpuixui.sudokw.com/blocks/tasks)