Dynamic Scroll Island TOC Sub Select Toggle Cool checkbox Animated Blur Testimonials Family status indicator Squishy 3D Button Gooey Menu Swipeable sheets

SubSelectToggle

SubSelectToggle delivereth swift, animated tab & sub-tab selection with buttery-smooth spring physics and swift sub-menu reveal. Click thy pill-shaped buttons for premium magic! Simple, stylish, and sprinkled with just enough sorcery to make thy UI sing!

Installation

Understanding the Component

Tab Activation Logic

Determines which main tab is active and toggles conditional render state.

Uses tabs.findIndex to compute activeIdx.
Sets second to true when the second tab is selected.

Animation Configuration

Wraps content in MotionConfig to apply a custom spring transition.

Buttons animate color and use layoutId for shared layout transitions.
Accepts a transition prop for duration and bounce control.

Conditional Sub-menu Rendering

Expands or collapses a sub-menu overlay only on the second tab.

renderItem layers two motion.div elements with opacity, blur, and scale animations.
Renders SubMenu inside an animated black circle when second is true.

Props

Prop	Type	Default	Description
tabs	[MenuItem, MenuItem]	none	Two main toggle items.
subTabs	[MenuItem, MenuItem]	none	Sub-menu items shown when the second tab is active.
tab	MenuItem	none	Currently selected main tab.
setTab	(tab: MenuItem) => void	none	Callback to update the main tab selection.
subTab	MenuItem	none	Currently selected sub-menu tab.
setSubTab	(tab: MenuItem) => void	none	Callback to update the sub-menu selection.
transition	Transition	{ type: "spring", duration: 0.5, bounce: 0.1 }	Override for motion animation settings.

Interface - MenuItem (exported)

Prop	Type	Default	Description
label	string	none	Display text for the menu item.
value	string	none	Unique identifier for the menu item.

Gooey Menu

Simple Menu with svg gooey effect

Cool checkbox

Checkbox with animations