Segmented Selector
Classic premium segmented selector with animated background indicator. Features spring physics, glowing active state, and icon support with responsive labels.
When to Use
Excellent for dashboard settings, theme toggles, and Next.js applications that want a classic premium 'Segmented' aesthetic. Use this selector to provide clear, tactile feedback during mode switching.
Best Practices
Maintain consistent spacing within your design system by keeping the segments balanced. Follow React best practices by pairing this with sharp, technical typography. Optimize for performance by using efficient layout-id transitions.
Why This Component Matters
Segmented selectors communicate digital excellence, precision, and modern craft. This production-ready UI template helpsคุณ build an interface that feels responsive and organized, adding a unique 'Moving' signature to your settings panel.
FAQ
QHow does the indicator move?
The component uses localized x-offsets and layout-id transitions to move the active background between segments, creating a high-fidelity 'opening' effect.
QCan I adjust the speed?
Absolutely, you can customize the Framer Motion transition properties to adjust both the damping and stiffness of the background animation.
QIs it mobile responsive?
The segments and typographic scales adapt for mobile, ensuring the toggle remains impactful and structural on small screens.
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.