Button
Actions, variants and states.
My UI toolbox.
Components I use to build my projects.
Components
74 piecesAll components74 results
Form
Badge
Compact status labels.
DefaultSecondaryOutlineError
Card
A composable content surface.
Team workspace
Reusable compound surface.
Content, header and footer stay composable.
Input
A text field.
Password Input
A password field with visibility control.
Date Input
A compact native date field.
Date Picker
A calendar picker in a popover.
Input Group
Inputs with prefixes and actions.
Textarea
Multi-line text input.
Checkbox
Single or multiple selections.
Receive updates about this project.
Radio Group
Choose one option.
Switch
Toggle a setting.
Visible to your team.
Slider
Pick a value within a range.
Density68%
Progress
Task progress.
Uploading assets68%
Accordion
Expandable content sections.
Consumers own the code and can evolve it with their product.
Tabs
Switch between related views.
Live preview content
Alert
Persistent status messages.
Registry ready
Install the source into your app and keep ownership of the code.
Avatar
People and team identities.
PP
PPJS
+4
Breadcrumb
A path through your app.
Dialog
A focused modal.
Responsive Dialog
A dialog that becomes a swipeable drawer on small screens.
Dropdown Menu
Actions behind a trigger.
Popover
Content anchored to a trigger.
Responsive Sheet
A side sheet that becomes a mobile drawer.
Command Palette
Keyboard-first search for actions and destinations.
Command palette
Search and run a command.
Tooltip
A hint on hover or focus.
Empty
An empty view with a next step.
No results
Try another search term.
Table
Tabular data.
| Component | Status |
|---|---|
| button | Ready |
| dialog | Ready |
Pagination
Move through paged results.
Skeleton
A loading placeholder.
Spinner
An activity indicator.
Syncing registry…
Toggle
A two-state button.
Toggle Group
A group of toggle buttons.
Select
Choose from a list.
Native Select
A styled native select.
Input OTP
One-time code entry.
Field
Labels, hints and form controls.
Form Field
Accessible labels, descriptions and validation wiring.
Shown in your workspace navigation.
Choose a name with at least three characters.
Item
Rows for lists and results.
Verified workspace
All checks are passing.
Kbd
Keyboard shortcuts.
Open search ⌘K
Marker
Inline highlights.
Source-first by default.
Message
Messages with content and actions.
Studio assistantnow
Every component is visible in its own context.
Source-first
Collapsible
Content on demand.
Advanced settings
Additional options stay close without taking over the screen.
Hover Card
A preview on hover or focus.
Scroll Area
Contained scrolling.
Aspect Ratio
Fixed-ratio containers.
16 / 9 surface
Separator
Separate related content.
TokensSemantic
SourceOwned
Alert Dialog
Confirmation for important actions.
Attachment
Files with metadata and actions.
Bubble
Conversation bubbles.
Button Group
Related actions, grouped together.
Calendar
Date selection.
Carousel
Swipeable content.
Tokens
Behavior
Ownership
Chart
Charts and tooltips.
Combobox
Searchable selection.
Command
A keyboard-first command palette.
Context Menu
Right-click actions.
Right click this surface
Direction
Left-to-right and right-to-left layouts.
Direction-aware primitives
Drawer
A sliding panel.
Label
A label for a form control.
List
Structured rows for metadata and compact data.
- Open projects12 active projects
- Last updatedToday, 9:42 AM
- Workspace typePersonal workspace
Resource List
Navigable rows for people, projects and resources.
Detail List
Readable label and value pairs for detail views.
- Environment
- Production
- Last deployment
- Today at 09:42
Settings Card
Grouped settings with consistent row structure.
Preferences
Keep the workspace focused.
Email updates
Occasional product notes.
Section Shell
A heading, navigation and content frame for settings or details.
Project settings
Organize related views without coupling navigation.
General settings content
State Badge
Semantic status labels with a lightweight indicator.
ReadyPendingFailed
Menubar
Application menus.
Message Scroller
Scrollable conversations.
Navigation Menu
Navigation with nested panels.
Questionnaire
Step-by-step questions.
Resizable
Panels you can resize.
Canvas
Inspector
Sheet
A side panel.
Toast
Brief action feedback.