Focused, copy-pasteable scenarios for every component — variants, controlled state, keyboard behavior, and more.
Choose the reporting period for the chart.
Toggle one or more formatting styles.
Adjust the canvas magnification.
Live workspace activity.
Updated every five minutes.
Grace Hopper
grace@example.com
Building assets and uploading to the edge network…
Main content
Spans 2 of 3 columns from md up.
Sidebar
Stacks on mobile, 1 column on md+.
Shown on your public profile.
Enter a valid email address.
Minimum 8 characters.
Use readOnly when the value should remain visible but not editable.
Markdown is supported.
Tell us what you think.
You agree to our Terms of Service and Privacy Policy.
Can't toggle this option.
Checkbox appears before the label text in LTR.
Checkbox appears after the label text in LTR.
Product updates and account alerts.
Security codes and urgent messages.
Mobile alerts when you're away from email.
A summary every Monday morning.
Choose every channel you want to hear from us on.
Receive product updates and release notes.
This setting is locked.
Control at inline-start.
Control at inline-end (default for settings rows).
Toggle to preview the setting — does not change site theme here.
Let teammates find you by name.
Display when you were last active.
Help improve the product with anonymous data.
Occasional emails from trusted partners.
Toggle each setting on or off independently.
One email every morning.
Highlights once a week.
Only account notifications.
For personal projects and experiments.
For teams shipping production apps.
Custom limits, SSO, and dedicated support.
Select the plan that fits your team.
Selected: medium
FAQ-style (single open)
Multiple open sections
Focus a trigger, then use Arrow Up/Down to move, Home/End to jump, and Enter or Space to toggle.
Heads up
Payment received
Storage almost full
Sync failed
Your trial ends in 3 days
Unsaved changes
Update your workspace name and timezone.
Optional controls for workspace administrators.
Configure retention, audit logging, and notification defaults.
Performance across all active subscriptions.
A dense table can use the full panel width.
In a narrow container, use the chevron buttons to scroll the tab strip. The double-chevron buttons jump to the first or last tab.
Shorter panel content to show height transitions when switching tabs.
Focus the tab list, then use Arrow Left/Right to move between tabs and Home/End to jump to the first or last tab. Press Enter to activate the focused tab.
Page 1 of 5
Open the dialog, then close it with Escape or the overlay. Focus returns to the button that opened it.
Design system
Manage project actions
Menu open: false · Compact: false
false
Selected: overview
overview
