Components
Shared Workshop1 primitives, grouped by the job they do.
These components are the public building blocks for Workshop1 interfaces. Import each primitive from its own @workshop1/ui/components/<name> entry point.
Actions and selection
| Component | Use it for |
|---|---|
| Button | Primary, secondary, and icon actions |
| Button group | Closely related actions in one control group |
| Toggle | A single pressed or unpressed option |
| Toggle group | One or more choices from a compact set |
Forms and input
| Component | Use it for |
|---|---|
| Calendar | Date selection |
| Checkbox | Independent yes or no choices |
| Choicebox | Rich options with supporting copy |
| Combobox | Searchable selection from a longer list |
| Field | Labels, controls, hints, and errors |
| Input | Single-line text and native input types |
| Input group | Inputs with prefixes, suffixes, or actions |
| Input OTP | One-time passcodes split into cells |
| Label | A visible name for a form control |
| Native select | Platform-native option selection |
| Radio group | One choice from a visible set |
| Select | Compact selection from known options |
| Slider | A value or range on a continuous scale |
| Switch | A setting that takes effect immediately |
| Textarea | Multi-line text entry |
Navigation
| Component | Use it for |
|---|---|
| Breadcrumb | Hierarchical page context |
| Menubar | Persistent application command menus |
| Navigation menu | Primary navigation with grouped destinations |
| Pagination | Moving through known result pages |
| Sidebar | Persistent product navigation |
| Tabs | Related views of one subject |
Feedback and status
| Component | Use it for |
|---|---|
| Alert | Contextual information, warnings, and errors |
| Badge | Categories, counts, and compact metadata |
| Empty | Empty collections and a permitted next action |
| Progress | Determinate completion |
| Skeleton | Shape-matched loading placeholders |
| Sonner | Brief, transient toast feedback |
| Spinner | Short, bounded busy states |
| Status chip | Domain and workflow status |
Content and data
| Component | Use it for |
|---|---|
| Aspect ratio | Media with stable proportions |
| Attachment | Attached document summaries |
| Avatar | People and group identity |
| Bubble | Short conversational content |
| Card | One bounded, elevated subject |
| Carousel | A sequence of visual panels |
| Chart | Quantitative trends and comparisons |
| Item | Structured list rows with media and actions |
| Kbd | Keyboard keys and shortcut chords |
| Marker | Highlighting short text passages |
| Message | Authored conversation entries |
| Message scroller | A bounded message history |
| Separator | A visual boundary between related content |
| Table | Comparable records in rows and columns |
Disclosure and overlays
| Component | Use it for |
|---|---|
| Accordion | Several collapsible content sections |
| Alert dialog | Confirmation of a consequential action |
| Collapsible | One optional content region |
| Command | Searchable commands and destinations |
| Context menu | Commands opened from a pointer context action |
| Dialog | Focused work over the current page |
| Drawer | Touch-friendly supporting work |
| Dropdown menu | A compact list of commands |
| Hover card | Supporting detail for a linked subject |
| Popover | Compact interactive content beside a trigger |
| Sheet | Larger supporting work from a viewport edge |
| Tooltip | A concise label or explanation on hover and focus |
Layout and utilities
| Component | Use it for |
|---|---|
| Direction | Text and component reading direction |
| Resizable | User-adjustable adjacent panels |
| Scroll area | A bounded overflow region |