Form Controls
Interactive inputs for collecting user data
Button#
Form actions
Primary/secondary pairing for settings, onboarding, checkout.
Destructive
Irreversible actions — only after a confirm dialog.
Loading state
Disabled + spinner icon while awaiting a response.
Icon + text
Leading glyph for recognition at a glance.
Input#
Profile
A typical sign-up form using text, email, and password inputs.
Input Types
Each HTML input type rendered with a contextual placeholder.
States
Default, populated, invalid, disabled, and read-only.
Textarea#
Share your feedback
Tell us what worked and what didn't. We read every response.
Profile
Shown on your public profile and attribution lines.
Tip: mention where you work, what you build, and where folks can find you.
Admin notes
Read-only. Changes require a support ticket.
Last updated by Sofia M. · 6 days ago
Checkbox#
Checkbox
Radio#
Radio — Plan
Radio — States
Radio — With Descriptions
Select#
Preferences
A realistic settings form with theme, language, and a locked timezone field.
Controls the application appearance.
Select Anatomy
Individual select states shown in isolation.
Pre-selected
Placeholder
Disabled option
Fully disabled
Switch#
Notification Settings
States
Slider#
Price range
Volume
Brightness
Number Field#
Cart — Wireless Headphones
Aurora Wireless Headphones
$149 each
Max 10 per order
Account — Age verification
You must be at least 13 to create an account.
Recipe — Tomato Basil Risotto
Adjust to scale ingredients (1–12 people).
Backordered — quantity locked
Ships when restocked on April 28.
Field#
Create Account
A realistic registration form showing label, description, error, and required field patterns together.
We'll never share your email with anyone.
Use 8 or more characters with a mix of letters and numbers.
Must be at least 8 characters.
A brief introduction for your public profile.
Field Anatomy
Each feature of the Field component shown in isolation.
Basic
Required
With Description
Include country code for international numbers.
With Error
Please enter a valid URL starting with https://.
Description + Error
Found in your invitation email.
This code has already been used.
Textarea Field
Any additional context (optional).
Fieldset#
Profile Fieldset
Disabled Fieldset
Label#
Variants
Default
Required
Disabled
With input
Native Select#
Country
Currency
Disabled
Display
Visual indicators and content presentation
Badge#
Variants
In Context
Labels
Avatar#
User Card
Status Indicator
Team
Sizes
Separator#
Profile card sections
Separator divides the Bio block from account Settings in a user profile.
Auth methods
“OR” label separates social sign-in from email + password.
Navigation
Vertical separator between primary nav and user menu.
Progress#
File upload
Stepped progress
Indeterminate
Download complete
Meter#
Battery level (higher is better)
15%
60%
90%
Disk usage (lower is better)
25%
70%
95%
Kbd#
Keyboard shortcuts
Skeleton#
Loading post
Loading table row
Loading product card
Spinner#
Sizes
Loading button
Page loading
Inline status
Typography#
Headings
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Body text
A lead paragraph is great for intros. It's visually larger and lighter than body text, drawing the eye without shouting.
Regular paragraph text. This is the standard body copy size used throughout the interface for readable content at comfortable line lengths.
Muted text for secondary information, timestamps, or helper copy.Code
Install dependencies with bun install then run bun dev to start.
Blockquote
Design is not just what it looks like and feels like. Design is how it works.
Empty State#
No results
No results found
Try adjusting your search query or removing some filters to find what you're looking for.
Empty inbox
Your inbox is empty
Messages you receive will appear here.
First run
Create your first project
Projects help you organize your work and collaborate with your team.
Minimal
Nothing here yet
Layout
Structural components for organizing content
Card#
Notifications
Notifications
Choose what you want to be notified about.
Push Notifications
Send notifications to device.
Email Notifications
Receive emails for activity updates.
Stat card
Total Revenue
$45,231.89
+20.1% from last month
Create project
Create project
Deploy your new project in one click.
Accordion#
FAQ
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It comes with a default theme that matches shadcn.
Yes. JavaScript handles expand/collapse with ARIA state.
Multiple
Content for Section A with relevant information.
Content for Section B with additional details.
Content for Section C with more information.
Collapsible#
Headless accessible UI components for maud + htmx.
Currently in active development. APIs may change.
- Item A
- Item B
Tabs#
Make changes to your account here. Click save when you’re done.
Change your password here. After saving, you’ll be logged out.
Invite your team members to collaborate.
Sofia Davis
sofia@example.com
Jackson Lee
jackson@example.com
Isabella Nguyen
isabella@example.com
Table#
With badges, right-aligned amounts, and footer total
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| Total | $1,750.00 |
Striped + hoverable
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
Compact
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
Data Table#
Searchable, sortable, paginated (5 per page)
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Paid | Credit Card | $300.00 |
| INV008 | Unpaid | PayPal | $400.00 |
| INV009 | Paid | Bank Transfer | $500.00 |
| INV010 | Pending | Credit Card | $275.00 |
Pagination#
Search results
Showing 21–30 of 97 results
First page
Last page
Few pages (no ellipsis)
Resizable#
Sidebar + Content
Three-column Layout
Explorer
Editor
Select a file from the explorer to view its contents here. This center panel occupies the majority of the available space.
Inspector
Properties and metadata for the selected item will appear in this panel.
Scroll Area#
Release tags
Commit log
Aspect Ratio#
Common ratios
16:9
4:3
1:1
With image
Overlay
Modal and floating content layers
Dialog#
Alert Dialog#
Drawer#
Right (default)
Left (navigation)
Bottom (sheet with grab handle)
Popover#
Popover with Form
Dimensions
Tooltip#
Icon buttons with contextual tooltips — copy, roster, shortcut, destructive.
Hover Card#
HoverCard
Crafting beautiful, accessible interfaces. Passionate about design systems.
Toast#
Static toasts (inline)
Imperative (click to dispatch)
Title only
With description
Alert#
Subscription expiring
Renew by Apr 19 to keep unlimited builds and priority support. After expiry your workspace drops to the Free tier and projects over 3 will be archived.
Two-factor enabled
Backup codes were emailed to invoice@geldentech.ca. Store them somewhere safe — you'll need one if you lose access to your authenticator.
Destructive — API key revocation
Any services using this key will stop working immediately. This action cannot be undone — you'll need to issue a new key and redeploy.
Informational
The build pipeline will be paused for roughly 20 minutes. In-flight deploys will resume automatically once maintenance completes.
Composite
Multi-part components combining primitives
Button Group#
Text alignment toolbar
Editor toolbar — exactly one alignment active at a time.
Text formatting
Rich-text controls — each toggle independent (Bold currently on).
View switcher
Project listing view — Grid / List / Board (Grid active).
Toggle#
Text Editor Toolbar
Default variant — formatting controls
Outline variant
Sizes
Disabled
Toggle Group#
Text alignment
Paragraph alignment in the document editor.
Text formatting
Bold, italic, underline, strikethrough — multi-select.
Calendar view
Switch between Day, Week, and Month layouts.
Input Group#
Input with $ prefix
Input with .com suffix
Input with https:// prefix and Go button
Email with @ prefix
Input Otp#
Verify your email
We sent a code to sofia@example.com
Enter PIN
Your transaction PIN
Confirms payments over $100. Never share this PIN.
2FA locked
Too many failed attempts. Try again in 15 minutes.
Radio Group#
Vertical (default)
Horizontal
Disabled
Calendar#
Check-in
Pick a check-in date — earliest arrival is today (Apr 16).
Departure
Departure must be after check-in — min Apr 21, max 60 days out.
Disabled weekends
Business-day picking — window locked to the Mon–Fri work week of Apr 20–24.
Carousel#
Featured products
What customers say
Chart#
Bar chart
Monthly Revenue (USD)
Line chart with area fill
Active Users Over Time
Custom color
Conversion Rate by Month
Wide line chart
Pageviews Trend (6 months)
Date Picker#
No selection (placeholder)
With selected date
Disabled