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 colors' or 'Make the pills bigger'. It will update the component for you.

Can I add more than two options?

Absolutely. Pass in an options array with as many choices as you need. The component automatically calculates the sliding animation for any number of options. Just make sure each option has a unique value, label, and icon.

FormsFree

Pill Toggle With Icon 1

Animated pill toggle with icons that slides between options with smooth spring physics. 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 pill-shaped toggle switch with icons and labels that smoothly animates between states.

The white highlight slides behind your selected option with spring physics that feels responsive and polished. Each option gets an icon and label, both customizable through props.

Pass in your own options array to create custom toggles for view modes, filters, or any binary/multiple choice selection. The component tracks state internally but also fires onChange callbacks so you can sync it with your app state.

Built with Framer Motion for buttery smooth animations and Tabler Icons for the default icon set.