Components
Source components for everyday interfaces. Try them here, then make them yours.
Composed example
Workspace preferences
See how these components come together in a workspace preferences flow.
Explore preferencesNotifications
Keep up with your team.
Button
Trigger an action or submit a form.
Use the name your teammates know.
Field
Compose labels, controls, descriptions, and errors.
Profile
The name shown in your workspace.
Used for account notifications.
Input
Collect text with clear focus and validation states.
Textarea
Collect longer text such as descriptions and comments.
Input Group
Put icons, text, and buttons inside a field.
Select
Choose one option from a list.
Combobox
Search and choose from a long list.
Checkbox
Select options independently or as part of a form.
Visibility
Only you can see this project.
Everyone on the Design team can view and edit.
Anyone in the workspace can find it.
Radio Group
Choose one option from a short, visible set.
Receive notifications about this project.
Switch
Turn a setting on or off.
Slider
Pick a value from a continuous range.
Room to focus
Toggle the live navigation.
Sidebar
Compose responsive application navigation.
Website refresh
ActiveDesign studio · Updated today
Tabs
Move between related sections.
Breadcrumb
Show where a page sits and link back to its parents.
Command
Search and run commands from the keyboard.
Dialog
Focus a task in a modal.
Drawer
Slide a panel in from a screen edge.
Popover
Show a small interactive panel anchored to its trigger.
Hover Card
Preview more about a link on hover or focus.
Alert Dialog
Confirm a destructive or irreversible action.
Tooltip
Explain an icon action on hover or focus.
Dropdown menu
Group related actions in a popup.
Toast
Confirm actions without interrupting the task.
Badge
Show a status, count, or category.
Alert
Explain success, errors, and next steps.
Syncing 3 projects…
Spinner
Show that work is in progress.
Reading 4 files…
Shimmer
Animate status text while work is in progress.
Tip: press⌘Nfrom anywhere to start a document.
Empty
Explain an empty view and offer the next step.
- Create issue
- C
- Search
- ⌘K
- Toggle sidebar
- ⌘B
- Send comment
- ⌘↵
Kbd
Show keyboard keys and shortcuts.
Sam Kim
Online
Avatar
Show a person or workspace with an image or initials.
Building a Live Search Box
The useSearch hook turns a text field into instant search. It debounces typing, cancels stale requests, and keeps results in step with the query so the list never flashes old matches.
In short, useSearch gives you:
- Debounced queries: requests wait until typing pauses, so the server sees one call instead of ten.
- Cancellation: a new query aborts the previous request before its results arrive.
- Result state: loading, empty, and error states come back with the matches.
Typeset
Style Markdown, descriptions, and chat replies for reading.
Hover the list or scroll it to show the scrollbar.
Scroll area
Scroll content in a fixed space with a thin scrollbar that appears on hover.
Code block
Show highlighted code, terminal output, and changed lines with a header, actions, and copy.