Classic Selectors
Complete classic selector system with 8 patterns — animated pill segmented, sliding underline tabs, boxed binary toggle, device icon strip, chip multi-select, view mode toggle, dot step indicator, and arrow pager. Supports dark/light theme, compact mode, and custom accent color.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for dashboards, light for minimal interfaces. |
| compact | boolean | false | Hides the Toggle Controls section and tightens spacing for embedding in smaller areas. |
| accentColor | string | "#6366f1" | Custom accent color applied to active states, pill backgrounds, and glow effects. |
When to Use
Use when you need a complete, production-ready selector system covering navigation, view switching, pagination, and multi-select patterns. Supports both dark and light themes.
Best Practices
Pair dark theme with dark-background dashboards and light theme with white/gray layouts. Use compact mode when embedding inside a settings panel or sidebar. Choose accentColor to match your brand.
Why This Component Matters
A consistent selector system unifies the interaction language across your product. These patterns cover the most common UI selection scenarios with accessible, animated, and visually distinctive components.
FAQ
QHow do the animated pills work?
The Animated Pill uses Framer Motion layoutId to animate the background between active states with spring physics — smooth and performant.
QCan I use the Chip Multi-select for filtering?
Yes — the selected state is local useState, easily lifted to a parent for filtering data or toggling categories.
QWhat does compact mode do?
It hides the Toggle Controls section and reduces padding — useful when embedding inside a sidebar, modal, or card.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.