How do I add this to my project?

Copy the install command and paste it into Claude Code. It handles everything - downloads the component, installs dependencies, and adds it to your project.

Can I customize the styling?

Yes! Just tell Claude Code what you want. Example: 'Change the background to dark mode' or 'Use different icons'. It will update the component for you.

How do I use my own icons and options?

Pass an options array with your own values, labels, and icons. Each option needs a value (string), label (string), and icon (React node). The component handles the rest - animations, tooltips, and state management all work automatically.

FormsFree

Expandable Icon Toggle 1

A compact toggle that expands on hover to reveal all options, collapsing back to show only your selection. Component used in Colouring Page.

Installation 30s

Run Claude Code then copy and paste this command

@5ds/framework

Sign In to Build

Join with a free account

Claude Code will install this into the /src/components folder in your project

Tell Claude Code where you want to use this

Description

A space-saving toggle that shows just the selected icon until you hover over it.

When you hover, it smoothly expands to reveal all options with a sliding highlight animation. The default setup handles portrait, landscape, and square orientations, but you can pass in any icons and labels you want.

Pass your own options array to customize the icons and values. The onChange callback fires whenever someone picks a new option, so you can hook it up to your state management.

Built with Framer Motion for the spring animations and shadcn tooltips that appear when expanded.