---
name: "@siteplane"
slug: "siteplane"
description: "Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source."
category: "Animated components"
tags: ["accessibility", "ai", "animation", "auth", "buttons", "cards", "charts", "dashboard", "forms", "icons", "loaders", "media", "navigation", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: null
author: "LukasvanUden"
website: "https://ui.siteplane.io"
github: "https://github.com/LukasvanUden/siteplane-ui"
registry: "https://ui.siteplane.io/registry/registry.json"
pro: true
pro_url: "https://ui.siteplane.io/pricing"
github_stars: 0
component_count: 250
generated_at: "2026-10-17T06:30:14.294Z"
---

# @siteplane

Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.

## Links

- Website: https://ui.siteplane.io
- GitHub: https://github.com/LukasvanUden/siteplane-ui
- Registry JSON: https://ui.siteplane.io/registry/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/siteplane
- This file: https://sh4dcn.vercel.app/md/siteplane.md
- Pro / pricing: https://ui.siteplane.io/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.siteplane.io/registry/registry.json
pnpm dlx shadcn@latest add https://ui.siteplane.io/registry/registry.json
bunx shadcn@latest add https://ui.siteplane.io/registry/registry.json
# clone the source repo
git clone https://github.com/LukasvanUden/siteplane-ui.git
# fetch the raw registry index
curl -s https://ui.siteplane.io/registry/registry.json
```

## Components (250)

| name | type | description | install |
| --- | --- | --- | --- |
| base | registry:base | Provider-free baseline styles and utilities. | `npx shadcn@latest add https://ui.siteplane.io/registry/base.json` |
| action-icons | registry:ui | The animated copy icon, selection check and reveal eye that CopyButton, Code and Resource List draw. Install copy-button to copy a value. | `npx shadcn@latest add https://ui.siteplane.io/registry/action-icons.json` |
| button | registry:ui | Action family with variants, sizes, loading behavior, single-line icon labels, and accessible disabled states. | `npx shadcn@latest add https://ui.siteplane.io/registry/button.json` |
| color-picker | registry:ui | Color editor with saturation, hue, hex and RGB controls. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-picker.json` |
| color-swatch-picker | registry:ui | Single-selection palette of named color swatches. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-swatch-picker.json` |
| input | registry:ui | Base UI-backed text input and accessible field boundary. | `npx shadcn@latest add https://ui.siteplane.io/registry/input.json` |
| calendar | registry:ui | Locale-aware inline calendar with single, contiguous range and multiple date selection. | `npx shadcn@latest add https://ui.siteplane.io/registry/calendar.json` |
| date-field | registry:ui | Segmented, locale-aware date entry with optional Calendar action and native form serialization. | `npx shadcn@latest add https://ui.siteplane.io/registry/date-field.json` |
| time-field | registry:ui | Segmented, locale-aware time entry with an optional compact hour and minute selector. Search terms: hours, minutes, form. | `npx shadcn@latest add https://ui.siteplane.io/registry/time-field.json` |
| date-picker | registry:ui | Button-triggered, locale-aware single-date picker with Calendar overlay. | `npx shadcn@latest add https://ui.siteplane.io/registry/date-picker.json` |
| date-range-picker | registry:ui | Segmented, locale-aware date-range picker with one Calendar action and two native form values. | `npx shadcn@latest add https://ui.siteplane.io/registry/date-range-picker.json` |
| date-time-picker | registry:ui | Combined locale-aware date and time picker with separate disclosures and one native form value. Search terms: calendar. | `npx shadcn@latest add https://ui.siteplane.io/registry/date-time-picker.json` |
| input-group | registry:ui | Composite for related Input and Textarea controls, add-ons, segments, and focus routing. | `npx shadcn@latest add https://ui.siteplane.io/registry/input-group.json` |
| label | registry:ui | Polymorphic native label for standalone control association. | `npx shadcn@latest add https://ui.siteplane.io/registry/label.json` |
| list-box | registry:ui | React Aria single-selection list with check or row-fill appearance, keyboard navigation and rich options. | `npx shadcn@latest add https://ui.siteplane.io/registry/list-box.json` |
| form | registry:ui | Base UI form root for validation, submission, reset, and server errors. | `npx shadcn@latest add https://ui.siteplane.io/registry/form.json` |
| fieldset | registry:ui | Base UI fieldset and legend primitives for semantic control groups, with a description the fieldset names in aria-describedby. | `npx shadcn@latest add https://ui.siteplane.io/registry/fieldset.json` |
| icon-morphs | registry:ui | Menu button whose bars morph into a close icon. Search terms: actions. | `npx shadcn@latest add https://ui.siteplane.io/registry/icon-morphs.json` |
| frame | registry:ui | Layered surface with headers, panels, descriptions and footers. | `npx shadcn@latest add https://ui.siteplane.io/registry/frame.json` |
| group | registry:ui | Composition for visually joined controls, text segments, and separators. | `npx shadcn@latest add https://ui.siteplane.io/registry/group.json` |
| dialog | registry:ui | Base UI-backed modal task boundary. | `npx shadcn@latest add https://ui.siteplane.io/registry/dialog.json` |
| combobox | registry:ui | Searchable single- and multi-selection control with animated chips, grouped results and form integration. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox.json` |
| locale | registry:lib | React Aria locale boundary for localized components. | `npx shadcn@latest add https://ui.siteplane.io/registry/locale.json` |
| avatar | registry:ui | Image and fallback avatar compound component. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar.json` |
| avatar-group | registry:ui | Show several people as a row of overlapping avatars with an optional overflow count. Search terms: avatar stack, facepile, members. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-group.json` |
| badge | registry:ui | Polymorphic badge with semantic variants and responsive sizes. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge.json` |
| card | registry:ui | Structured application surface for related content and actions. | `npx shadcn@latest add https://ui.siteplane.io/registry/card.json` |
| alert | registry:ui | 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. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert.json` |
| empty-state | registry:ui | Empty application-state explanation with media and actions. | `npx shadcn@latest add https://ui.siteplane.io/registry/empty-state.json` |
| skeleton | registry:ui | Decorative loading placeholder with consumer-owned geometry. | `npx shadcn@latest add https://ui.siteplane.io/registry/skeleton.json` |
| spinner | registry:ui | Indeterminate loading status with seven visual variants and reduced-motion behavior. | `npx shadcn@latest add https://ui.siteplane.io/registry/spinner.json` |
| stepper | registry:ui | Ordered workflow progress with read-only and native button items. | `npx shadcn@latest add https://ui.siteplane.io/registry/stepper.json` |
| code | registry:ui | Inline and block code with optional reveal and clipboard actions. | `npx shadcn@latest add https://ui.siteplane.io/registry/code.json` |
| kbd | registry:ui | Keyboard input notation for keys and grouped shortcuts. | `npx shadcn@latest add https://ui.siteplane.io/registry/kbd.json` |
| separator | registry:ui | Base UI separator with horizontal and vertical orientation. | `npx shadcn@latest add https://ui.siteplane.io/registry/separator.json` |
| progress | registry:ui | Native determinate or indeterminate task progress. | `npx shadcn@latest add https://ui.siteplane.io/registry/progress.json` |
| meter | registry:ui | Show a measurement within a known range, such as storage used, with an optional status tone. | `npx shadcn@latest add https://ui.siteplane.io/registry/meter.json` |
| textarea | registry:ui | Base UI-backed multi-line text control. | `npx shadcn@latest add https://ui.siteplane.io/registry/textarea.json` |
| checkbox | registry:ui | Base UI-backed Boolean form choice. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox.json` |
| checkbox-group | registry:ui | Base UI-backed related multi-selection group. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-group.json` |
| radio-group | registry:ui | Base UI-backed single-selection form group. | `npx shadcn@latest add https://ui.siteplane.io/registry/radio-group.json` |
| switch | registry:ui | Base UI-backed on/off preference control. | `npx shadcn@latest add https://ui.siteplane.io/registry/switch.json` |
| toggle | registry:ui | Base UI-backed pressed-state action. | `npx shadcn@latest add https://ui.siteplane.io/registry/toggle.json` |
| toggle-group | registry:ui | Base UI-backed single or multiple pressed selection. | `npx shadcn@latest add https://ui.siteplane.io/registry/toggle-group.json` |
| number-field | registry:ui | Base UI-backed numeric entry and stepping. | `npx shadcn@latest add https://ui.siteplane.io/registry/number-field.json` |
| otp-field | registry:ui | Segmented fixed-length input for one-time passwords, verification codes and recovery codes. Search terms: joined. | `npx shadcn@latest add https://ui.siteplane.io/registry/otp-field.json` |
| slider | registry:ui | Scalar, range, discrete-label and form slider. | `npx shadcn@latest add https://ui.siteplane.io/registry/slider.json` |
| alert-dialog | registry:ui | Modal confirmation dialog for consequential actions. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-dialog.json` |
| drawer | registry:ui | Swipe-aware modal panel anchored to a viewport edge. | `npx shadcn@latest add https://ui.siteplane.io/registry/drawer.json` |
| sheet | registry:ui | Dialog-backed edge flyout for forms and save/cancel workflows. | `npx shadcn@latest add https://ui.siteplane.io/registry/sheet.json` |
| popover | registry:ui | Anchored non-modal surface for contextual content. | `npx shadcn@latest add https://ui.siteplane.io/registry/popover.json` |
| tooltip | registry:ui | Short contextual label for hoverable or focusable controls. | `npx shadcn@latest add https://ui.siteplane.io/registry/tooltip.json` |
| preview-card | registry:ui | Anchored hover and focus preview for linked content. | `npx shadcn@latest add https://ui.siteplane.io/registry/preview-card.json` |
| menu | registry:ui | Keyboard-navigable action and selection menu. | `npx shadcn@latest add https://ui.siteplane.io/registry/menu.json` |
| context-menu | registry:ui | Pointer and keyboard context menu sharing Menu presentation. | `npx shadcn@latest add https://ui.siteplane.io/registry/context-menu.json` |
| accordion | registry:ui | Single or multiple expandable disclosure sections. | `npx shadcn@latest add https://ui.siteplane.io/registry/accordion.json` |
| collapsible | registry:ui | Compact disclosure for a single section of content. | `npx shadcn@latest add https://ui.siteplane.io/registry/collapsible.json` |
| tabs | registry:ui | Keyboard-navigable single-selection content panels. | `npx shadcn@latest add https://ui.siteplane.io/registry/tabs.json` |
| toolbar | registry:ui | Keyboard-navigable group of application controls. | `npx shadcn@latest add https://ui.siteplane.io/registry/toolbar.json` |
| toast | registry:ui | Transient status messages managed through a scoped provider. | `npx shadcn@latest add https://ui.siteplane.io/registry/toast.json` |
| scroll-area | registry:ui | Bounded overflow region with native overlay scrollbars, optional edge fades and gutter handling. | `npx shadcn@latest add https://ui.siteplane.io/registry/scroll-area.json` |
| sidebar | registry:ui | Application navigation sidebar with desktop collapse and a mobile sheet. | `npx shadcn@latest add https://ui.siteplane.io/registry/sidebar.json` |
| dropdown-menu | registry:ui | The Menu under DropdownMenu-prefixed part names. | `npx shadcn@latest add https://ui.siteplane.io/registry/dropdown-menu.json` |
| select | registry:ui | Single- and multiple-selection popup with grouped, polymorphic and form-integrated controls. | `npx shadcn@latest add https://ui.siteplane.io/registry/select.json` |
| autocomplete | registry:ui | Text input with suggestions and no selection state. | `npx shadcn@latest add https://ui.siteplane.io/registry/autocomplete.json` |
| timeline | registry:ui | Ordered event history with semantic and shaped markers. | `npx shadcn@latest add https://ui.siteplane.io/registry/timeline.json` |
| table | registry:ui | React Aria table with composable rows and cells plus optional sorting, row or checkbox selection, captions and footers. | `npx shadcn@latest add https://ui.siteplane.io/registry/table.json` |
| tag-group | registry:ui | React Aria tag collection with controlled or uncontrolled selection, accessible removal and focus recovery. Search terms: tags, labels. | `npx shadcn@latest add https://ui.siteplane.io/registry/tag-group.json` |
| command | registry:ui | Searchable keyboard-first action collection. | `npx shadcn@latest add https://ui.siteplane.io/registry/command.json` |
| pagination | registry:ui | Navigation between the pages of a long list or table, built from Button links. | `npx shadcn@latest add https://ui.siteplane.io/registry/pagination.json` |
| breadcrumb | registry:ui | Semantic hierarchy trail with native navigation links. | `npx shadcn@latest add https://ui.siteplane.io/registry/breadcrumb.json` |
| dashboard-shell | registry:ui | Responsive application frame with a sidebar, a header and scrolling content. Search terms: sticky header. | `npx shadcn@latest add https://ui.siteplane.io/registry/dashboard-shell.json` |
| filter-bar | registry:ui | Responsive search, filter summary and action arrangement, with view tabs that open into a search field. | `npx shadcn@latest add https://ui.siteplane.io/registry/filter-bar.json` |
| detail-drawer | registry:ui | Right-side drawer for the details of a record, with an optional edit form. | `npx shadcn@latest add https://ui.siteplane.io/registry/detail-drawer.json` |
| resource-list | registry:ui | Reduced entity list with explicit indicator, content and meta slots. | `npx shadcn@latest add https://ui.siteplane.io/registry/resource-list.json` |
| settings-list | registry:ui | Sectioned settings surface with passive items and consumer-provided controls, tags and supporting content. Search terms: preferences, rows. | `npx shadcn@latest add https://ui.siteplane.io/registry/settings-list.json` |
| data-list | registry:ui | 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. | `npx shadcn@latest add https://ui.siteplane.io/registry/data-list.json` |
| truncate | registry:ui | 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,… | `npx shadcn@latest add https://ui.siteplane.io/registry/truncate.json` |
| copy-button | registry:ui | 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… | `npx shadcn@latest add https://ui.siteplane.io/registry/copy-button.json` |
| animated-buttons | registry:ui | Sweep and fixed-layout expanding button family. Search terms: actions. | `npx shadcn@latest add https://ui.siteplane.io/registry/animated-buttons.json` |
| theme-toggles | registry:ui | Animated sun and moon toggles that switch between light and dark mode. Search terms: actions. | `npx shadcn@latest add https://ui.siteplane.io/registry/theme-toggles.json` |
| pie-chart | registry:ui | Show how a total divides into shares as a donut or pie chart. Search terms: ring, distribution. | `npx shadcn@latest add https://ui.siteplane.io/registry/pie-chart.json` |
| file-type-icon | registry:ui | Show a file’s type as a document icon with its extension. Search terms: file icon, attachment, pdf. | `npx shadcn@latest add https://ui.siteplane.io/registry/file-type-icon.json` |
| navigation-menu | registry:ui | Open site sections from a row of links with dropdown panels. Search terms: navbar, mega menu. | `npx shadcn@latest add https://ui.siteplane.io/registry/navigation-menu.json` |
| motion | registry:ui | Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Search terms: presence, animate presence, trans… | `npx shadcn@latest add https://ui.siteplane.io/registry/motion.json` |
| chart | registry:ui | Shared scales, curves, interaction, tooltip, legend and axes behind the Siteplane UI charts. Search terms: chart core, axis, d3, data visualization. | `npx shadcn@latest add https://ui.siteplane.io/registry/chart.json` |
| line-chart | registry:ui | Show how one or several measures change over time or across ordered categories. Search terms: trend, time series, graph, analytics. | `npx shadcn@latest add https://ui.siteplane.io/registry/line-chart.json` |
| area-chart | registry:ui | Show how one or several measures change over time as filled areas, overlaid or stacked. Search terms: trend, time series, graph, analytics. | `npx shadcn@latest add https://ui.siteplane.io/registry/area-chart.json` |
| bar-chart | registry:ui | Compare values across categories as columns or horizontal bars, side by side or stacked. Search terms: grouped, comparison, graph, analytics. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart.json` |
| sparkline | registry:ui | 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. | `npx shadcn@latest add https://ui.siteplane.io/registry/sparkline.json` |
| bar-list | registry:ui | Rank labeled values with a bar for each, relative to the largest. Search terms: ranking, top list, leaderboard, horizontal bars, chart, analytics. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-list.json` |
| accordion-demo | registry:example | Expand or collapse related content sections. Frequently asked questions — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/accordion-demo.json` |
| accordion-multiple-example | registry:example | Expand or collapse related content sections. Settings sections with multiple open panels — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/accordion-multiple-example.json` |
| accordion-disabled-example | registry:example | Expand or collapse related content sections. Accordion with a disabled item — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/accordion-disabled-example.json` |
| accordion-controlled-example | registry:example | Expand or collapse related content sections. Accordion controlled by a button — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/accordion-controlled-example.json` |
| alert-demo | registry:example | Present an inline message with a title and optional actions. Maintenance notice with icon — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-demo.json` |
| alert-variants-example | registry:example | Present an inline message with a title and optional actions. Alert variants — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-variants-example.json` |
| alert-action-example | registry:example | Present an inline message with a title and optional actions. Alert with actions — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-action-example.json` |
| alert-banner-example | registry:example | Present an inline message with a title and optional actions. Page banners with the action at the end — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-banner-example.json` |
| alert-banner-link-example | registry:example | Present an inline message with a title and optional actions. Page banners with the link in the text — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-banner-link-example.json` |
| alert-band-example | registry:example | Present an inline message with a title and optional actions. Band in a card — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-band-example.json` |
| alert-dialog-demo | registry:example | Ask for a deliberate decision before continuing. Delete project confirmation — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-dialog-demo.json` |
| alert-dialog-delete-account-example | registry:example | Ask for a deliberate decision before continuing. Delete account — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-dialog-delete-account-example.json` |
| alert-dialog-controlled-example | registry:example | Ask for a deliberate decision before continuing. Discard unsaved comment confirmation — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/alert-dialog-controlled-example.json` |
| animated-buttons-demo | registry:example | Buttons with hover motion, such as a fill that sweeps in or an arrow that expands behind the label. Fill sweep button — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/animated-buttons-demo.json` |
| animated-buttons-variants-example | registry:example | Buttons with hover motion, such as a fill that sweeps in or an arrow that expands behind the label. Fill sweep variants — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/animated-buttons-variants-example.json` |
| animated-buttons-expanding-example | registry:example | Buttons with hover motion, such as a fill that sweeps in or an arrow that expands behind the label. Expanding arrow link and log out button — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/animated-buttons-expanding-example.json` |
| animated-buttons-sizes-example | registry:example | Buttons with hover motion, such as a fill that sweeps in or an arrow that expands behind the label. Sizes, disabled and loading — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/animated-buttons-sizes-example.json` |
| area-chart-demo | registry:example | Show how one or several measures change over time as filled areas, overlaid or stacked. Page views by month — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/area-chart-demo.json` |
| area-chart-stacked-example | registry:example | Show how one or several measures change over time as filled areas, overlaid or stacked. Visitors by source, stacked — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/area-chart-stacked-example.json` |
| area-chart-fill-example | registry:example | Show how one or several measures change over time as filled areas, overlaid or stacked. The gradient and the solid fill — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/area-chart-fill-example.json` |
| area-chart-curves-example | registry: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. | `npx shadcn@latest add https://ui.siteplane.io/registry/area-chart-curves-example.json` |
| area-chart-negative-example | registry: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. | `npx shadcn@latest add https://ui.siteplane.io/registry/area-chart-negative-example.json` |
| area-chart-fill-height-example | registry: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. | `npx shadcn@latest add https://ui.siteplane.io/registry/area-chart-fill-height-example.json` |
| area-chart-changing-example | registry: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. | `npx shadcn@latest add https://ui.siteplane.io/registry/area-chart-changing-example.json` |
| autocomplete-demo | registry:example | Suggest completions while allowing free text. Project search with suggestions — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/autocomplete-demo.json` |
| autocomplete-controlled-example | registry:example | Suggest completions while allowing free text. Controlled value and clear — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/autocomplete-controlled-example.json` |
| autocomplete-groups-example | registry:example | Suggest completions while allowing free text. Tag suggestions in groups — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/autocomplete-groups-example.json` |
| autocomplete-limit-results-example | registry:example | Suggest completions while allowing free text. Skill suggestions with a result limit — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/autocomplete-limit-results-example.json` |
| autocomplete-appearance-example | registry:example | Suggest completions while allowing free text. Autocomplete variants and disabled state — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/autocomplete-appearance-example.json` |
| autocomplete-sizes-example | registry:example | Suggest completions while allowing free text. Autocomplete sizes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/autocomplete-sizes-example.json` |
| autocomplete-form-example | registry:example | Suggest completions while allowing free text. Job title field with suggestions — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/autocomplete-form-example.json` |
| avatar-demo | registry:example | Represent a person with an image or a text fallback. Profile photo with initials fallback — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-demo.json` |
| avatar-fallback-example | registry:example | Represent a person with an image or a text fallback. Guest avatar with user icon — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-fallback-example.json` |
| avatar-sizes-example | registry:example | Represent a person with an image or a text fallback. Avatar sizes and shapes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-sizes-example.json` |
| avatar-group-example | registry:example | Represent a person with an image or a text fallback. Project members with overflow count — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-group-example.json` |
| avatar-status-example | registry:example | Represent a person with an image or a text fallback. Avatars with presence status — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-status-example.json` |
| avatar-group-demo | registry:example | Show several people as a row of overlapping avatars with an optional overflow count. Project members with overflow count — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-group-demo.json` |
| avatar-group-sizes-example | registry:example | Show several people as a row of overlapping avatars with an optional overflow count. Avatar groups in four sizes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-group-sizes-example.json` |
| avatar-group-count-example | registry:example | Show several people as a row of overlapping avatars with an optional overflow count. A small and a large overflow count — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-group-count-example.json` |
| avatar-group-card-example | registry: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. | `npx shadcn@latest add https://ui.siteplane.io/registry/avatar-group-card-example.json` |
| badge-demo | registry:example | Label a status, category, or count. Draft status badge — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-demo.json` |
| badge-variants-example | registry:example | Label a status, category, or count. Badge variants — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-variants-example.json` |
| badge-secondary-example | registry:example | Label a status, category, or count. Secondary badges on a white and a tinted row — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-secondary-example.json` |
| badge-emphasis-example | registry:example | Label a status, category, or count. A New label and an unread count — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-emphasis-example.json` |
| badge-sizes-example | registry:example | Label a status, category, or count. Badge sizes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-sizes-example.json` |
| badge-shape-example | registry:example | Label a status, category, or count. Default and pill badges — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-shape-example.json` |
| badge-composition-example | registry:example | Label a status, category, or count. Status badges with icons — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-composition-example.json` |
| badge-status-dot-example | registry:example | Label a status, category, or count. Invoice status badges — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-status-dot-example.json` |
| badge-status-example | registry:example | Label a status, category, or count. Site statuses in a list and in a sentence — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-status-example.json` |
| badge-link-example | registry:example | Label a status, category, or count. Badge rendered as a link — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-link-example.json` |
| badge-light-example | registry:example | Label a status, category, or count. Badge with light — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/badge-light-example.json` |
| bar-chart-demo | registry:example | Compare values across categories as columns or horizontal bars, side by side or stacked. Signups by month — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-demo.json` |
| bar-chart-multiple-example | registry:example | Compare values across categories as columns or horizontal bars, side by side or stacked. Support tickets opened and resolved by month — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-multiple-example.json` |
| bar-chart-stacked-example | registry:example | Compare values across categories as columns or horizontal bars, side by side or stacked. Customers gained and lost by month — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-stacked-example.json` |
| bar-chart-horizontal-example | registry:example | Compare values across categories as columns or horizontal bars, side by side or stacked. Active users by feature — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-horizontal-example.json` |
| bar-chart-negative-example | registry:example | Compare values across categories as columns or horizontal bars, side by side or stacked. Net cash flow by month — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-negative-example.json` |
| bar-chart-categorical-example | registry:example | Compare values across categories as columns or horizontal bars, side by side or stacked. API requests by region and month — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-categorical-example.json` |
| bar-chart-value-labels-example | registry: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. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-value-labels-example.json` |
| bar-chart-highlight-example | registry:example | Compare values across categories as columns or horizontal bars, side by side or stacked. Visitors this week with today still running — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-highlight-example.json` |
| bar-chart-fill-height-example | registry: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. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-fill-height-example.json` |
| bar-chart-changing-example | registry: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. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-chart-changing-example.json` |
| bar-list-demo | registry:example | Rank labeled values with a bar for each, relative to the largest. Top pages by visitors — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-list-demo.json` |
| bar-list-formatted-example | registry:example | Rank labeled values with a bar for each, relative to the largest. Revenue by country in US dollars — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-list-formatted-example.json` |
| bar-list-icons-example | registry:example | Rank labeled values with a bar for each, relative to the largest. Traffic sources with icons — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-list-icons-example.json` |
| bar-list-second-line-example | registry:example | Rank labeled values with a bar for each, relative to the largest. Top pages with their paths — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-list-second-line-example.json` |
| bar-list-heading-example | registry:example | Rank labeled values with a bar for each, relative to the largest. Traffic sources under a heading row — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-list-heading-example.json` |
| bar-list-changing-example | registry:example | Rank labeled values with a bar for each, relative to the largest. Top pages that glide when the period changes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-list-changing-example.json` |
| bar-list-rtl-example | registry:example | Rank labeled values with a bar for each, relative to the largest. Visitors by device, right to left — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/bar-list-rtl-example.json` |
| breadcrumb-demo | registry:example | Show the current location within a navigation hierarchy. Breadcrumb with a menu for hidden levels — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/breadcrumb-demo.json` |
| breadcrumb-separator-example | registry:example | Show the current location within a navigation hierarchy. Custom separator — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/breadcrumb-separator-example.json` |
| breadcrumb-collapsed-example | registry:example | Show the current location within a navigation hierarchy. Collapsed path — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/breadcrumb-collapsed-example.json` |
| button-demo | registry:example | Trigger an action with a text label, an icon, or both. Default button — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-demo.json` |
| button-variants-example | registry:example | Trigger an action with a text label, an icon, or both. All button variants — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-variants-example.json` |
| button-glass-example | registry:example | Trigger an action with a text label, an icon, or both. Glass buttons — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-glass-example.json` |
| button-sizes-example | registry:example | Trigger an action with a text label, an icon, or both. Button and icon button sizes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-sizes-example.json` |
| button-pill-example | registry:example | Trigger an action with a text label, an icon, or both. Pill buttons — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-pill-example.json` |
| button-icons-example | registry:example | Trigger an action with a text label, an icon, or both. Leading, trailing and icon-only buttons — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-icons-example.json` |
| button-states-example | registry:example | Trigger an action with a text label, an icon, or both. Disabled and loading buttons — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-states-example.json` |
| button-async-action-example | registry:example | Trigger an action with a text label, an icon, or both. Loading button — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-async-action-example.json` |
| button-layout-example | registry:example | Trigger an action with a text label, an icon, or both. Button width and alignment — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-layout-example.json` |
| button-link-example | registry:example | Trigger an action with a text label, an icon, or both. Button rendered as a link — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-link-example.json` |
| button-underlined-link-example | registry:example | Trigger an action with a text label, an icon, or both. Links in a sentence and on their own — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/button-underlined-link-example.json` |
| calendar-demo | registry:example | Choose a date, several dates or a date range. Appointment date calendar — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/calendar-demo.json` |
| calendar-range-example | registry:example | Choose a date, several dates or a date range. Date range — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/calendar-range-example.json` |
| calendar-shortcuts-example | registry:example | Choose a date, several dates or a date range. Date range with shortcuts — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/calendar-shortcuts-example.json` |
| calendar-multiple-example | registry:example | Choose a date, several dates or a date range. Multiple dates — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/calendar-multiple-example.json` |
| calendar-constraints-example | registry:example | Choose a date, several dates or a date range. Booked dates unavailable — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/calendar-constraints-example.json` |
| calendar-controlled-example | registry:example | Choose a date, several dates or a date range. Due date with a Today button — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/calendar-controlled-example.json` |
| calendar-locale-example | registry:example | Choose a date, several dates or a date range. German calendar — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/calendar-locale-example.json` |
| card-demo | registry:example | Group related content and actions on a surface. Create project card — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-demo.json` |
| card-action-example | registry:example | Group related content and actions on a surface. Recent invoices with a view-all link — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-action-example.json` |
| card-header-media-example | registry:example | Group related content and actions on a surface. Cards with an avatar, an icon and title context — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-header-media-example.json` |
| card-divided-example | registry:example | Group related content and actions on a surface. Payouts with a divided header and footer — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-divided-example.json` |
| card-inset-example | registry:example | Group related content and actions on a surface. Card with a 24 px inset — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-inset-example.json` |
| card-frame-example | registry:example | Group related content and actions on a surface. Framed card with a header action — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-frame-example.json` |
| card-variants-example | registry:example | Group related content and actions on a surface. Raised, header and subtle cards — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-variants-example.json` |
| card-nested-example | registry:example | Group related content and actions on a surface. Inset files in a card and elevated plans — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-nested-example.json` |
| card-feedback-example | registry:example | Group related content and actions on a surface. Message and error cards — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-feedback-example.json` |
| card-glass-example | registry:example | Group related content and actions on a surface. Glass card — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-glass-example.json` |
| card-background-example | registry:example | Group related content and actions on a surface. A card on the page canvas and on the card color — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/card-background-example.json` |
| checkbox-demo | registry:example | Select or clear an independent option. Terms checkbox — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-demo.json` |
| checkbox-with-description-example | registry:example | Select or clear an independent option. Checkbox with description — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-with-description-example.json` |
| checkbox-states-example | registry:example | Select or clear an independent option. Disabled and invalid checkboxes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-states-example.json` |
| checkbox-card-style-example | registry:example | Select or clear an independent option. Checkbox card — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-card-style-example.json` |
| checkbox-controlled-example | registry:example | Select or clear an independent option. Controlled checkbox — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-controlled-example.json` |
| checkbox-form-example | registry:example | Select or clear an independent option. Checkbox in a form — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-form-example.json` |
| checkbox-sizes-example | registry:example | Select or clear an independent option. Checkbox sizes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-sizes-example.json` |
| checkbox-group-demo | registry:example | Choose any number of related options. Notification channel checkboxes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-group-demo.json` |
| checkbox-group-controlled-example | registry:example | Choose any number of related options. Controlled column visibility — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-group-controlled-example.json` |
| checkbox-group-select-all-example | registry:example | Choose any number of related options. Parent checkbox for project permissions — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-group-select-all-example.json` |
| checkbox-group-form-example | registry:example | Choose any number of related options. Checkbox group in a form — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-group-form-example.json` |
| checkbox-group-card-style-example | registry:example | Choose any number of related options. Add-on cards — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-group-card-style-example.json` |
| checkbox-group-sizes-example | registry:example | Choose any number of related options. Checkbox group sizes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/checkbox-group-sizes-example.json` |
| code-demo | registry:example | Display inline code or a copyable block of text. Inline code in a sentence — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/code-demo.json` |
| code-block-example | registry:example | Display inline code or a copyable block of text. Copyable API request — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/code-block-example.json` |
| code-mask-example | registry:example | Display inline code or a copyable block of text. Masked API key — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/code-mask-example.json` |
| collapsible-demo | registry:example | Show or hide a single section of content. Recovery keys disclosure — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/collapsible-demo.json` |
| collapsible-controlled-example | registry:example | Show or hide a single section of content. Order details with an icon trigger — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/collapsible-controlled-example.json` |
| collapsible-file-tree-example | registry:example | Show or hide a single section of content. File tree with nested folders — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/collapsible-file-tree-example.json` |
| color-picker-demo | registry:example | Choose a hex color with a swatch, hue slider, and channel fields. Brand color field — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-picker-demo.json` |
| color-picker-controlled-example | registry:example | Choose a hex color with a swatch, hue slider, and channel fields. Controlled color — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-picker-controlled-example.json` |
| color-picker-sizes-example | registry:example | Choose a hex color with a swatch, hue slider, and channel fields. Color picker sizes and swatch-only trigger — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-picker-sizes-example.json` |
| color-picker-custom-example | registry:example | Choose a hex color with a swatch, hue slider, and channel fields. Palette that ends in a custom color — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-picker-custom-example.json` |
| color-picker-form-example | registry:example | Choose a hex color with a swatch, hue slider, and channel fields. Color picker in a form — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-picker-form-example.json` |
| color-swatch-picker-demo | registry:example | Select a named color or image from an application-owned palette. Label color swatches — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-swatch-picker-demo.json` |
| color-swatch-picker-controlled-example | registry:example | Select a named color or image from an application-owned palette. Controlled selection — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-swatch-picker-controlled-example.json` |
| color-swatch-picker-ring-example | registry:example | Select a named color or image from an application-owned palette. Label color swatches with a selection ring — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-swatch-picker-ring-example.json` |
| color-swatch-picker-images-example | registry:example | Select a named color or image from an application-owned palette. Reviewer swatches with photos — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-swatch-picker-images-example.json` |
| color-swatch-picker-states-example | registry:example | Select a named color or image from an application-owned palette. Read-only and disabled swatches — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-swatch-picker-states-example.json` |
| color-swatch-picker-form-example | registry:example | Select a named color or image from an application-owned palette. Required swatch selection in a form — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/color-swatch-picker-form-example.json` |
| combobox-demo | registry:example | Search and choose from known options. Assignee picker — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox-demo.json` |
| combobox-controlled-example | registry:example | Search and choose from known options. Controlled value and clear — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox-controlled-example.json` |
| combobox-multiple-example | registry:example | Search and choose from known options. Label picker with chips — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox-multiple-example.json` |
| combobox-groups-example | registry:example | Search and choose from known options. Timezone combobox with groups — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox-groups-example.json` |
| combobox-searchable-select-example | registry:example | Search and choose from known options. Country picker with search — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox-searchable-select-example.json` |
| combobox-appearance-example | registry:example | Search and choose from known options. Combobox variants and disabled state — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox-appearance-example.json` |
| combobox-sizes-example | registry:example | Search and choose from known options. Combobox sizes — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox-sizes-example.json` |
| combobox-form-example | registry:example | Search and choose from known options. Workspace field in a form — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/combobox-form-example.json` |
| command-demo | registry:example | Find and run actions in an inline list or a dialog. Command palette — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/command-demo.json` |
| command-groups-example | registry:example | Find and run actions in an inline list or a dialog. Inline command with groups and shortcuts — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/command-groups-example.json` |
| context-menu-demo | registry:example | Show actions for an element on right-click or long press. Context menu with icons and shortcuts — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/context-menu-demo.json` |
| context-menu-submenu-example | registry:example | Show actions for an element on right-click or long press. Grouped context menu with a submenu — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/context-menu-submenu-example.json` |
| context-menu-choices-example | registry:example | Show actions for an element on right-click or long press. View options context menu — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/context-menu-choices-example.json` |
| context-menu-with-link-example | registry:example | Show actions for an element on right-click or long press. Context menu with link items — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/context-menu-with-link-example.json` |
| context-menu-glass-example | registry:example | Show actions for an element on right-click or long press. Glass context menu — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/context-menu-glass-example.json` |
| copy-button-demo | registry: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… | `npx shadcn@latest add https://ui.siteplane.io/registry/copy-button-demo.json` |
| copy-button-text-example | registry: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. Copy link as a quiet text acti… | `npx shadcn@latest add https://ui.siteplane.io/registry/copy-button-text-example.json` |
| copy-button-input-group-example | registry: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. Read-only invite link with a c… | `npx shadcn@latest add https://ui.siteplane.io/registry/copy-button-input-group-example.json` |
| copy-button-states-example | registry: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. A copy that works and a copy w… | `npx shadcn@latest add https://ui.siteplane.io/registry/copy-button-states-example.json` |
| dashboard-shell-inset-example | registry:example | Compose a sidebar, header, and scrolling application content. Inset workspace shell — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/dashboard-shell-inset-example.json` |
| dashboard-shell-demo | registry:example | Compose a sidebar, header, and scrolling application content. Push workspace shell — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/dashboard-shell-demo.json` |
| dashboard-shell-sticky-header-example | registry:example | Compose a sidebar, header, and scrolling application content. Sticky header — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/dashboard-shell-sticky-header-example.json` |
| dashboard-shell-header-workspace-on-top-example | registry:example | Compose a sidebar, header, and scrolling application content. Workspace on top — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/dashboard-shell-header-workspace-on-top-example.json` |
| dashboard-shell-header-logo-above-workspace-example | registry:example | Compose a sidebar, header, and scrolling application content. Logo above the workspace — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/dashboard-shell-header-logo-above-workspace-example.json` |
| dashboard-shell-header-logo-only-example | registry:example | Compose a sidebar, header, and scrolling application content. Logo only — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/dashboard-shell-header-logo-only-example.json` |
| dashboard-shell-controlled-example | registry:example | Compose a sidebar, header, and scrolling application content. Controlled sidebar state — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/dashboard-shell-controlled-example.json` |
| data-list-demo | registry:example | Show the details of one record as label and value rows, side by side or stacked. Subscription details — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/data-list-demo.json` |
| data-list-dividers-example | registry:example | Show the details of one record as label and value rows, side by side or stacked. Connection details with dividers — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/data-list-dividers-example.json` |
| data-list-vertical-example | registry:example | Show the details of one record as label and value rows, side by side or stacked. Billing details with labels above the values — usage example. | `npx shadcn@latest add https://ui.siteplane.io/registry/data-list-vertical-example.json` |

## For AI agents

```text
You are adding components from @siteplane to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/siteplane.md) for the component list.
2. Fetch the machine-readable index: https://ui.siteplane.io/registry/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: siteplane).
```