Primitives
Primitives
The Tier 1 layer over GPUix host elements
npx shadcn@latest add @sudokw/primitives-stackimport { Stack } from "@gpuixui/primitives";Five primitives live under Components: Button, Checkbox, Select, Switch and Tooltip.
Layout
| Primitive | What it is |
|---|---|
| Box | The one container — a semantic surface and flex facts |
| Stack | Children along one axis, spaced by the theme scale |
| Grid | Equal tracks in two dimensions |
| Separator | One theme-coloured rule, with an optional caption |
| Spacer | A fixed step, or a flexible filler |
| ScrollArea | A bounded container that scrolls |
Type and icons
| Primitive | What it is |
|---|---|
| Text | One run of type, named by a theme role and a tone |
| Label | A control's name, required marker and description |
| Icons | 83 monochrome icons and their size scale |
Actions
| Primitive | What it is |
|---|---|
| Button | The primary action, with busy and disabled states |
| Icon button | A square, icon-only action with a required name |
| Button group | A row of related actions |
| Toggle | A button with a persistent on/off state |
| Toggle group | Related modes in one toolbar |
Text and numeric inputs
| Primitive | What it is |
|---|---|
| Input | A single-line text field |
| Text area | A multi-line text field sized in rows |
| Number field | A number field with steps and optional bounds |
| OTP field | A one-time code in length cells |
Choice
| Primitive | What it is |
|---|---|
| Select | One choice from a list |
| Checkbox | An independent yes/no, optionally indeterminate |
| Checkbox group | Several choices sharing one tab stop |
| Radio group | One choice from a small set |
| Switch | An immediate on/off |
| Slider | A value on a track |
| Range slider | The two ends of one interval |
| Rating | A whole number of stars, or none |
Value and progress
| Primitive | What it is |
|---|---|
| Progress | A determinate or indeterminate progress bar |
| Meter | A measurement inside a range |
Feedback
| Primitive | What it is |
|---|---|
| Skeleton | A pulsing placeholder |
| Spinner | Three dots, because the runtime cannot rotate |
| Tooltip | A short label on hover or keyboard focus |
| Theme provider | Supplies the theme every primitive draws with |
The icon set
The glyphs live with the rest of the drawings, under Icons: every icon the package ships, drawn from its own markup.
Edit this page on GitHubapps/docs/content/docs/primitives/index.mdx