Toolbar
A labelled row of related controls that takes one tab stop and moves between items with arrow keys.
Paste this into your agent.
Toolbar holds editor formatting bars, canvas tools and table action rows full of small controls. Roving focus gives the set one tab stop, so keyboard users skip past it with a single Tab.
Install
bashnpx shadcn@4.18.0 add @siteplane/toolbar
Import it from @/siteplane/components/toolbar. The project needs Siteplane UI's one-time setup first: .
When to pick it
- vs : Pick Group when the controls only need a joined look and each keeps its own tab stop.
- vs : Pick Toggle Group for a set that shares a pressed selection; nest it inside a Toolbar when the bar also has other actions.
- vs : Move infrequent actions into a Menu opened from the toolbar so the row stays short.
Rules
- Give the toolbar, and any meaningful
ToolbarGroup, an accessible label. - Build items from
ToolbarButton,ToolbarLink,ToolbarInputandToolbarGroupso they join the arrow-key focus order. - Set
sizeonce onToolbar; a group or item can override it for its own controls. - Divide clusters with
ToolbarSeparatorinstead of spacing alone. - Set
focusableWhenDisabledon aToolbarButtonthat must stay reachable while unavailable.
Reference
Add to your agent
Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides
CLI
MCP server
Questions
Related skills
Accessible Focus Statesby UI Skillbook
Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.
Accessibility
Better Accessibilityby jakubkrehel
Review and improve focus states, keyboard support, ARIA, forms, screen readers, hit areas, and motion accessibility.
AccessibilityExternalGitHub stars: 9.2K
Build Primitiveby PrototyperAI
Build foundational UI primitives from scratch with strong ARIA, keyboard, focus, and state handling.
AccessibilityExternalGitHub stars: 7
Link Purposeby AccessLint
Compatibility listing for link-purpose installs from AccessLint's marketplace skill set.
AccessibilityExternalGitHub stars: 114