Components

Button, Input, Accordion, Dialog, and Drawer ship as complete three-platform items. We do not list stubs that cannot be installed.

• Button

  A pressable control that performs an action. Native on every platform; shared intent, tokens, and naming.

  StableStable. Available on React, SwiftUI, Compose.

• Button Group

  A container that groups related buttons together with consistent styling.

  StableStable. Available on React.

• Icon Button

  Square icon control — same tokens as Button, label required for a11y.

  ExperimentalExperimental. Available on React.

• Toggle

  A two-state button that can be either on or off.

  StableStable. Available on React.

• Toggle Group

  A set of two-state buttons that can be toggled on or off.

  StableStable. Available on React.

• Calendar

  Month grid calendar.

  ExperimentalExperimental. Available on React.

• Checkbox

  A control that allows the user to toggle between checked and not checked.

  StableStable. Available on React.

• Checkout Form

  Checkout composition.

  ExperimentalExperimental. Available on React.

• Combobox

  Searchable select — native feel, hairline list.

  ExperimentalExperimental. Available on React.

• Date Input

  Native date field with Felicity field chrome.

  ExperimentalExperimental. Available on React.

• Date Picker

  Calendar popover for choosing a date.

  ExperimentalExperimental. Available on React.

• Date Range Picker

  Start and end date selection.

  ExperimentalExperimental. Available on React.

• Field

  Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

  StableStable. Available on React.

• File Input

  Native file picker with dashed paper drop affordance.

  ExperimentalExperimental. Available on React.

• File Uploader

  Multi-file upload surface.

  ExperimentalExperimental. Available on React.

• Form

  Form layout container.

  ExperimentalExperimental. Available on React.

• Form Field

  Label + control + hint chrome shared by form inputs.

  ExperimentalExperimental. Available on React.

• Input

  A text field for short values. Native on every platform; shared intent, tokens, and naming.

  StableStable. Available on React, SwiftUI, Compose.

• Input Group

  Add addons, buttons, and helper content to inputs.

  StableStable. Available on React.

• Input OTP

  One-time password slots.

  ExperimentalExperimental. Available on React.

• Label

  Accessible control label.

  ExperimentalExperimental. Available on React.

• Login Form

  Sign-in composition.

  ExperimentalExperimental. Available on React.

• Multi Select

  Multiple value selection with chips.

  ExperimentalExperimental. Available on React.

• Native Select

  A styled native HTML select element with consistent design system integration.

  StableStable. Available on React.

• Number Input

  Numeric field with Felicity chrome.

  ExperimentalExperimental. Available on React.

• OTP / PIN Input

  One-time code slots — ruled boxes, copper focus.

  ExperimentalExperimental. Available on React.

• Password Input

  Password field with show/hide toggle.

  ExperimentalExperimental. Available on React.

• Phone Input

  Telephone field with Felicity chrome.

  ExperimentalExperimental. Available on React.

• Quantity Selector

  Stepped quantity with outline chrome.

  ExperimentalExperimental. Available on React.

• Questionnaire

  Multi-step question flow.

  ExperimentalExperimental. Available on React.

• Radio

  Single choice within a native radio group. Prefer installing radio-group.

  StableStable. Available on React.

• Radio Group

  A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

  StableStable. Available on React.

• Rating

  Star rating — copper fill when selected.

  ExperimentalExperimental. Available on React.

• Rich Text Editor

  Lightweight editing chrome.

  ExperimentalExperimental. Available on React.

• Search Field

  Search input with leading glyph and quiet clear affordance.

  ExperimentalExperimental. Available on React.

• Select

  Displays a list of options for the user to pick from—triggered by a button.

  StableStable. Available on React.

• Signup Form

  Registration composition.

  ExperimentalExperimental. Available on React.

• Slider

  An input where the user selects a value from within a given range.

  StableStable. Available on React.

• Switch

  A control that allows the user to toggle between checked and not checked.

  StableStable. Available on React.

• Textarea

  Displays a form textarea or a component that looks like a textarea.

  StableStable. Available on React.

• Time Input

  Native time field with Felicity field chrome.

  ExperimentalExperimental. Available on React.

• Time Picker

  Time selection with quiet list chrome.

  ExperimentalExperimental. Available on React.

• Accordion

  A stacked set of headings that each reveal a section. Native disclosure on every platform; shared intent, tokens, and naming.

  StableStable. Available on React, SwiftUI, Compose.

• Accordion Item

  Disclosure row for accordion compositions.

  ExperimentalExperimental. Available on React.

• Activity Feed

  Chronological activity list.

  ExperimentalExperimental. Available on React.

• Aspect Ratio

  Content within a fixed ratio.

  ExperimentalExperimental. Available on React.

• Attachment

  File or image attachment row.

  ExperimentalExperimental. Available on React.

• Avatar

  Identity mark — initials or image on a paper disc with hairline ring.

  ExperimentalExperimental. Available on React.

• Avatar Group

  Overlapping avatars with hairline rings.

  ExperimentalExperimental. Available on React.

• Badge

  Displays a badge or a component that looks like a badge.

  StableStable. Available on React.

• Bubble

  Conversational message surface.

  ExperimentalExperimental. Available on React.

• Card

  Paper surface with hairline border — use sparingly.

  ExperimentalExperimental. Available on React.

• Card Grid

  Grid of cards.

  ExperimentalExperimental. Available on React.

• Carousel

  Paged content with quiet controls.

  ExperimentalExperimental. Available on React.

• Chart

  Chart container with Felicity tokens.

  ExperimentalExperimental. Available on React.

• Chat Panel

  Conversation panel.

  ExperimentalExperimental. Available on React.

• Collapsible

  Expand / collapse panel.

  ExperimentalExperimental. Available on React.

• Comment

  Comment body with author meta.

  ExperimentalExperimental. Available on React.

• Comment Thread

  Threaded comments.

  ExperimentalExperimental. Available on React.

• Dashboard Widget

  Dashboard metric panel.

  ExperimentalExperimental. Available on React.

• Data Table

  Ruled data table shell.

  ExperimentalExperimental. Available on React.

• Divider

  Hairline rule — horizontal or vertical separation without card chrome.

  ExperimentalExperimental. Available on React.

• File Item

  File row with meta and actions.

  ExperimentalExperimental. Available on React.

• Filter Panel

  Faceted filter column.

  ExperimentalExperimental. Available on React.

• Footer

  Page footer with muted links.

  ExperimentalExperimental. Available on React.

• Grid

  Responsive content grid.

  ExperimentalExperimental. Available on React.

• Header

  Top application chrome — wordmark, nav, one primary action.

  ExperimentalExperimental. Available on React.

• Item

  Media, title, description, and actions.

  ExperimentalExperimental. Available on React.

• Kbd

  Keyboard key glyph.

  ExperimentalExperimental. Available on React.

• List

  Vertical ruled list container.

  ExperimentalExperimental. Available on React.

• List Item

  Single row in a ruled list.

  ExperimentalExperimental. Available on React.

• Marker

  Conversation status or separator.

  ExperimentalExperimental. Available on React.

• Menu Item

  Action row for menus.

  ExperimentalExperimental. Available on React.

• Message

  Conversation message row.

  ExperimentalExperimental. Available on React.

• Message Scroller

  Chat transcript scroll container.

  ExperimentalExperimental. Available on React.

• Mobile Navigation

  Compact bottom or drawer navigation for small screens.

  ExperimentalExperimental. Available on React.

• Navbar

  Horizontal navigation bar.

  ExperimentalExperimental. Available on React.

• Navigation Item

  Sidebar or nav link row.

  ExperimentalExperimental. Available on React.

• Notification Item

  Notification row.

  ExperimentalExperimental. Available on React.

• Onboarding Panel

  First-run guidance surface.

  ExperimentalExperimental. Available on React.

• Price Display

  Currency figure with muted period label.

  ExperimentalExperimental. Available on React.

• Pricing Card

  Plan pricing surface.

  ExperimentalExperimental. Available on React.

• Product Card

  Product summary surface.

  ExperimentalExperimental. Available on React.

• Profile Card

  Identity summary surface.

  ExperimentalExperimental. Available on React.

• Resizable

  Resizable panel group.

  ExperimentalExperimental. Available on React.

• Scroll Area

  Scroll region with Felicity chrome.

  ExperimentalExperimental. Available on React.

• Separator

  Visual or semantic divider.

  ExperimentalExperimental. Available on React.

• Sidebar

  Vertical navigation rail with ruled sections.

  ExperimentalExperimental. Available on React.

• Stat / KPI

  Metric figure with muted label.

  ExperimentalExperimental. Available on React.

• Table

  Ruled data table with hairline row separators.

  ExperimentalExperimental. Available on React.

• Tag Chip

  Compact label chip — uppercase tracking, optional dismiss.

  ExperimentalExperimental. Available on React.

• Timeline

  Vertical event timeline.

  ExperimentalExperimental. Available on React.

• Typography

  Text style examples.

  ExperimentalExperimental. Available on React.

• Alert Dialog

  Interruptive confirm dialog.

  ExperimentalExperimental. Available on React.

• Bottom Sheet

  Edge sheet rising from the bottom.

  ExperimentalExperimental. Available on React.

• Command

  Command menu for search and actions.

  ExperimentalExperimental. Available on React.

• Command Palette

  Keyboard-first command search surface.

  ExperimentalExperimental. Available on React.

• Confirmation Dialog

  Confirm / cancel dialog pattern.

  ExperimentalExperimental. Available on React.

• Context Menu

  Menu triggered by right click.

  ExperimentalExperimental. Available on React.

• Dialog

  A modal confirmation surface. Native presentation on every platform; shared intent, tokens, and naming.

  StableStable. Available on React, SwiftUI, Compose.

• Drawer

  An edge-attached panel for longer content. Native presentation on every platform; shared intent, tokens, and naming.

  StableStable. Available on React, SwiftUI, Compose.

• Dropdown Menu

  Action menu from a trigger.

  ExperimentalExperimental. Available on React.

• Hover Card

  Preview content on hover.

  ExperimentalExperimental. Available on React.

• Notification Center

  Notification inbox panel.

  ExperimentalExperimental. Available on React.

• Popover

  Anchored floating content — flat, no heavy shadow.

  ExperimentalExperimental. Available on React.

• Search Panel

  Expanded search results surface.

  ExperimentalExperimental. Available on React.

• Sheet

  Edge sheet complementary to main content.

  ExperimentalExperimental. Available on React.

• Account Menu

  User account actions menu.

  ExperimentalExperimental. Available on React.

• Breadcrumb

  Hierarchy of resource links.

  ExperimentalExperimental. Available on React.

• Breadcrumbs

  Trail of links with hairline separators.

  ExperimentalExperimental. Available on React.

• Dropdown

  Anchored action menu.

  ExperimentalExperimental. Available on React.

• Link

  Inline text link — copper underline on focus, ink at rest.

  ExperimentalExperimental. Available on React.

• Mega Menu

  Wide navigation panel.

  ExperimentalExperimental. Available on React.

• Menu

  Command menu with native focus and ruled dropdown surface.

  ExperimentalExperimental. Available on React.

• Menubar

  Persistent desktop-style menu bar.

  ExperimentalExperimental. Available on React.

• Navigation Menu

  Site navigation collection.

  ExperimentalExperimental. Available on React.

• Pagination

  Page controls — quiet numbers, copper current.

  ExperimentalExperimental. Available on React.

• Segmented Control

  Exclusive options as underline segments.

  ExperimentalExperimental. Available on React.

• Sort Controls

  Sort field controls.

  ExperimentalExperimental. Available on React.

• Step Indicator

  Horizontal steps with copper progress.

  ExperimentalExperimental. Available on React.

• Stepper

  Multi-step flow chrome.

  ExperimentalExperimental. Available on React.

• Tabs

  Underline tablist with ruled baseline — not pill tabs.

  ExperimentalExperimental. Available on React.

• Alert

  Inline status banner with tone border.

  ExperimentalExperimental. Available on React.

• Empty

  Empty state surface.

  ExperimentalExperimental. Available on React.

• Empty State

  Quiet empty-canvas message.

  ExperimentalExperimental. Available on React.

• Error State

  Error surface with clear recovery path.

  ExperimentalExperimental. Available on React.

• Progress

  Linear progress — ruled track with copper fill.

  ExperimentalExperimental. Available on React.

• Skeleton

  Loading placeholder — muted pulse on paper, not shimmer chrome.

  ExperimentalExperimental. Available on React.

• Spinner

  Quiet loading indicator — copper arc on a muted ring.

  ExperimentalExperimental. Available on React.

• Status Indicator

  Dot + label status — copper for live, muted for idle.

  ExperimentalExperimental. Available on React.

• Toast

  Transient notification — paper surface, hairline border.

  ExperimentalExperimental. Available on React.

• Tooltip

  Contextual hint using native popover when available.

  ExperimentalExperimental. Available on React.