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 Buttonby UI Skillbook
Action control for text, icons or both. Variants set emphasis, and it handles sizes, a loading state and rendering as a link.
Siteplane UI
Siteplane Copy Buttonby UI Skillbook
Copies a value to the clipboard and confirms success or failure on screen and to screen readers.
Siteplane UI
Siteplane Toggleby UI Skillbook
One button that stays pressed or unpressed, for on/off tool states like bold or bookmark.
Siteplane UI
Siteplane Toggle Groupby UI Skillbook
Related pressed-state buttons that share one selection, single or multiple, with arrow-key movement.
Siteplane UI
Siteplane Toolbarby UI Skillbook
A labelled row of related controls that takes one tab stop and moves between items with arrow keys.
Siteplane UI
Siteplane Inputby UI Skillbook
A single-line text control with surface variants and sizes; it also ships Field for labels, help and errors.
Siteplane UI
Siteplane Textareaby UI Skillbook
A multiline text control that grows with its content between a minimum and maximum number of lines.
Siteplane UI
Siteplane Editableby UI Skillbook
Text that turns into its own field when clicked, for renaming a project, page or list item in place.
Siteplane UI
Siteplane Number Fieldby UI Skillbook
A numeric input with step buttons, bounds, locale formatting and optional drag-to-scrub.
Siteplane UI
Siteplane OTP Fieldby UI Skillbook
One-time-code entry with a slot per character, separate or joined. It handles paste and auto-advance.
Siteplane UI
Siteplane Labelby UI Skillbook
A plain visible label for a native control, plus a card variant for checkbox, radio and switch options.
Siteplane UI
Siteplane Fieldby UI Skillbook
Ties a control to its label, help text and validation messages, with top or floating labels.
Siteplane UI
Siteplane Fieldsetby UI Skillbook
Groups related form fields under a shared legend and optional description, and can disable them together.
Siteplane UI
Siteplane Formby UI Skillbook
The submit boundary for Fields: form-wide validation timing, server error mapping and reset handling.
Siteplane UI
Siteplane Checkboxby UI Skillbook
A box for one independent yes/no choice, with indeterminate state and form submission built in.
Siteplane UI
Siteplane Checkbox Groupby UI Skillbook
Holds a set of related checkboxes as one array value, with an optional parent box that selects all.
Siteplane UI
Siteplane Radio Groupby UI Skillbook
A set of visible options where exactly one is chosen, with arrow-key movement and form submission.
Siteplane UI
Siteplane Switchby UI Skillbook
An on/off control for a setting, with an optional label and description row and form submission.
Siteplane UI
Siteplane Sliderby UI Skillbook
Pick a number or a range by dragging thumbs along a track, with optional scale labels.
Siteplane UI
Siteplane Selectby UI Skillbook
A trigger that opens a fixed list of options for one or several choices, without typing to filter.
Siteplane UI
Siteplane Comboboxby UI Skillbook
A searchable picker that filters known options as you type, single or multi-select with chips.
Siteplane UI
Siteplane Autocompleteby UI Skillbook
A text input that suggests completions while still accepting whatever the person types.
Siteplane UI
Siteplane List Boxby UI Skillbook
An always-visible list where one row is selected, with rich multiline rows and typeahead.
Siteplane UI
Siteplane Input Groupby UI Skillbook
One input surface with text, icons, buttons or a header and footer attached around an input or textarea.
Siteplane UI
Siteplane Groupby UI Skillbook
Joins related buttons, or an input and its button, into one segmented frame. The controls share no state.
Siteplane UI
Siteplane Commandby UI Skillbook
A searchable, keyboard-driven list of actions, shown inline in a panel or as a command palette in a dialog.
Siteplane UI
Siteplane Breadcrumbby UI Skillbook
A row of links tracing the path from the site root to the current page, so people can climb back up.
Siteplane UI
Siteplane Navigation Menuby UI Skillbook
A row of site links where some entries open dropdown panels of further destinations.
Siteplane UI
Siteplane Paginationby UI Skillbook
Previous, Next and numbered page links for stepping through a long list or table.
Siteplane UI
Siteplane Tabsby UI Skillbook
Keyboard-navigable tabs that switch between related panels of content on the same page.
Siteplane UI