Everything in
your Staq.
Explore the system. Find the right piece, try it live, and bring it into your product.
51 components
Button
Trigger an action with clear hierarchy and immediate feedback.
Button group
Keep related actions aligned and meaningfully grouped.
Tabs
Switch between related content panels in the same view.
Clickable
Build a custom interaction on a semantic button foundation.
Clickable chip
Select and remove compact filters without losing context.
Link
Navigate to another destination with familiar anchor behavior.
Menu
Place contextual actions in a keyboard-accessible dropdown.
Badge
Communicate a short status with color and a readable label.
Banner
Bring important feedback and recovery actions into view.
Empty state
Explain an empty view and offer a useful next step.
Progress
Show how much measurable work has been completed.
Spinner
Announce ongoing work when progress cannot be measured.
Checkbox
Select an independent option or represent partial selection.
Choice list
Choose one or several options in a visible list.
Color field
Enter a hex color directly or choose it visually.
Color picker
Choose an RGB color with an inline saturation, brightness, and hue picker.
Date field
Enter a calendar date with native format and constraint handling.
Date picker
Select a date or range in a keyboard-navigable calendar.
Drop zone
Accept files through a native chooser or drag and drop.
Email field
Collect an email address with the right input semantics.
Money field
Enter a decimal amount with an explicit currency.
Number field
Collect a numeric value with step and range constraints.
Password field
Enter a secret with an accessible visibility toggle.
Search field
Collect a search query with a recognizable search affordance.
Select
Choose an option from a rounded, optionally grouped list.
Switch
Turn an independent setting on or off.
Text area
Write longer content in a resizable multiline field.
Text field
Collect a short text value with labels and validation feedback.
Url field
Collect a web address with native URL validation.
Box
Apply consistent spacing and surface treatments to a container.
Divider
Separate adjacent content with a subtle semantic boundary.
Grid
Arrange content in responsive columns that fit their container.
Ordered list
Present items whose order is meaningful.
Page
Compose a page title, actions, body, and optional aside.
Query container
Create a named CSS container for responsive compositions.
Section
Give related content a heading, description, and action.
Stack
Align items along a horizontal or vertical axis.
Table
Compare structured records with sorting, selection, and pagination.
Unordered list
Present a set of related items without implying order.
Avatar
Represent a person with an image or a readable initials fallback.
Icon
Use a consistent stroke-based visual language for actions.
Image
Display responsive imagery with meaningful alternative text.
Thumbnail
Place a small, consistently sized image beside content.
Modal
Focus a task in a dialog that contains and restores focus.
Popover
Reveal contextual controls beside their trigger.
Chip
Show a user-created label with an optional remove action.
Heading
Express the document outline independently of visual size.
Number
Format numeric values with locale-aware tabular typography.
Paragraph
Set readable blocks of prose with inline content.
Text
Apply semantic tone, size, and emphasis to inline content.
Tooltip
Provide a brief explanation on hover or keyboard focus.