Switch

Overview

The Switch component is a toggleable form control built on top of Radix UI's Switch Primitive, enhanced with beautiful animations using Framer Motion. It provides a user-friendly way to toggle between two states with smooth transitions and various visual styles.

Preview

Preview

Code

import { Switch } from './components/ui';

function SwitchDemo() {
  return (
    <div className="flex items-center gap-4">
      <Switch defaultChecked />
      <Switch />
      <Switch variant="large" defaultChecked />
      <Switch variant="small" defaultChecked />
    </div>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add switch

yarn

yarn @mindfiredigital/ignix-ui add switch

pnpm

pnpm @mindfiredigital/ignix-ui add switch

Usage

Import the component:

import { Switch } from './components/ui';

Basic Usage

function BasicSwitch() {
  return <Switch defaultChecked />;
}

Variants

Preview

Code

<Switch variant="default" animation="default" defaultChecked />