React UI Components (185) with Figma Kit

Core Elements7 styles

AccordionShow one section at a time, or several, and keep long pages scannable.

Core Elements3 styles

Action BarA bar of bulk actions for a selection. It sits where you place it, so fix it to the bottom of the page yourself if it should float.

AI & Agents3 stylesPro

Activity ItemOne line in a live activity stream: status, action, tool and elapsed time.

Core Elements3 styles

AgendaA time-ordered list of scheduled events.

Core Elements5 styles

Agenda EventOne event in an agenda list, with its start and end time, a color bar, details and guests.

AI & Agents4 stylesPro

Agent AvatarWho is talking in a multi-agent chat: tint colour, name and role.

AI & Agents3 stylesPro

Agent GridThe fleet view — every agent, its current status and how long it has been there.

AI & Agents3 stylesPro

Agent LaneOne parallel worker: its status, queue, throughput and the tasks it holds.

AI & Agents3 stylesPro

Agent PlanThe agent's plan as a checklist: follow it live, edit it before the run, or group it into phases.

AI & Agents3 stylesPro

Agent StatusA pill showing what a run is doing right now, with a live elapsed counter.

Core Elements3 styles

AlertAn inline banner in 5 colors and 2 sizes, with an optional close button and action.

Core Elements4 styles

Alert DialogA dialog for confirmations and destructive actions: a click outside does not close it, only a button or Escape does.

Navigation & Layout3 stylesPro

App LayoutThe app shell: sticky navbar and sidebar over a scrolling page, aside, banner and footer, skip link, and a drawer below 64rem.

AI & Agents4 stylesPro

Approval CardThe human-in-the-loop gate: what the agent wants to do, how risky it is, approve or reject.

Area Charts, data table
month	Revenue	Expenses
Jan	$32.0k	$18.0k
Feb	$41.0k	$22.0k
Mar	$38.0k	$27.0k
Apr	$47.0k	$24.0k
May	$44.0k	$30.0k
Jun	$52.0k	$28.0k
Jul	$49.0k	$34.0k
Aug	$55.0k	$31.0k
Sep	$51.0k	$36.0k
Oct	$46.0k	$33.0k
Nov	$53.0k	$38.0k
Dec	$58.0k	$35.0k

Charts19 stylesPro

Area ChartArea chart for volumes over time: gradients, steps, ranges, a horizon graph, differences and target lines.

usage-summary.tsxCode · edited 2 min ago

1export function UsageSummary() {
2  return (
3    <div className="rounded-xl border border-border bg-card p-4">
4      <p className="text-sm text-text-secondary">Requests this month</p>
5      <p className="text-2xl font-semibold">1,842</p>
6      <p className="text-sm text-text-secondary">Cost $69.98</p>
7      <p className="text-xs text-text-tertiary">Up 12% on last month</p>
8    </div>
9  )
10}

AI & Agents4 stylesPro

Artifact PanelThe side panel for what the agent made — code or a document — with versions, copy and download.

Forms3 styles

AutocompleteAn input that suggests options as you type.

Core Elements6 styles

AvatarA user or entity's profile image with a text fallback.

Core Elements4 styles

Avatar GroupA stack of overlapping avatars, with an optional overflow count.

Forms4 styles

Backup CodeA recovery code that copies itself when clicked and is crossed out once it has been used.

Core Elements11 styles

BadgeA small status or category label in 12 colors and 6 styles.

Revenue and expenses, data table
month	Revenue	Expenses
Jan	$32.0k	$18.0k
Feb	$41.0k	$22.0k
Mar	$38.0k	$27.0k
Apr	$47.0k	$24.0k
May	$44.0k	$30.0k
Jun	$52.0k	$28.0k
Jul	$49.0k	$34.0k
Aug	$55.0k	$31.0k
Sep	$51.0k	$36.0k
Oct	$46.0k	$33.0k
Nov	$53.0k	$38.0k
Dec	$58.0k	$35.0k

Charts32 stylesPro

Bar ChartBar chart for comparing values: grouped, horizontal, diverging, top-k and highlighted bars, with tooltip, keyboard navigation and a data table.

Core Elements5 styles

BreadcrumbShows the user's location in a hierarchy, in the `plain`, `contained` or `underline` look.

Account health, data table
name	x	y	Size	Group
Account 1	22	78	40	Enterprise
Account 2	72	92	120	Enterprise
Account 3	124	62	200	Enterprise
Account 4	172	86	80	Enterprise
Account 5	34	42	30	Mid-market
Account 6	88	68	60	Mid-market
Account 7	138	38	45	Mid-market
Account 8	166	58	35	Mid-market
Account 9	52	22	20	Startup
Account 10	104	30	25	Startup
Account 11	148	80	18	Startup

Charts10 stylesPro

Bubble ChartScatter and bubble charts for the relation between two or three values: scatter, bubbles, dot plot, dot matrix, regression, quadrants, beeswarm and a connected scatter.

Quarter KPIs, data table
name	Actual	Target	poor	ok	good
Revenue	270	250	150	225	300
Profit	22	26	20	25	30
New customers	1.7k	2.1k	1.4k	2k	2.5k

Charts4 stylesPro

Bullet ChartBullet chart for a measure against its target and qualitative ranges — horizontal, vertical or as a KPI list.

Core Elements10 styles

ButtonThe main action trigger, in 11 variants, 2 shapes and 5 sizes.

Core Elements12 styles

Button GroupA row of connected buttons sharing borders and outer corners, for view switchers or segmented actions.

Forms5 styles

CalendarA month grid for picking one date or a range, with keyboard navigation and optional min, max and disabled days.

WUI / USD, data table
date	Close	Volume
Oct 7	$60.94	$25,064.00
Oct 8	$60.20	$27,814.00
Oct 9	$60.24	$26,904.00
Oct 10	$58.95	$36,428.00
Oct 11	$58.42	$25,296.00
Oct 12	$59.16	$34,776.00
Oct 13	$58.24	$37,141.00
Oct 14	$59.04	$36,223.00
Oct 15	$59.22	$24,123.00
Oct 16	$59.67	$32,265.00
Oct 17	$58.45	$30,180.00
Oct 18	$58.69	$23,512.00
Oct 19	$59.56	$19,111.00
Oct 20	$59.57	$31,629.00
Oct 21	$59.49	$33,544.00
Oct 22	$59.63	$31,612.00
Oct 23	$59.73	$22,074.00
Oct 24	$60.66	$23,770.00
Oct 25	$61.48	$33,796.00
Oct 26	$60.17	$35,973.00
Oct 27	$60.76	$34,905.00
Oct 28	$61.54	$30,147.00

Charts12 stylesPro

Candlestick ChartCandlestick chart for prices: candles, hollow candles, OHLC bars, volume, moving averages, Heikin-Ashi, an order-book depth chart and Renko, on a right-hand price axis.

Core Elements8 styles

CardA bordered container for grouping related content.

Core Elements3 styles

CarouselA horizontally scrollable row of items with arrow controls.

Label	Colour
Billing
Design
Support

Forms1 styles

Cell Color PickerA compact color swatch picker for inline use in a Data Table cell.

Member	Role
Nora Lindgren
Daniel Okafor
Priya Raman

Forms1 styles

Cell SelectA compact select for inline use in a Data Table cell.

Member	Quota used
Nora Lindgren	68
Daniel Okafor	42
Priya Raman	91

Forms1 styles

Cell SliderA compact progress/value slider for inline use in a Data Table cell.

Member	Email alerts
Nora Lindgren
Daniel Okafor
Priya Raman

Forms1 styles

Cell SwitchA compact switch for inline use in a Data Table cell.

AI & Agents3 stylesPro

Chain of ThoughtA collapsible list of the model's intermediate reasoning steps.

AI & Agents3 stylesPro

Chat AttachmentA file chip attached to a chat message, with an optional remove button.

AI & Agents3 stylesPro

Chat List ViewA sidebar list of past conversations with preview and timestamp.

AI & Agents1 stylesPro

Chat LoaderA bouncing-dots indicator shown while the assistant is composing a reply.

AI & Agents3 stylesPro

Chat MessageA single message bubble on the indigo tint, aligned right for the user and left for the assistant.

AI & Agents2 stylesPro

Chat Message ActionsCopy / retry / thumbs up-down actions shown under an assistant message.

AI & Agents2 stylesPro

Chat SourceA citation chip linking to a source referenced in an answer.

AI & Agents3 stylesPro

Chat ToolA collapsible card showing a tool/function call's name, status, and result.

Core Elements5 styles

CheckboxA single choice that is on or off, with an indeterminate state for “some selected”.

Forms4 styles

Checkbox Button GroupA multi-select group of toggle-styled buttons.

Forms3 styles

Checklist TaskOne step of an onboarding checklist that can be ticked off, with the next step to do highlighted.

AI & Agents1 stylesPro

Code BlockA syntax-styled code block with a language label and copy button.

Core Elements5 styles

CollapsibleA single collapsible panel controlled by a trigger button.

Forms4 styles

Color PickerPick a colour: saturation and brightness, hue, opacity, eyedropper, HEX/RGB/HSL values and saved colours — inline or from a trigger field.

Forms4 styles

ComboboxAn input combined with a filterable list of predefined items to select.

Navigation & Layout6 stylesPro

CommandA searchable command palette dialog with keyboard navigation (⌘K pattern).

Composed Charts, data table
month	Revenue	Profit
Jan	$32.0k	$18.0k
Feb	$41.0k	$22.0k
Mar	$38.0k	$27.0k
Apr	$47.0k	$24.0k
May	$44.0k	$30.0k
Jun	$52.0k	$28.0k
Jul	$49.0k	$34.0k
Aug	$55.0k	$31.0k
Sep	$51.0k	$36.0k
Oct	$46.0k	$33.0k
Nov	$53.0k	$38.0k
Dec	$58.0k	$35.0k

Charts8 stylesPro

Composed ChartBars, lines and areas in one plot, with an optional second value axis.

Navigation & Layout4 stylesPro

Context MenuActions that open on right-click, styled like the dropdown menu.

AI & Agents3 stylesPro

Context MeterHow full the model's context window is: a ring for the prompt toolbar or a bar with a breakdown.

AI & Agents2 stylesPro

Context PillA removable chip for what the prompt refers to: a file, a person, a channel or a link.


INV-2001	Nora Lindgren	Paid	Pro	$299
INV-2002	Daniel Okafor	Pending	Core	$398
INV-2003	Priya Raman	Paid	Core	$597
INV-2004	Tomás Ferreira	Overdue	Pro	$299
INV-2005	Maya Kessler	Paid	Core	$398

0 of 14 rows selected

Rows per page

Data & Tables10 stylesPro

Data TableA data table on TanStack Table: sort on several columns, filter from the column definitions, select rows with a floating action bar, expand, pin, resize columns, page and export to CSV, and show rows as cards on small screens, with controlled state for server-side data.

Forms5 styles

Date PickerA Calendar inside a Popover, with Cancel/Apply actions.

Core Elements7 styles

DialogA modal window for focused tasks, built on Base UI.

@@ -12,7 +12,8 @@ export async function sendReminders()

const overdue = invoices.filter(isOverdue)

for (const invoice of overdue) {

if (daysSince(invoice.dueDate) < 7) continue

if (daysSince(invoice.dueDate) < 3) continue

if (invoice.reminderSentAt) continue

await send({

to: invoice.customer.email,

subject: "Payment reminder",

subject: `Invoice ${invoice.number} is overdue`,

})

AI & Agents3 stylesPro

Diff ViewThe result of an edit tool call: file, added and removed lines, and the changed code.

Response time, data table
group	Median
API	136 ms
Web	196 ms
Edge	74 ms

Charts10 stylesPro

Distribution ChartDistribution chart for raw observations: histograms, box plot, violin, density, ridgeline, strip plot and error bars.

Core Elements5 styles

Divider with LabelA separator with a centered text label, e.g. for "or" between two sign-in options.

Forms2 styles

Drop ZoneA drag-and-drop file upload target with a click-to-browse fallback.

Core Elements5 styles

Dropdown MenuA menu of actions: icons, shortcuts, checkbox and radio entries, submenus, two-line entries, loading and empty states.

AI & Agents4 stylesPro

Duration BarA step's share of the run as a bar, with a tick at the estimate and red when it runs over.

Core Elements2 styles

Emoji PickerA grid of selectable emoji, typically shown inside a Popover.

Core Elements1 styles

Emoji Reaction ButtonA toggleable emoji reaction with a count, like a Slack reaction.

Core Elements2 styles

Empty StatePlaceholder shown when a list or search has no results.

AI & Agents3 stylesPro

Expiry TimerCountdown until an approval or permission request lapses — amber at the end, red once expired.

Forms4 styles

FieldLabelling and validation for a single form control — label, description, and error message.

Forms4 styles

FieldsetA native fieldset with a legend, for grouping related fields.

Core Elements2 styles

File TreeAn indented list of folders and files: a tree with arrow-key navigation whose folders open and close, and onSelect reports the chosen file or folder.

Data & Tables6 stylesPro

Filter MenuA filter button that opens a checklist of options with counts, an all-row and Clear filter — for table and list filters.

Core Elements3 styles

Floating TOCA table of contents for an article, with a marker that follows the section in view. It does not stick by itself: put it in a `sticky` container to keep it on screen.

Forms4 styles

FormA form wrapper that simplifies validation and submission.

Forms3 styles

Form ActionsThe row of buttons at the end of a form, aligned right, left or spread to both edges.

Conversion funnel, data table
name	Value	From previous	From first
Visitors	48.2k	–	–
Sign-ups	12.9k	26.8%	26.8%
Activated	7.4k	57.4%	15.4%
Trial	3.9k	52.7%	8.1%
Paid	1.5k	38.5%	3.1%

Charts14 stylesPro

Funnel ChartFunnel chart for conversion between steps: trapezoid funnel and pyramid, bar funnels and KPI-column funnel areas, with the step conversion in the tooltip.

GPU temperature, data table
name	Value
GPU temperature	78 °C

Charts6 stylesPro

Gauge ChartGauge for one value on its scale: semi-circle, speedometer, ring or segmented. The arc draws to the value and the number counts up.

AI & Agents4 stylesPro

Handoff DividerMarks the moment one agent passes the conversation to another.

Sessions by weekday and hour, data table
Row · column	Value
Mon · 0:00	6
Mon · 1:00	2
Mon · 2:00	8
Mon · 3:00	4
Mon · 4:00	4
Mon · 5:00	6
Mon · 6:00	10
Mon · 7:00	20
Mon · 8:00	27
Mon · 9:00	43
Mon · 10:00	50
Mon · 11:00	66
Mon · 12:00	78
Mon · 13:00	80
Mon · 14:00	87
Mon · 15:00	82
Mon · 16:00	72
Mon · 17:00	66
Mon · 18:00	48
Mon · 19:00	35
Mon · 20:00	32
Mon · 21:00	16
Mon · 22:00	16
Mon · 23:00	11
Tue · 0:00	4
Tue · 1:00	1
Tue · 2:00	6
Tue · 3:00	4
Tue · 4:00	10
Tue · 5:00	12
Tue · 6:00	14
Tue · 7:00	16
Tue · 8:00	27
Tue · 9:00	39
Tue · 10:00	50
Tue · 11:00	67
Tue · 12:00	75
Tue · 13:00	83
Tue · 14:00	82
Tue · 15:00	85
Tue · 16:00	72
Tue · 17:00	64
Tue · 18:00	55
Tue · 19:00	42
Tue · 20:00	33
Tue · 21:00	18
Tue · 22:00	15
Tue · 23:00	11
Wed · 0:00	7
Wed · 1:00	5
Wed · 2:00	8
Wed · 3:00	7
Wed · 4:00	10
Wed · 5:00	11
Wed · 6:00	11
Wed · 7:00	22
Wed · 8:00	31
Wed · 9:00	39
Wed · 10:00	52
Wed · 11:00	61
Wed · 12:00	74
Wed · 13:00	78
Wed · 14:00	87
Wed · 15:00	81
Wed · 16:00	75
Wed · 17:00	63
Wed · 18:00	54
Wed · 19:00	40
Wed · 20:00	25
Wed · 21:00	24
Wed · 22:00	12
Wed · 23:00	8
Thu · 0:00	6
Thu · 1:00	1
Thu · 2:00	3
Thu · 3:00	4
Thu · 4:00	3
Thu · 5:00	14
Thu · 6:00	18
Thu · 7:00	20
Thu · 8:00	30
Thu · 9:00	41
Thu · 10:00	51
Thu · 11:00	62
Thu · 12:00	72
Thu · 13:00	85
Thu · 14:00	86
Thu · 15:00	83
Thu · 16:00	78
Thu · 17:00	68
Thu · 18:00	48
Thu · 19:00	35
Thu · 20:00	32
Thu · 21:00	16
Thu · 22:00	15
Thu · 23:00	13
Fri · 0:00	6
Fri · 1:00	2
Fri · 2:00	5
Fri · 3:00	4
Fri · 4:00	5
Fri · 5:00	8
Fri · 6:00	16
Fri · 7:00	19
Fri · 8:00	29
Fri · 9:00	41
Fri · 10:00	51
Fri · 11:00	61
Fri · 12:00	77
Fri · 13:00	82
Fri · 14:00	82
Fri · 15:00	80
Fri · 16:00	71
Fri · 17:00	66
Fri · 18:00	52
Fri · 19:00	38
Fri · 20:00	28
Fri · 21:00	17
Fri · 22:00	12
Fri · 23:00	11
Sat · 0:00	0
Sat · 1:00	7
Sat · 2:00	5
Sat · 3:00	9
Sat · 4:00	7
Sat · 5:00	9
Sat · 6:00	7
Sat · 7:00	9
Sat · 8:00	12
Sat · 9:00	16
Sat · 10:00	24
Sat · 11:00	27
Sat · 12:00	37
Sat · 13:00	31
Sat · 14:00	34
Sat · 15:00	38
Sat · 16:00	31
Sat · 17:00	30
Sat · 18:00	24
Sat · 19:00	22
Sat · 20:00	15
Sat · 21:00	8
Sat · 22:00	13
Sat · 23:00	4
Sun · 0:00	7
Sun · 1:00	5
Sun · 2:00	4
Sun · 3:00	3
Sun · 4:00	6
Sun · 5:00	6
Sun · 6:00	12
Sun · 7:00	13
Sun · 8:00	15
Sun · 9:00	20
Sun · 10:00	25
Sun · 11:00	27
Sun · 12:00	34
Sun · 13:00	39
Sun · 14:00	37
Sun · 15:00	32
Sun · 16:00	31
Sun · 17:00	26
Sun · 18:00	27
Sun · 19:00	17
Sun · 20:00	18
Sun · 21:00	11
Sun · 22:00	8
Sun · 23:00	10

Charts6 stylesPro

HeatmapHeatmap for values across two dimensions: a weekday × hour matrix, a contribution calendar, a punch card, labelled cells and a correlation matrix.

Core Elements2 styles

Holo CardA card with a soft glow that follows the mouse.

Core Elements2 styles

Hover CardA rich preview popup shown on hovering a trigger.

Core Elements7 styles

Icon ButtonA square or circular button for a single icon action.

Core Elements5 styles

InputA single-line text field with sm/default/lg sizes, an optional label, helper or error text, leading and trailing content, and a password reveal button.

Forms6 styles

Input GroupGroups an input with leading/trailing addons — icons, buttons, or text.

Forms4 styles

Invite RowAn email field and a role picker for inviting one person, with a button to remove the row.

Core Elements5 styles

Item CardA generic row card: icon, title, description, meta, action.

To do2

FeatureDesign

Address autocomplete for the shipping form

Nov 1832/3

MKDO

Product grid with filters and three desks

Design

Redesign the product grid

Nov 215

PR

In progress2 / 3

Feature

Apple Pay and Google Pay buttons

x

Nov 144/10

TFPR

Bug

Fix the double submit on slow networks

Nov 1210/2

DO

In review1

Content

Copy review for the error messages

Nov 152

MK

Core Elements5 stylesPro

KanbanA drag-and-drop board of columns and cards.

Core Elements5 styles

KbdDisplays a keyboard key or shortcut, e.g. inside a search input.

KPI / Metric Card4 stylesPro

KPIA single metric with its change, as a card with a dot and delta, a plain card with a caption, or an inline value.

KPI / Metric Card3 stylesPro

KPI GroupA row of KPIs sharing one bordered container.

Forms12 styles

LabelAn accessible label for a form control.

Revenue and expenses, data table
month	Revenue	Expenses
Jan	$32.0k	$18.0k
Feb	$41.0k	$22.0k
Mar	$38.0k	$27.0k
Apr	$47.0k	$24.0k
May	$44.0k	$30.0k
Jun	$52.0k	$28.0k
Jul	$49.0k	$34.0k
Aug	$55.0k	$31.0k
Sep	$51.0k	$36.0k
Oct	$46.0k	$33.0k
Nov	$53.0k	$38.0k
Dec	$58.0k	$35.0k

Charts27 stylesPro

Line ChartLine chart for trends over time: smooth lines (straight on request) and stepped lines, comparisons, bands, forecasts and thresholds, with tooltip, keyboard navigation and a data table.

Commerce5 stylesPro

Line ItemOne product line in a cart or order summary, with image, variant, quantity and price.

Data & Tables8 stylesPro

List GroupA 400 px card of list rows with an optional header — sixteen ready patterns: basic, icon, avatar, brand, metric, selectable, toggle, sortable, expandable, grouped, ranking, comparison, tree, action, discussion and master–detail.

Data & Tables9 stylesPro

List ItemOne list row: an icon tile, avatar, logo, flag, checkbox or date tile on the left, title and description in the middle, a value, badge, trend, button, switch or menu on the right. Comfortable or compact, with default, hover, selected and disabled states.

Data & Tables7 stylesPro

List PanelA dashboard card with a titled list: 31 ready panels (transactions, orders, integrations, team, activity, crypto, timelines …) with loading, empty and error states, or your own rows.

AI & Agents5 stylesPro

Log StreamA run's log with an All or Errors filter and auto-scroll.

AI & Agents1 stylesPro

MarkdownProse styling wrapper for rendered markdown/HTML assistant output.

AI & Agents3 stylesPro

Mention PickerThe @ picker for adding context to a prompt: files, people and channels in groups.

Core Elements3 styles

MeterA graphical display of a fixed value within a range, e.g. disk usage.

KPI / Metric Card6 stylesPro

Metric CardOne number with its trend and, per variant, a sparkline, progress, breakdown, comparison, distribution, status, action or AI insight.

KPI / Metric Card3 stylesPro

Metric GroupSeveral Metric Cards in one frame, divided by hairlines — the KPI row at the top of a dashboard.

AI & Agents4 stylesPro

Model PickerThe model chip in a prompt box: always clickable, it opens a popover to switch models.

AI & Agents3 stylesPro

Model SelectPick the model and how hard it should think, with context size and price at a glance.

Navigation & Layout4 stylesPro

NavbarThe top bar in four scroll modes — static, sticky, hide on scroll, transparent — with mega menu, search, overflow and a mobile drawer.

Who works with whom, data table
label	Group	Connections	Connected to
Product lead	Product	9	Tomás, Clara, Nina, Priya, Sofia, Emma, Nora, Maya
Design lead	Design	8	Amir, Noah, Leo, Maya, Ben, Paul, Daniel, Emma
Sales lead	Sales	8	Sofia, Emma, Nora, Tomás, Clara, Nina, Noah
Support lead	Support	9	Ben, Paul, Daniel, Amir, Noah, Leo, Sofia, Nora
Tomás	Product	2	Product lead, Daniel
Amir	Design	2	Design lead, Amir
Sofia	Sales	2	Sales lead, Support lead
Ben	Support	2	Support lead
Clara	Product	3	Product lead, Paul
Noah	Design	3	Design lead, Sales lead, Priya
Emma	Sales	4	Sales lead, Design lead, Nina, Leo
Paul	Support	2	Support lead, Clara
Nina	Product	2	Product lead, Emma
Leo	Design	2	Design lead, Emma
Nora	Sales	2	Sales lead, Support lead
Daniel	Support	2	Support lead, Tomás
Priya	Product	2	Product lead, Noah
Maya	Design	2	Design lead, Product lead
Tomás	Sales	2	Sales lead
Amir	Support	2	Support lead, Amir
Sofia	Product	1	Product lead
Ben	Design	1	Design lead
Clara	Sales	1	Sales lead
Noah	Support	1	Support lead
Emma	Product	1	Product lead
Paul	Design	1	Design lead
Nina	Sales	1	Sales lead
Leo	Support	1	Support lead
Nora	Product	1	Product lead
Daniel	Design	1	Design lead

Charts6 stylesPro

Network ChartNetwork chart for relations: a force graph, an arc diagram, a tree and a radial tree.

Forms4 styles

Number FieldA numeric input with increment/decrement buttons.

Forms3 styles

Number StepperA +/- increment control for a bounded numeric value.

Data & Tables2 stylesPro

Number ValueA large number with its change beside it: caret up or down, green or red.

Forms4 styles

OTP FieldA segmented input for one-time passwords and verification codes.

Navigation & Layout4 stylesPro

Page HeaderThe title row at the top of a page or section, with an optional description, buttons or a text link.

Core Elements4 styles

PaginationPage navigation with Prev/Next and numbered pages, or a simple "Page X of Y" mode.

Forms3 styles

Password RequirementOne password rule in a checklist that turns green once the password meets it.

Forms4 styles

Password StrengthA four-step meter with a label that shows how strong a password is.

Commerce3 stylesPro

Payment MethodsA row of small labels for the payment methods a shop accepts.

Traffic sources, data table
name	Value
Direct	42%
Referral	26%
Social	18%
Other	14%

Charts17 stylesPro

Pie ChartPie and donut charts for shares of a whole: pies, donuts, half and nested rings, rose and polar bars, labelled and exploded pies.

AI & Agents3 stylesPro

Plan StepOne step of an agent plan: number or status icon, title, status in words and how long it took.

AI & Agents3 stylesPro

Plan SummaryA plan on one card before it runs: goal, steps, time, cost, tools and phases.

Core Elements3 styles

PopoverA floating panel anchored to a trigger element.

Core Elements2 styles

Pressable FeedbackWraps any content with a scale-down press animation.

Commerce5 stylesPro

PriceA price with an optional billing period, a crossed-out old price and a savings badge.

Commerce8 stylesPro

Product CardA shop tile with image, name, price and rating, plus optional wishlist and add-to-cart buttons.

Commerce6 stylesPro

Product ImageA product photo, or a colored placeholder with an icon when there is no photo yet.

Core Elements5 styles

ProgressA horizontal bar showing completion of a task.

Plan usage, data table
name	Value
API requests	72%
Storage	48%
Seats	90%
Build minutes	31%

Charts4 stylesPro

Progress ChartProgress chart for quotas and goals: meters, a segmented bar and a waffle.

AI & Agents3 stylesPro

Prompt InputAn auto-resizing chat input with attach and send buttons.

AI & Agents3 stylesPro

Prompt Mode SwitchWhat the agent may do with the next prompt — answer, act or edit — with the send keys underneath.

AI & Agents2 stylesPro

Prompt SuggestionA pill-shaped suggested-prompt chip shown above an empty chat input.

Core Elements3 styles

Pull to RefreshDrag down from the top of any content past a threshold to trigger an async refresh, with a rotating spinner and a rubber-band release.

Product scores, data table
metric	Team A	Team B
Speed	86	65
Quality	74	90
Support	60	70
Price	55	80
Docs	70	58
Design	92	61

Charts8 stylesPro

Radar ChartRadar chart for comparing profiles across several measures, on a polygon or circular grid.

Browser share, data table
name	Value
Chrome	78
Safari	61
Firefox	34
Edge	22

Charts6 stylesPro

Radial ChartRadial chart for progress against a goal: radial bars, a stacked ring, a progress ring and activity rings.

Forms5 styles

Radio Button GroupA single-select group of toggle-styled buttons.

Core Elements4 styles

Radio GroupA set of mutually exclusive options.

Temperature range per month, data table
month	Low	High
Jan	-6 °C	6 °C
Feb	-5 °C	8 °C
Mar	-1 °C	12 °C
Apr	4 °C	18 °C
May	9 °C	24 °C
Jun	13 °C	28 °C
Jul	14 °C	30 °C
Aug	13 °C	28 °C
Sep	9 °C	24 °C
Oct	4 °C	18 °C
Nov	-1 °C	12 °C
Dec	-5 °C	8 °C

Charts5 stylesPro

Range Bar ChartRange bar chart for a span per category — minimum to maximum, planned against actual, as dumbbells or as gradient bars.

Core Elements4 styles

RatingAn interactive star rating input.

Navigation & Layout4 stylesPro

ResizableA two-pane layout with a draggable divider between them.

Commerce5 stylesPro

Review CardA customer review with author, rating, text, photos, a reply from the store and a helpful button.

Forms4 styles

Rich Text EditorA Tiptap-powered WYSIWYG editor with a formatting toolbar.

Support tickets by topic, data table
month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

Charts4 stylesPro

River ChartRiver chart (streamgraph) for how a mix changes over time: plain, with gradient bands or offset.

The invoice API is limiting requests. Wait a minute, then resume.

Failed at fetch_invoices· Attempt 2 of 3

text

HTTPError: 429 Too Many Requests
  at fetchInvoices (tools/invoices.ts:42)
  at runStep (runtime/step.ts:118)

retry-after: 60
error id: err_8f3a21c9

AI & Agents3 stylesPro

Run ErrorA failed run: which step threw, how many attempts are left, retry or resume.

AI & Agents4 stylesPro

Run TimelineEvery step of a run in order, with duration, tokens and expandable input/output.

Traffic from channels to signups, data table
Source → target	Flow	Share of source
Search → Docs	3.2k	54%
Search → Blog	1.8k	31%
Search → Pricing	0.9k	15%
Direct → Pricing	1.6k	64%
Direct → Docs	0.9k	36%
Social → Blog	1.4k	82%
Social → Pricing	0.3k	18%
Referral → Docs	0.7k	58%
Referral → Pricing	0.5k	42%
Pricing → Signup	1.9k	58%
Pricing → Left	1.4k	42%
Docs → Signup	1.3k	27%
Docs → Left	3.5k	73%
Blog → Signup	0.4k	13%
Blog → Left	2.8k	88%

Traffic from channels to signups, node totals
Node	In	Out
Search	–	5.9k
Direct	–	2.5k
Social	–	1.7k
Referral	–	1.2k
Pricing	3.3k	3.3k
Docs	4.8k	4.8k
Blog	3.2k	3.2k
Signup	3.6k	–
Left	7.7k	–

Charts6 stylesPro

Sankey ChartSankey chart for flows between stages: basic and gradient flows, a vertical sankey, an alluvial and a chord diagram.

AI & Agents4 stylesPro

Scope ListWhat an agent asks to access, one scope per row, with a countdown until the request lapses.

Nora Lindgren renamed Q4 roadmap2 min ago
Daniel Okafor commented on Pricing14 min ago
Priya Raman uploaded Onboarding.fig1 hour ago
Tomás Ferreira archived Brand refresh3 hours ago
Maya Kessler invited 4 people5 hours ago
Nora Lindgren published the changelogYesterday
Daniel Okafor closed 12 issuesYesterday
Priya Raman moved Help center to Done2 days ago
Tomás Ferreira changed the billing plan2 days ago
Maya Kessler created Launch checklist3 days ago

Navigation & Layout2 stylesPro

Scroll AreaA scrollable container with custom, always-styled scrollbars.

AI & Agents5 stylesPro

Search Result CardOne ranked result of a web-search tool call: source, relevance, title and snippet.

Core Elements6 styles

SegmentA single-select toggle group, like a compact tab bar, with a pill or a rounded-corner track.

Forms6 styles

SelectA styled select: a full-width field trigger, or a compact inline trigger that sits within a sentence, with a popup list.

Forms7 styles

Selector ItemA list row pairing a leading icon/avatar and label/description with a trailing radio, checkbox, or switch.

Core Elements4 styles

SeparatorA thin dividing line, horizontal or vertical, solid or dashed.

Forms3 styles

Settings RowA setting's title and description with a switch, or any other control, on the right.

Navigation & Layout4 stylesPro

SheetA panel that slides in from an edge of the screen — left, right, or bottom.

Navigation & Layout6 stylesPro

SidebarApp navigation: docked, inset or floating, a dark tone on a light page, and an icon rail with flyouts.

Core Elements3 styles

SkeletonA pulsing placeholder shown while content is loading.

AI & Agents3 stylesPro

Slash Command MenuThe popover that opens when someone types / in the prompt: commands with a short description, filtered as they type.

Core Elements4 styles

SliderA draggable control for selecting one value or a range along a track.

Squad ranking by score, data table
name	W1	W8
Atlas	#4 · 46	#6 · 29
Nova	#2 · 63	#3 · 53
Orbit	#1 · 65	#1 · 63
Pulse	#6 · 33	#2 · 58
Quark	#5 · 40	#4 · 40
Vega	#3 · 49	#5 · 32

Charts6 stylesPro

Slope ChartSlope chart for change between columns: slope, rank shift, bump chart, dumbbell and parallel coordinates.

Forms4 styles

Social Sign In ButtonsSign-in buttons for Google, Apple, GitHub and Microsoft, side by side or stacked.

AI & Agents4 stylesPro

Source ListNumbered sources pinned to a chat; citations like [1] in answers point here.

Charts6 stylesPro

SparklineSmall trend charts: KPI tiles, a metric list, a column strip and a win/loss strip, plus SparklineMini for tables and tiles.

Core Elements2 styles

SpinnerA spinning indicator for an in-progress loading state.

Stacked Charts, data table
month	Direct	Organic	Referral
Jan	$14.0k	$10.0k	$5.0k
Feb	$18.0k	$11.0k	$7.0k
Mar	$16.0k	$10.0k	$6.0k
Apr	$20.0k	$14.0k	$8.0k
May	$19.0k	$13.0k	$7.0k
Jun	$23.0k	$15.0k	$9.0k
Jul	$21.0k	$14.0k	$8.0k
Aug	$25.0k	$16.0k	$10.0k
Sep	$22.0k	$15.0k	$9.0k
Oct	$20.0k	$13.0k	$8.0k
Nov	$24.0k	$16.0k	$10.0k
Dec	$27.0k	$17.0k	$11.0k

Charts13 stylesPro

Stacked ChartStacked chart for the parts of a total: stacked and 100 % columns, stacked areas, diverging Likert bars, Marimekko and gapped rows.

Uptime, last 60 days, data table
label	Status
API · Day 1	Operational
API · Day 2	Operational
API · Day 3	Operational
API · Day 4	Operational
API · Day 5	Operational
API · Day 6	Operational
API · Day 7	Operational
API · Day 8	Operational
API · Day 9	Operational
API · Day 10	Operational
API · Day 11	Operational
API · Day 12	Operational
API · Day 13	Operational
API · Day 14	Operational
API · Day 15	Operational
API · Day 16	Operational
API · Day 17	Operational
API · Day 18	Operational
API · Day 19	Operational
API · Day 20	Operational
API · Day 21	Operational
API · Day 22	Operational
API · Day 23	Operational
API · Day 24	Operational
API · Day 25	Operational
API · Day 26	Operational
API · Day 27	Operational
API · Day 28	Operational
API · Day 29	Operational
API · Day 30	Operational
API · Day 31	Operational
API · Day 32	Outage
API · Day 33	Operational
API · Day 34	Operational
API · Day 35	Operational
API · Day 36	Operational
API · Day 37	Operational
API · Day 38	Operational
API · Day 39	Operational
API · Day 40	Operational
API · Day 41	Operational
API · Day 42	Operational
API · Day 43	Operational
API · Day 44	Operational
API · Day 45	Operational
API · Day 46	Operational
API · Day 47	Operational
API · Day 48	Operational
API · Day 49	Operational
API · Day 50	Operational
API · Day 51	Operational
API · Day 52	Operational
API · Day 53	Operational
API · Day 54	Operational
API · Day 55	Operational
API · Day 56	Operational
API · Day 57	Operational
API · Day 58	Operational
API · Day 59	Degraded
API · Day 60	Operational
Dashboard · Day 1	Operational
Dashboard · Day 2	Operational
Dashboard · Day 3	Operational
Dashboard · Day 4	Operational
Dashboard · Day 5	Operational
Dashboard · Day 6	Operational
Dashboard · Day 7	Operational
Dashboard · Day 8	Operational
Dashboard · Day 9	Operational
Dashboard · Day 10	Operational
Dashboard · Day 11	Operational
Dashboard · Day 12	Operational
Dashboard · Day 13	Operational
Dashboard · Day 14	Operational
Dashboard · Day 15	Operational
Dashboard · Day 16	Operational
Dashboard · Day 17	Operational
Dashboard · Day 18	Operational
Dashboard · Day 19	Operational
Dashboard · Day 20	Operational
Dashboard · Day 21	Operational
Dashboard · Day 22	Operational
Dashboard · Day 23	Operational
Dashboard · Day 24	Operational
Dashboard · Day 25	Operational
Dashboard · Day 26	Operational
Dashboard · Day 27	Operational
Dashboard · Day 28	Degraded
Dashboard · Day 29	Operational
Dashboard · Day 30	Operational
Dashboard · Day 31	Operational
Dashboard · Day 32	Operational
Dashboard · Day 33	Operational
Dashboard · Day 34	Operational
Dashboard · Day 35	Operational
Dashboard · Day 36	Operational
Dashboard · Day 37	Operational
Dashboard · Day 38	Operational
Dashboard · Day 39	Operational
Dashboard · Day 40	Operational
Dashboard · Day 41	Operational
Dashboard · Day 42	Operational
Dashboard · Day 43	Operational
Dashboard · Day 44	Operational
Dashboard · Day 45	Operational
Dashboard · Day 46	Operational
Dashboard · Day 47	Operational
Dashboard · Day 48	Degraded
Dashboard · Day 49	Operational
Dashboard · Day 50	Operational
Dashboard · Day 51	Operational
Dashboard · Day 52	Operational
Dashboard · Day 53	Operational
Dashboard · Day 54	Operational
Dashboard · Day 55	Operational
Dashboard · Day 56	Operational
Dashboard · Day 57	Operational
Dashboard · Day 58	Operational
Dashboard · Day 59	Operational
Dashboard · Day 60	Operational
Webhooks · Day 1	Operational
Webhooks · Day 2	Operational
Webhooks · Day 3	Operational
Webhooks · Day 4	Operational
Webhooks · Day 5	Operational
Webhooks · Day 6	Operational
Webhooks · Day 7	Operational
Webhooks · Day 8	Operational
Webhooks · Day 9	Operational
Webhooks · Day 10	Operational
Webhooks · Day 11	Operational
Webhooks · Day 12	Operational
Webhooks · Day 13	Operational
Webhooks · Day 14	Operational
Webhooks · Day 15	Operational
Webhooks · Day 16	Operational
Webhooks · Day 17	Operational
Webhooks · Day 18	Degraded
Webhooks · Day 19	Operational
Webhooks · Day 20	Operational
Webhooks · Day 21	Operational
Webhooks · Day 22	Operational
Webhooks · Day 23	Operational
Webhooks · Day 24	Operational
Webhooks · Day 25	Degraded
Webhooks · Day 26	Operational
Webhooks · Day 27	Operational
Webhooks · Day 28	Operational
Webhooks · Day 29	Outage
Webhooks · Day 30	Degraded
Webhooks · Day 31	Operational
Webhooks · Day 32	Operational
Webhooks · Day 33	Operational
Webhooks · Day 34	Operational
Webhooks · Day 35	Operational
Webhooks · Day 36	Operational
Webhooks · Day 37	Operational
Webhooks · Day 38	Operational
Webhooks · Day 39	Operational
Webhooks · Day 40	Operational
Webhooks · Day 41	Operational
Webhooks · Day 42	Operational
Webhooks · Day 43	Operational
Webhooks · Day 44	Operational
Webhooks · Day 45	Operational
Webhooks · Day 46	Operational
Webhooks · Day 47	Operational
Webhooks · Day 48	Operational
Webhooks · Day 49	Operational
Webhooks · Day 50	Operational
Webhooks · Day 51	Operational
Webhooks · Day 52	Operational
Webhooks · Day 53	Operational
Webhooks · Day 54	Operational
Webhooks · Day 55	Operational
Webhooks · Day 56	Operational
Webhooks · Day 57	Operational
Webhooks · Day 58	Operational
Webhooks · Day 59	Operational
Webhooks · Day 60	Operational

Charts4 stylesPro

Status TrackerStatus tracker for uptime and run history, plus StatusStripMini — the small strip for tables and lists.

Navigation & Layout5 stylesPro

StepperA horizontal multi-step progress indicator with connectors.

Revenue by product line, data table
label	Value
Software	$1.1M
Services	$350k
Hardware	$240k
Marketplace	$155k
Core	$340k
Pro	$260k
Enterprise	$410k
Add-ons	$90k
Onboarding	$120k
Training	$80k
Support	$150k
Devices	$180k
Accessories	$60k
Templates	$70k
Plugins	$55k
Themes	$30k

Charts4 stylesPro

SunburstSunburst for a hierarchy as rings, or as circle packing.

Core Elements5 styles

SwitchA toggle control for a binary setting.

Recent invoicesInvoices issued in the last 30 days
Invoice	Status	Customer	Amount
INV-2041	Paid	WunderUI	$24,800.00
INV-2040	Open	Halcyon Labs	$3,200.00
INV-2039	Overdue	Pergola Foods	$980.00
INV-2038	Paid	Acme Inc.	$12,400.00
Total			Sum$41,380.00

Core Elements5 styles

TableRows and columns with 23 ready-made cell types; for sorting and search use Data Table.

Core Elements4 styles

TabsSwitches between related views in the same context.

Data & Tables5 stylesPro

Task RowA row in a Gantt task list: either a task with its color, assignee and dates, or a group header that folds open and closed.

AI & Agents3 stylesPro

Terminal OutputThe result of a code-execution tool call: command, exit code, run time, stdout and stderr.

Forms3 styles

Text Link RowA line of text followed by a link, like “Don't have an account? Sign up”, or a back link with an arrow.

AI & Agents2 stylesPro

Text ShimmerA shimmering-gradient text effect for a 'thinking...' loading label.

Core Elements4 styles

TextareaA multi-line text field with sm/default/lg sizes and an optional character counter.

Core Elements7 styles

TimelineA vertical sequence of dated, dot-connected events.

Launch plan, data table
label	Start	End	Group
Discovery	W40	W43	Product
Design	W42	W46	Design
API	W44	W50	Engineering
Web app	W46	W52	Engineering
Mobile app	W48	W53	Engineering
QA	W51	W54	Quality
Launch	W54	W54	Product

Charts3 stylesPro

Timeline ChartTimeline chart: a Gantt chart with milestones and a Today line, and an event timeline.

Core Elements2 styles

ToastA temporary notification that appears in the corner of the screen, with success/error/warning/info types.

Core Elements4 styles

ToggleA standalone two-state button that can be pressed or unpressed.

AI & Agents4 stylesPro

Tool Permission RowWhether an agent may call a tool: Allow, Ask or Deny, with the scope it covers.

Core Elements3 styles

ToolbarA container for grouping a set of buttons and controls.

Core Elements6 styles

TooltipA short label shown on hover, in any of 4 directions.

Revenue by product line, data table
label	Path	Value	Share
Core	Software › Core	$340k	18.4%
Pro	Software › Pro	$260k	14.1%
Enterprise	Software › Enterprise	$410k	22.2%
Add-ons	Software › Add-ons	$90k	4.9%
Onboarding	Services › Onboarding	$120k	6.5%
Training	Services › Training	$80k	4.3%
Support	Services › Support	$150k	8.1%
Devices	Hardware › Devices	$180k	9.8%
Accessories	Hardware › Accessories	$60k	3.3%
Templates	Marketplace › Templates	$70k	3.8%
Plugins	Marketplace › Plugins	$55k	3%
Themes	Marketplace › Themes	$30k	1.6%

Charts5 stylesPro

TreemapTreemap for the parts of a hierarchy: squarified, nested with group headers, or as an icicle.

Core Elements2 styles

Trend ChipA small pill showing a change, up or down, in seven icon styles.

AI & Agents7 stylesPro

Usage MeterOne limit as a row, or as a budget card: what is used, what is allowed, and a warning before it runs out.

AI & Agents4 stylesPro

Voice InputTalk instead of typing: idle, listening with a live waveform and transcript, then transcribing.

Revenue bridge Q2 to Q3, data table
step	Change
Q2 revenue	$248k
New business	$64k
Expansion	$31k
Contraction	$-18k
Churn	$-27k
Q3 revenue	$0k

Charts4 stylesPro

Waterfall ChartWaterfall chart for how a total changes: the start total, the changes that move it and the end total, in one indigo scale with a +/− sign on every change.

Core Elements3 styles

WidgetA generic dashboard widget shell: header, body, footer.

React components

Delete project “Northstar”?

Invite a teammate

Profile

Team

Recent transactions

Audit log

Sources

Traffic sources

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78

month	Billing	Access	Bugs	API	Other
Jan	110	114	62	86	64
Feb	140	119	67	96	72
Mar	151	123	97	83	79
Apr	173	99	93	75	73
May	152	100	113	61	69
Jun	152	93	125	55	70
Jul	124	69	124	39	69
Aug	100	78	135	55	75
Sep	79	63	132	62	67
Oct	80	61	143	75	61
Nov	69	54	162	97	66
Dec	91	59	180	90	78