@siteplane

Provider-free baseline styles and utilities.

The animated copy icon, selection check and reveal eye that CopyButton, Code and Resource List draw. Install copy-button to copy a value.

Action family with variants, sizes, loading behavior, single-line icon labels, and accessible disabled states.

Color editor with saturation, hue, hex and RGB controls.

Single-selection palette of named color swatches.

Base UI-backed text input and accessible field boundary.

Locale-aware inline calendar with single, contiguous range and multiple date selection.

Segmented, locale-aware date entry with optional Calendar action and native form serialization.

Segmented, locale-aware time entry with an optional compact hour and minute selector. Search terms: hours, minutes, form.

Button-triggered, locale-aware single-date picker with Calendar overlay.

Segmented, locale-aware date-range picker with one Calendar action and two native form values.

Combined locale-aware date and time picker with separate disclosures and one native form value. Search terms: calendar.

Composite for related Input and Textarea controls, add-ons, segments, and focus routing.

Polymorphic native label for standalone control association.

React Aria single-selection list with check or row-fill appearance, keyboard navigation and rich options.

Base UI form root for validation, submission, reset, and server errors.

Base UI fieldset and legend primitives for semantic control groups, with a description the fieldset names in aria-describedby.

Menu button whose bars morph into a close icon. Search terms: actions.

Layered surface with headers, panels, descriptions and footers.

Composition for visually joined controls, text segments, and separators.

Base UI-backed modal task boundary.

Searchable single- and multi-selection control with animated chips, grouped results and form integration.

React Aria locale boundary for localized components.

Image and fallback avatar compound component.

Show several people as a row of overlapping avatars with an optional overflow count. Search terms: avatar stack, facepile, members.

Polymorphic badge with semantic variants and responsive sizes.

Structured application surface for related content and actions.

Persistent feedback with semantic tone, optional actions and an optional close control, inline, as a page banner or as a card band. Search terms: notice.

Empty application-state explanation with media and actions.

Decorative loading placeholder with consumer-owned geometry.

Indeterminate loading status with seven visual variants and reduced-motion behavior.

Ordered workflow progress with read-only and native button items.

Inline and block code with optional reveal and clipboard actions.

Keyboard input notation for keys and grouped shortcuts.

Base UI separator with horizontal and vertical orientation.

Native determinate or indeterminate task progress.

Show a measurement within a known range, such as storage used, with an optional status tone.

Base UI-backed multi-line text control.

Base UI-backed Boolean form choice.

Base UI-backed related multi-selection group.

Base UI-backed single-selection form group.

Base UI-backed on/off preference control.

Base UI-backed pressed-state action.

Base UI-backed single or multiple pressed selection.

Base UI-backed numeric entry and stepping.

Segmented fixed-length input for one-time passwords, verification codes and recovery codes. Search terms: joined.

Scalar, range, discrete-label and form slider.

Modal confirmation dialog for consequential actions.

Swipe-aware modal panel anchored to a viewport edge.

Dialog-backed edge flyout for forms and save/cancel workflows.

Anchored non-modal surface for contextual content.

Short contextual label for hoverable or focusable controls.

Anchored hover and focus preview for linked content.

Keyboard-navigable action and selection menu.

Pointer and keyboard context menu sharing Menu presentation.

Single or multiple expandable disclosure sections.

Compact disclosure for a single section of content.

Keyboard-navigable single-selection content panels.

Keyboard-navigable group of application controls.

Transient status messages managed through a scoped provider.

Bounded overflow region with native overlay scrollbars, optional edge fades and gutter handling.

Application navigation sidebar with desktop collapse and a mobile sheet.

The Menu under DropdownMenu-prefixed part names.

Single- and multiple-selection popup with grouped, polymorphic and form-integrated controls.

Text input with suggestions and no selection state.

Ordered event history with semantic and shaped markers.

React Aria table with composable rows and cells plus optional sorting, row or checkbox selection, captions and footers.

React Aria tag collection with controlled or uncontrolled selection, accessible removal and focus recovery. Search terms: tags, labels.

Searchable keyboard-first action collection.

Navigation between the pages of a long list or table, built from Button links.

Semantic hierarchy trail with native navigation links.

Responsive application frame with a sidebar, a header and scrolling content. Search terms: sticky header.

Responsive search, filter summary and action arrangement, with view tabs that open into a search field.

Right-side drawer for the details of a record, with an optional edit form.

Reduced entity list with explicit indicator, content and meta slots.

Sectioned settings surface with passive items and consumer-provided controls, tags and supporting content. Search terms: preferences, rows.

Show the details of one record as label and value rows, side by side or stacked. Search terms: description list, detail list, key value, properties, dl.

Cut text after one line or a number of lines with an ellipsis, and show the full text in a tooltip. Search terms: line clamp, line-clamp, text overflow, clamp,…

Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement. Search terms: copy to clipboar…

Fill sweep, passing fill, running arrow and expanding button family. Search terms: actions, arrow button, carousel arrows, hover fill, entrance.

Animated sun and moon toggles that switch between light and dark mode. Search terms: actions.

Show how a total divides into shares as a donut or pie chart. Search terms: ring, distribution.

Show a file’s type as a document icon with its extension. Search terms: file icon, attachment, pdf.

Open site sections from a row of links with dropdown panels. Search terms: navbar, mega menu.

Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Search terms: presence, animate presence, trans…

Shared scales, curves, interaction, tooltip, legend and axes behind the Siteplane UI charts. Search terms: chart core, axis, d3, data visualization.

Show how one or several measures change over time or across ordered categories. Search terms: trend, time series, graph, analytics.

Show how one or several measures change over time as filled areas, overlaid or stacked. Search terms: trend, time series, graph, analytics.

Compare values across categories as columns or horizontal bars, side by side or stacked. Search terms: grouped, comparison, graph, analytics.

Show the trend of one or several measures in a small chart without axes. Search terms: spark chart, spark line, spark area, mini chart, inline chart, metric.

Rank labeled values with a bar for each, relative to the largest. Search terms: ranking, top list, leaderboard, horizontal bars, chart, analytics.

Expand or collapse related content sections. Frequently asked questions — usage example.

Expand or collapse related content sections. Settings sections with multiple open panels — usage example.

Expand or collapse related content sections. Accordion with a disabled item — usage example.

Expand or collapse related content sections. Accordion controlled by a button — usage example.

Present an inline message with a title and optional actions. Maintenance notice with icon — usage example.

Present an inline message with a title and optional actions. Alert variants — usage example.

Present an inline message with a title and optional actions. Alert with actions — usage example.

Present an inline message with a title and optional actions. Page banners with the action at the end — usage example.

Present an inline message with a title and optional actions. Page banners with the link in the text — usage example.

Present an inline message with a title and optional actions. Band in a card — usage example.

Ask for a deliberate decision before continuing. Delete project confirmation — usage example.

Ask for a deliberate decision before continuing. Delete account — usage example.

Ask for a deliberate decision before continuing. Discard unsaved comment confirmation — usage example.

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Fill sweep b…

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Fill sweep v…

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Fill that pa…

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Arrow on a t…

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Previous and…

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Accent — usa…

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Cards that f…

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Grow, widen …

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Expanding ar…

Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Sizes, disab…

Show how one or several measures change over time as filled areas, overlaid or stacked. Page views by month — usage example.

Show how one or several measures change over time as filled areas, overlaid or stacked. Visitors by source, stacked — usage example.

Show how one or several measures change over time as filled areas, overlaid or stacked. The gradient and the solid fill — usage example.

Show how one or several measures change over time as filled areas, overlaid or stacked. Build minutes by hour on a monotone curve — usage example.

Show how one or several measures change over time as filled areas, overlaid or stacked. Customers gained and lost, stacked around 0 — usage example.

Show how one or several measures change over time as filled areas, overlaid or stacked. An area chart that fills its card beside a taller card — usage example.

Show how one or several measures change over time as filled areas, overlaid or stacked. Stacked visits that glide when the period changes — usage example.

Suggest completions while allowing free text. Project search with suggestions — usage example.

Suggest completions while allowing free text. Controlled value and clear — usage example.

Suggest completions while allowing free text. Tag suggestions in groups — usage example.

Suggest completions while allowing free text. Skill suggestions with a result limit — usage example.

Suggest completions while allowing free text. Autocomplete variants and disabled state — usage example.

Suggest completions while allowing free text. Autocomplete sizes — usage example.

Suggest completions while allowing free text. Job title field with suggestions — usage example.

Represent a person with an image or a text fallback. Profile photo with initials fallback — usage example.

Represent a person with an image or a text fallback. Guest avatar with user icon — usage example.

Represent a person with an image or a text fallback. Avatar sizes and shapes — usage example.

Represent a person with an image or a text fallback. Project members with overflow count — usage example.

Represent a person with an image or a text fallback. Avatars with presence status — usage example.

Show several people as a row of overlapping avatars with an optional overflow count. Project members with overflow count — usage example.

Show several people as a row of overlapping avatars with an optional overflow count. Avatar groups in four sizes — usage example.

Show several people as a row of overlapping avatars with an optional overflow count. A small and a large overflow count — usage example.

Show several people as a row of overlapping avatars with an optional overflow count. Reviewers of a design review on a card — usage example.

Label a status, category, or count. Draft status badge — usage example.

Label a status, category, or count. Badge variants — usage example.

Label a status, category, or count. Secondary badges on a white and a tinted row — usage example.

Label a status, category, or count. A New label and an unread count — usage example.

Label a status, category, or count. Badge sizes — usage example.

Label a status, category, or count. Default and pill badges — usage example.

Label a status, category, or count. Status badges with icons — usage example.

Label a status, category, or count. Invoice status badges — usage example.

Label a status, category, or count. Site statuses in a list and in a sentence — usage example.

Label a status, category, or count. Badge rendered as a link — usage example.

Label a status, category, or count. Badge with light — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. Signups by month — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. Support tickets opened and resolved by month — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. Customers gained and lost by month — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. Active users by feature — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. Net cash flow by month — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. API requests by region and month — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. Orders by month with the total above each stack — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. Visitors this week with today still running — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. A chart that fills the room its card leaves — usage example.

Compare values across categories as columns or horizontal bars, side by side or stacked. Orders over the last 6 or 12 months — usage example.

Rank labeled values with a bar for each, relative to the largest. Top pages by visitors — usage example.

Rank labeled values with a bar for each, relative to the largest. Revenue by country in US dollars — usage example.

Rank labeled values with a bar for each, relative to the largest. Traffic sources with icons — usage example.

Rank labeled values with a bar for each, relative to the largest. Top pages with their paths — usage example.

Rank labeled values with a bar for each, relative to the largest. Traffic sources under a heading row — usage example.

Rank labeled values with a bar for each, relative to the largest. Top pages that glide when the period changes — usage example.

Rank labeled values with a bar for each, relative to the largest. Visitors by device, right to left — usage example.

Show the current location within a navigation hierarchy. Breadcrumb with a menu for hidden levels — usage example.

Show the current location within a navigation hierarchy. Custom separator — usage example.

Show the current location within a navigation hierarchy. Collapsed path — usage example.

Trigger an action with a text label, an icon, or both. Default button — usage example.

Trigger an action with a text label, an icon, or both. All button variants — usage example.

Trigger an action with a text label, an icon, or both. Glass buttons — usage example.

Trigger an action with a text label, an icon, or both. Button and icon button sizes — usage example.

Trigger an action with a text label, an icon, or both. Pill buttons — usage example.

Trigger an action with a text label, an icon, or both. Leading, trailing and icon-only buttons — usage example.

Trigger an action with a text label, an icon, or both. Disabled and loading buttons — usage example.

Trigger an action with a text label, an icon, or both. Loading button — usage example.

Trigger an action with a text label, an icon, or both. Button width and alignment — usage example.

Trigger an action with a text label, an icon, or both. Button rendered as a link — usage example.

Trigger an action with a text label, an icon, or both. Links in a sentence and on their own — usage example.

Choose a date, several dates or a date range. Appointment date calendar — usage example.

Choose a date, several dates or a date range. Date range — usage example.

Choose a date, several dates or a date range. Date range with shortcuts — usage example.

Choose a date, several dates or a date range. Multiple dates — usage example.

Choose a date, several dates or a date range. Booked dates unavailable — usage example.

Choose a date, several dates or a date range. Due date with a Today button — usage example.

Choose a date, several dates or a date range. German calendar — usage example.

Group related content and actions on a surface. Create project card — usage example.

Group related content and actions on a surface. Recent invoices with a view-all link — usage example.

Group related content and actions on a surface. Cards with an avatar, an icon and title context — usage example.

Group related content and actions on a surface. Payouts with a divided header and footer — usage example.

Group related content and actions on a surface. Card with a 24 px inset — usage example.

Group related content and actions on a surface. Framed card with a header action — usage example.

Group related content and actions on a surface. Raised, header and subtle cards — usage example.

Group related content and actions on a surface. Inset files in a card and elevated plans — usage example.

Group related content and actions on a surface. Message and error cards — usage example.

Group related content and actions on a surface. Glass card — usage example.

Group related content and actions on a surface. A card on the page canvas and on the card color — usage example.

Select or clear an independent option. Terms checkbox — usage example.

Select or clear an independent option. Checkbox with description — usage example.

Select or clear an independent option. Disabled and invalid checkboxes — usage example.

Select or clear an independent option. Checkbox card — usage example.

Select or clear an independent option. Controlled checkbox — usage example.

Select or clear an independent option. Checkbox in a form — usage example.

Select or clear an independent option. Checkbox sizes — usage example.

Choose any number of related options. Notification channel checkboxes — usage example.

Choose any number of related options. Controlled column visibility — usage example.

Choose any number of related options. Parent checkbox for project permissions — usage example.

Choose any number of related options. Checkbox group in a form — usage example.

Choose any number of related options. Add-on cards — usage example.

Choose any number of related options. Checkbox group sizes — usage example.

Display inline code or a copyable block of text. Inline code in a sentence — usage example.

Display inline code or a copyable block of text. Copyable API request — usage example.

Display inline code or a copyable block of text. Masked API key — usage example.

Show or hide a single section of content. Recovery keys disclosure — usage example.

Show or hide a single section of content. Order details with an icon trigger — usage example.

Show or hide a single section of content. File tree with nested folders — usage example.

Choose a hex color with a swatch, hue slider, and channel fields. Brand color field — usage example.

Choose a hex color with a swatch, hue slider, and channel fields. Controlled color — usage example.

Choose a hex color with a swatch, hue slider, and channel fields. Color picker sizes and swatch-only trigger — usage example.

Choose a hex color with a swatch, hue slider, and channel fields. Palette that ends in a custom color — usage example.

Choose a hex color with a swatch, hue slider, and channel fields. Color picker in a form — usage example.

Select a named color or image from an application-owned palette. Label color swatches — usage example.

Select a named color or image from an application-owned palette. Controlled selection — usage example.

Select a named color or image from an application-owned palette. Label color swatches with a selection ring — usage example.

Select a named color or image from an application-owned palette. Reviewer swatches with photos — usage example.

Select a named color or image from an application-owned palette. Read-only and disabled swatches — usage example.

Select a named color or image from an application-owned palette. Required swatch selection in a form — usage example.

Search and choose from known options. Assignee picker — usage example.

Search and choose from known options. Controlled value and clear — usage example.

Search and choose from known options. Label picker with chips — usage example.

Search and choose from known options. Timezone combobox with groups — usage example.

Search and choose from known options. Country picker with search — usage example.

Search and choose from known options. Combobox variants and disabled state — usage example.

Search and choose from known options. Combobox sizes — usage example.

Search and choose from known options. Workspace field in a form — usage example.

Find and run actions in an inline list or a dialog. Command palette — usage example.

Find and run actions in an inline list or a dialog. Inline command with groups and shortcuts — usage example.

Show actions for an element on right-click or long press. Context menu with icons and shortcuts — usage example.

Show actions for an element on right-click or long press. Grouped context menu with a submenu — usage example.

Show actions for an element on right-click or long press. View options context menu — usage example.

Show actions for an element on right-click or long press. Context menu with link items — usage example.

Show actions for an element on right-click or long press. Glass context menu — usage example.

Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement. Client portal address with a c…

Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement. Copy link as a quiet text acti…

Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement. Read-only invite link with a c…

Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement. A copy that works and a copy w…

Compose a sidebar, header, and scrolling application content. Inset workspace shell — usage example.

Compose a sidebar, header, and scrolling application content. Push workspace shell — usage example.

Compose a sidebar, header, and scrolling application content. Sticky header — usage example.

Compose a sidebar, header, and scrolling application content. Workspace on top — usage example.