How do I install the Vibe UI Switch component?

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

Does Vibe UI Switch support Tailwind CSS v4?

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

Is the Vibe UI Switch component accessible?

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

Vibe UI

Initializing Vibe UI System...

Vibe UI

Switch

A control that allows the user to toggle between checked and unchecked states.

Switch

A control that allows the user to toggle between checked and unchecked states.

Preview

Airplane Mode

Installation

pnpm dlx vibe-ui-kit@latest add switch label

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: label

Preset Variations

Explore the visual design presets of the Switch, including Default, Glassmorphic, Retro Neobrutalist, Neon Glow, and Cyberpunk terminal toggle variants.

Advanced Features

Combine Switch presets inside form card lists, notification settings panels, and configure disabled states.

Notification Preferences

Choose what updates you want to receive.

Security Alerts

Get notified about suspicious logins.

Weekly Digest

Receive weekly stats and highlights.

Disabled Off

Disabled On

Props

Switch

Prop	Type	Default	Description
variant	'default' \| 'glass' \| 'retro' \| 'glow' \| 'cyberpunk'	'default'	The visual design style variant preset of the switch container track and thumb slider.

PreviousSpinner

Next Table