Components

Each page shows the component live, then its Figma properties and variants, then how to use it in code, with the full React API at the end. 31 components ship in React; the rest are Figma-only for now. Not sure which one you need? See Choosing a component.

Actions

ButtonTriggers an action. Five hierarchies, five sizes from 24 to 56px.React + FigmaButton groupConnected buttons for switching views or filters.Figma only

Forms & inputs

InputSingle-line text field with label, hint and error. Heights match Button.React + FigmaSelectPick one value from a list. Keyboard and screen-reader ready.React + FigmaCheckbox, Radio & ToggleSelection controls in two sizes.React + FigmaDate pickerA date field with a calendar; single dates or ranges.React + FigmaSliderSlider for a single value or a range.Figma onlyFile uploadA drop zone and upload rows with progress, success and error states.Figma onlyColor pickerSaturation area, hue slider, eyedropper, hex field and presets.Figma onlyText editorRich text editor shell.Figma only

Feedback

AlertInline messages about a page, section or form.React + FigmaToastShort floating confirmations with auto-dismiss.React + FigmaBannerFull-width announcement bar.Figma onlyNotificationsDropdown panel for the bell icon: header, tabs, rows, footer link.Figma onlyProgress barProgress of a known task or quota.React + FigmaLoading & skeletonSpinners for short waits and skeletons that hold the layout while content loads.Figma onlyEmpty stateFills empty pages and tables, and says what to do next.React + Figma

Navigation

NavigationApp header, sidebar and nav items.React + FigmaTabsSwitch between views. Underline, pill or segmented.React + FigmaBreadcrumbBreadcrumb trail; last segment is Current.Figma onlyPagination & carouselPagination for tables and lists, and carousel controls for marketing galleries.Figma onlyProgress stepsMulti-step flow indicator for onboarding, checkout and setup wizards.Figma only

Data display

TableRows of records with sorting and selection.React + FigmaBadge & TagStatus labels and removable chips.React + FigmaAvatarPeople and workspaces, 24 to 64px, with initials fallback and status.React + FigmaMetric cardA single KPI for dashboards.React + FigmaActivity itemA feed or notification row: who did what, and when.Figma onlyCode snippetCopyable code, Roboto Mono.Figma onlyTree viewNested, expandable lists for files, folders and navigation hierarchies.Figma onlyMessagingChat panel: header, Messages slot, composer.Figma only

Overlays

ModalA dialog that blocks the page until the person decides.React + FigmaDropdown menuA list of actions that opens from a button.React + FigmaTooltip & popoverDark tooltip; arrow None, Top, Bottom, Left, Right.Figma onlyDrawer & slideoutPanel from right, left or bottom (mobile sheet); content is a slot.Figma onlyCommand menu⌘K command palette; results are a slot.Figma only

Layout & content

CardGroups related content and actions. Outlined, elevated or filled.React + FigmaHeaders & dividersTop of an app page: breadcrumb, title, description, actions, divider or tabs.Figma only

Media & assets

Atomus iconsIcon sets beyond the UI icons: featured icons, brand and payment marks, flags, file types, folders, integrations and star ratings.Figma onlyShared assetsMockups and annotation kit used across product and marketing files: credit card, video player, email template, status tags and spec annotations.Figma only

Charts

ChartsLine, bar, pie, radar and gauge charts for dashboards and reports, with a shared legend item.Figma only

AI

ConversationA full AI conversation built from the Agent kit: welcome state, reasoning, a tool call, an approval and a cited answer.React + FigmaPrompt inputThe composer of an AI chat: auto-growing text, attachments, a toolbar slot, send and stop, and / or @ menus.React + FigmaMessageOne turn in a conversation, with the speaker, status, actions and branches.React + FigmaStreaming text & shimmerText that renders as it streams, with a caret and calm screen-reader announcements, and a shimmer for status lines.React + FigmaReasoningA collapsible “Thought for 12s” disclosure with the agent’s steps.React + FigmaTool callOne function call by the agent: name, status, duration, input and output.React + FigmaApprovalHuman-in-the-loop confirmation before an agent acts: approve, deny, or edit then approve.React + FigmaSources & citationsNumbered inline citations with preview cards, and the list of sources behind an answer.React + FigmaSuggestionsFollow-up prompts as chips and prompt starters as cards, to send or insert.React + FigmaModel selectorA Select for AI models with provider icons, descriptions and capability badges.React + FigmaFeedbackThumbs up and down on an AI reply, with an optional reason form.React + FigmaAI labelMarks AI-generated content and opens an explainability popover, with Revert to AI after edits.React + FigmaContext meterHow much of the model’s context window a conversation uses, and what it cost.React + Figma