Saurabh

Beui Switch

Forms 40

About

This is Switch component.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Beui Switch to your project and fits it to your theme.

Code

How Beui Switch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import { Switch } from "@/components/ui/beui-switch";

export default function SwitchPreview() {
  const [on, setOn] = useState(true);
  return (
    <div className="flex flex-col gap-3">
      <Switch checked={on} onCheckedChange={setOn} label="Enable notifications" />
      <Switch checked={false} onCheckedChange={() => {}} label="Off" />
      <Switch checked disabled onCheckedChange={() => {}} label="Disabled" />
    </div>
  );
}

Dependencies

More by Saurabh

View all
  • BeUI Tilt Card

    BeUI Tilt Card

    375
  • BeUI Expandable Tabs

    BeUI Expandable Tabs

    353
  • BeUI File Upload

    BeUI File Upload

    297
  • Animated Sidebar

    Animated Sidebar

    213
  • BeUI Bouncy Accordion

    BeUI Bouncy Accordion

    208
  • BeUI Create Menu

    BeUI Create Menu

    200
  • BeUI Expanable Action Bar

    BeUI Expanable Action Bar

    196
  • Loader

    Loader

    190

More in Forms

View all
  • Premium Auth

    Premium Auth

    525
  • Contact Card

    Contact Card

    1K
  • Login 2

    Login 2

    8
  • Card Studio

    Card Studio

    41
  • Form

    Form

    16
  • Book A Demo 1

    Book A Demo 1

    74
  • HeroUI Field Error

    HeroUI Field Error

    10
  • Book A Demo 3

    Book A Demo 3

    90