Indicator Selectors
Animated indicator selector system with 7 patterns — gradient bar, filled block, top notch, glow bar sidebar, ink spread, morphing pill nav, and raised thumb tabs. Features material-style motion, spring physics, and high-contrast active states.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| theme | "dark" | "light" | "dark" | Color theme — dark for SaaS dashboards, light for clean admin panels. |
| compact | boolean | false | Hides the Bar Indicators section and reduces padding. |
| accentColor | string | "#10b981" | Accent color for indicator bars, glow effects, and active highlights. |
When to Use
Perfect for SaaS dashboards, admin panels, app navigation, and any interface that needs clear, animated selection feedback. The Glow Bar works especially well for vertical sidebars.
Best Practices
Use the Morphing Pill for icon-only toolbars. Use the Glow Bar for vertical sidebar navigation. Use the Raised Thumb for billing/plan toggles where the OS-native feel matters.
Why This Component Matters
Indicator-based selectors make the active state undeniable — users always know where they are. The spring physics make interactions feel tactile and responsive.
FAQ
QHow does the Morphing Pill expand?
It uses Framer Motion layoutId with dynamic padding — the pill grows to accommodate the label text when active, creating a satisfying expand effect.
QCan the Glow Bar be used in a vertical sidebar?
Yes — it is designed for vertical nav. The left glow line simulates an active rail indicator common in modern app sidebars.
QWhat makes Raised Thumb different from Filled Block?
Raised Thumb simulates an OS-style segmented control with a card-lift shadow. Filled Block uses a flat accent fill. Choose based on the visual weight you need.
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.