Switches

  • 1

    As mentioned in the Setup tab, some of our components follow Shadcn UI, with differences done on top of these components, namely a wider range of variants and functionality, all the while keeping the deep customization options open. You can get started by installing the component from

  • 2

    To have access to our features copy the code in the block below and replace the existing code in the generated component file in your project, which by default is components/ui/switch.tsx

  • 3

    Make sure to adjust any necessary imports and styles to fit your setup, preference and needs.

Examples

  • Simple

    Disabled
  • Labeled

  • Sizes

    Small
    Medium
    Large
  • Tones

    Success
    Warning
    Destructive
    Info
  • Dark Mode

Combos