Components
Each runs live above its own source; the bar above switches theme.
Selection
Switch
Show the code
Radio group
Show the code
Choice
Segmented control
Show the code
Chips
Show the code
Filter tabs
- Identify processes using memory
- Reschedule evicted pods
- Raise the memory limit
- Page the on-call
- Identify processes using memory
- Reschedule evicted pods
- Raise the memory limit
- Page the on-call
Show the code
Toggle
Show the code
Pagination
Show the code
Values
Stepper
Show the code
Slider
Show the code
Input OTP
Show the code
Range calendar
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
27 | 28 | 29 | 30 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Show the code
Composer
Composer with context
Show the code
Notice and action pills
Show the code
Dictation into actions
Show the code
Data display
Stat
Active users
131
+7.8% vs. last week
Conversations
1,910
+12.4% vs. last week
Escalations
12
−7 vs. last week
Show the code
Bar list
- ChatGPT 62% 2.9k
- Perplexity 18% 850
- Gemini 9% 430
- Claude 7% 330
- Copilot 4% 190
Show the code
Distribution bar
- Delivered 72
- Shipped 21
- Outstanding 18
- Returned 9
- Canceled 6
- Problems 3
Show the code
Spark bars in a card
Assistant visits
Live48.2k +6.1k
Bot visits, last 24 days
Show the code
Usage and confidence
Current usage 34%
10,222 of 30,000 orders processed
- High
- Medium
- Low
- Not configured
Show the code
Table
| Invoice | Client | Status | Amount |
|---|---|---|---|
| INV-0101 | Example Studio | Paid | 1,200.00 |
| INV-0102 | Sample Bakery | Due | 480.00 |
| INV-0103 | Demo Records | Draft | 2,050.00 |
Show the code
Status and feedback
Status icon
- backlog
- started
- progress
- done
- cancelled
- blocked
Show the code
Grouped job toast
Show the code
Removal
- Snowflake
- Active users
- Revenue
- Inventory
Show the code
Badge
Live Draft INC-1234 Installed Urgent Ongoing Blocked
Show the code
Progress
60%
Show the code
Skeleton
Show the code
Toast
Show the code
Search and cards
Search list
Show the code
Command menu
Show the code
Skill card
Analysis deck
Builds an executive slide deck that answers an analytical question, from the warehouse or from an artifact that already exists.
by Example Team Installed
Analysis deck
Builds an executive slide deck that answers an analytical question.
Semantic layer
Used when creating or changing dbt semantic models.
Show the code
Card
Nightly backups
A copy of every project at 02:00.
Show the code
Fields and actions
Field and textarea
Show the code
Input
Use an address with an @, like name@example.com.
Show the code
Select
Show the code
Button
Show the code
Avatar
AK
MR
JS
Show the code
Containers
Accordion
Show the code
Tabs
The thumb slides to the active tab.
It is the segmented control’s thumb.
Arrow keys move it too.