Siteplane UI
Every Siteplane UI component (99), with when to pick it over its neighbours, how to install it and the rules that keep it right.
99 skills
is a React kit that installs as editable source through the shadcn CLI. It is the design system UI Skillbook itself is built on. This collection has one entry per component, grouped as Siteplane groups them: Actions, Forms & selection, Navigation, Overlays & disclosure, Date & color, Data display, Charts, Chat & AI, Feedback, Layout & utilities, Animated, Glass.
Set up the kit once with the , and install Siteplane's own agent skill with npx skills@1.5.25 add https://ui.siteplane.io -a claude-code. Each entry here adds the install command, the neighbours it is often confused with, and a link to its full docs.
Skills in this collection
Siteplane Sidebarby UI Skillbook
Application navigation in a side column that collapses to an icon rail on desktop and becomes a sheet on mobile.
Siteplane UI
Siteplane Dashboard Shellby UI Skillbook
A responsive app frame that combines the sidebar, a sticky top bar and a scrolling content area.
Siteplane UI
Siteplane Accordionby UI Skillbook
A stack of related sections that expand and collapse, one at a time or several together.
Siteplane UI
Siteplane Collapsibleby UI Skillbook
A single disclosure that shows or hides one block of content behind a trigger.
Siteplane UI
Siteplane Context Menuby UI Skillbook
Secondary actions for an element that appear on right-click or a long press.
Siteplane UI
Siteplane Menuby UI Skillbook
A compact list of actions or choices that opens from a button, with keyboard navigation.
Siteplane UI
Siteplane Dropdown Menuby UI Skillbook
Menu exported under DropdownMenu-prefixed part names for a list of actions opened from a button.
Siteplane UI
Siteplane Dialogby UI Skillbook
A modal overlay for a focused task or short form, with a title and a clear way to close.
Siteplane UI
Siteplane Alert Dialogby UI Skillbook
A modal confirmation that asks for a deliberate decision before a consequential action.
Siteplane UI
Siteplane Drawerby UI Skillbook
A modal sheet that enters from any side of the screen and closes with a swipe.
Siteplane UI
Siteplane Detail Drawerby UI Skillbook
A right-side drawer for viewing one record's details beside its list, optionally with an edit form.
Siteplane UI
Siteplane Sheetby UI Skillbook
A dialog-backed panel that opens from a screen edge for forms and save-or-cancel tasks.
Siteplane UI
Siteplane Popoverby UI Skillbook
A non-modal surface anchored to a trigger for contextual content people can interact with.
Siteplane UI
Siteplane Preview Cardby UI Skillbook
Hovering or focusing a link opens this card with a preview of where it goes, so people stay on the page.
Siteplane UI
Siteplane Tooltipby UI Skillbook
Brief text shown on hover or focus that names or explains a control, for example an icon button.
Siteplane UI
Siteplane Calendarby UI Skillbook
An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.
Siteplane UI
Siteplane Date Fieldby UI Skillbook
A typed date input built from day, month and year segments, with an optional calendar popover.
Siteplane UI
Siteplane Date Pickerby UI Skillbook
A button that opens a calendar to choose one date, showing the chosen date as formatted text.
Siteplane UI
Siteplane Date Range Pickerby UI Skillbook
A typed start-and-end date field with a calendar popover, submitting two ISO day strings.
Siteplane UI
Siteplane Date Time Pickerby UI Skillbook
One control for a local date and time, with typed segments, a calendar and a time selector.
Siteplane UI
Siteplane Time Fieldby UI Skillbook
An hour and minute input with typed segments and an optional selector, submitting 24-hour HH:mm.
Siteplane UI
Siteplane Color Pickerby UI Skillbook
A trigger that opens a hex color editor with a saturation area, hue slider and RGB fields.
Siteplane UI
Siteplane Color Swatch Pickerby UI Skillbook
A row of color or image swatches for choosing one option from a palette your app defines.
Siteplane UI
Siteplane Avatarby UI Skillbook
A round image for a user or account, showing initials or an icon instead when no picture is available.
Siteplane UI
Siteplane Avatar Groupby UI Skillbook
A facepile: several avatars overlapped in a row with an optional count of the people not shown.
Siteplane UI
Siteplane Badgeby UI Skillbook
A compact label for a status, category, plan or count, with semantic colour variants and fixed sizes.
Siteplane UI
Siteplane File Type Iconby UI Skillbook
A document-sheet icon that shows a file's type and extension, picked from its name.
Siteplane UI
Siteplane Cardby UI Skillbook
A surface that groups related content and actions, with header, panel, footer and framed-section parts.
Siteplane UI
Siteplane Data Listby UI Skillbook
Label and value rows that describe one record, laid out side by side or stacked.
Siteplane UI
Siteplane Tag Groupby UI Skillbook
A keyboard-navigable set of tags that can be selected or removed, with animated adds and removals.
Siteplane UI