How do I install the Vibe UI Toggle component?

You can install Toggle into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add toggle" in your terminal.

Does Vibe UI Toggle support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

A two-state button component that can be pressed or active, designed to capture boolean actions.

A two-state button component that can be pressed or active, designed to capture boolean actions.

pnpm dlx vibe-ui-kit@latest add toggle

Vibe UI's Toggle component supports multiple visual style presets to match your application's theme:

A row of border-less or circular shape variations for toggles containing only symbols:

Prop	Type	Default	Description
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual theme preset style of the Toggle control.
size	'default' \| 'sm' \| 'lg'	'default'	The button size variation.
pressed	boolean	undefined	The controlled active state of the button.
onPressedChange	(pressed: boolean) => void	undefined	Event handler triggered when the active state changes.