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 Tableby UI Skillbook
An interactive data grid with keyboard navigation, sortable columns, row selection and row actions.
Siteplane UI
Siteplane Native Tableby UI Skillbook
A plain HTML table in the same look as Table, for reports and cells whose controls keep their own tab stops.
Siteplane UI
Siteplane Resource Listby UI Skillbook
A list of entities with a status indicator, title, description and meta slot. Rows can be links.
Siteplane UI
Siteplane Filter Barby UI Skillbook
A layout strip above a list or table for view tabs, search, filter menus, actions and applied-filter tags.
Siteplane UI
Siteplane Settings Listby UI Skillbook
A titled card of settings rows, each pairing a label and help text with a control you supply.
Siteplane UI
Siteplane Stepperby UI Skillbook
An ordered list of steps showing which are done, current, open or blocked, with optional clickable steps.
Siteplane UI
Siteplane Timelineby UI Skillbook
A vertical list of events in time order with coloured or icon markers and an optional now line.
Siteplane UI
Siteplane Bar Chartby UI Skillbook
Columns or horizontal bars that compare values across categories, grouped or stacked, with keyboard tooltips.
Siteplane UI
Siteplane Line Chartby UI Skillbook
Lines on a shared axis that show how one or more measures rise and fall over time or ordered steps.
Siteplane UI
Siteplane Area Chartby UI Skillbook
Filled areas over time, overlaid or stacked, that show how big a measure is and how its parts add up.
Siteplane UI
Siteplane Pie Chartby UI Skillbook
A donut or pie that shows how one total splits into a few shares, with an optional figure in the hole.
Siteplane UI
Siteplane Bar Listby UI Skillbook
A ranked list of labels with a bar behind each, sized against the largest value.
Siteplane UI
Siteplane Sparklineby UI Skillbook
A tiny axis-free chart that shows the shape of a trend next to the number it belongs to.
Siteplane UI
Siteplane Message Scrollerby UI Skillbook
The scroll region of a chat thread: opens at the latest message, follows streaming replies and offers a jump back.
Siteplane UI
Siteplane Messageby UI Skillbook
The layout of one chat turn: content, footer actions and, between people, an avatar and header.
Siteplane UI
Siteplane Bubbleby UI Skillbook
The surface for a chat message's text, with variants for sender, assistant replies and errors.
Siteplane UI
Siteplane Markerby UI Skillbook
A low-key line between chat messages for things like status updates, system notes or date dividers.
Siteplane UI
Siteplane Traceby UI Skillbook
One-line rows for an AI agent's reasoning, tool calls and sources that expand into their details.
Siteplane UI
Siteplane Attachmentby UI Skillbook
A card for a file or image attached to a message or draft, with upload states and actions.
Siteplane UI
Siteplane Prompt Inputby UI Skillbook
Chat input that submits on Enter, expands as the draft gets longer, and swaps Send for Stop during a response.
Siteplane UI
Siteplane Typesetby UI Skillbook
Applies the kit's typography to rendered markdown, like chat replies or docs, by mapping elements to components.
Siteplane UI
Siteplane Alertby UI Skillbook
An inline message that stays in the layout, styled by tone, with actions and a dismiss button if needed.
Siteplane UI
Siteplane Empty Stateby UI Skillbook
A centred block, with optional media and actions, telling people why there is nothing here yet and how to proceed.
Siteplane UI
Siteplane Meterby UI Skillbook
A bar for a value inside fixed bounds, like storage used, that can carry a status tone.
Siteplane UI
Siteplane Progressby UI Skillbook
A bar or circle that reports how far a task has got, or that it is still under way.
Siteplane UI
Siteplane Skeletonby UI Skillbook
Decorative shapes that stand in for content while it loads, keeping the layout steady.
Siteplane UI
Siteplane Spinnerby UI Skillbook
A looping animation that shows work is under way when its duration is unknown.
Siteplane UI
Siteplane Toastby UI Skillbook
Brief notifications that appear after an action and dismiss themselves, managed through one provider.
Siteplane UI
Siteplane Frameby UI Skillbook
A muted surface that groups raised panels with an optional header, descriptions and footer.
Siteplane UI
Siteplane Kbdby UI Skillbook
Styled notation for a keyboard key or a key combination inside text, buttons or menus.
Siteplane UI