UI Skillbook
2

Group

Joins related buttons, or an input and its button, into one segmented frame. The controls share no state.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-group and follow the Siteplane Group skill it prints for this task.

Paste this into your agent.

Group builds split buttons, segmented action sets, zoom controls, or a search input joined to its submit button. Each control keeps its own behavior and tab stop.

Install

bashnpx shadcn@4.18.0 add @siteplane/group

Import it from @/siteplane/components/group. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Toolbar: Pick Toolbar when the controls should share one tab stop with arrow-key navigation.
  • vs Toggle Group: Pick Toggle Group when the segments share a pressed selection.
  • vs Input Group: Pick Input Group when the addon belongs inside one input surface.

Rules

  • Name each Group with aria-label or aria-labelledby.
  • Use GroupText for a fixed prefix or unit and give the input its own accessible name.
  • Wrap an input-plus-button Group in a Form, with type="submit" on the button, so pressing Enter sends it.
  • Give icon-only segments shape="square" instead of a fixed icon size so heights match.
  • Use GroupSeparator between non-button controls, or separator="inset" for button rows.

Reference

  • Group docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-group

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Adaptby pbakaus

Adapt designs across breakpoints, device contexts, and platform constraints with responsive interaction quality.

InteractionExternalGitHub stars: 95.1K

Animateby pbakaus

Enhance UX with purposeful animation and micro-interactions that support usability and delight.

MotionExternalGitHub stars: 95.1K

Animate Expoby emilkowalski

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

MotionExternalGitHub stars: 51.4K

Animation on Scrollby MengTo

Use when you need scroll-driven motion that feels intentional instead of noisy or overdone.

MotionExternalGitHub stars: 7.1K

Back to Siteplane UI