Switch

Component

About

Switch in three sizes on the control scale for settings that apply at once, named by its Field row. Part of the Layro System: layro.vercel.app.

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

Code

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

Usage.tsx

import * as React from "react";
import { Field, Switch } from "@/components/ui/layro-switch";

/* Settings that apply the moment you flip them. Three sizes on the
   control scale; inside a Field the row label names the switch. */

export default function SwitchDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 400 }}>
        <h2 className="text-[16px] font-semibold tracking-[-0.01em]">Notifications</h2>
        <div className="mb-5" />
        <div className="grid gap-4">
          <Field label="Notify the team when someone joins" inline><Switch defaultChecked /></Field>
          <Field label="Weekly usage digest" inline hint="Every Monday at 9:00"><Switch defaultChecked /></Field>
          <Field label="Require two-step sign-in" inline hint="For everyone in the workspace"><Switch /></Field>
          <div className="flex items-center gap-3 border-t border-border pt-4">
            <Switch size="sm" aria-label="Small switch" defaultChecked />
            <Switch aria-label="Medium switch" defaultChecked />
            <Switch size="lg" aria-label="Large switch" defaultChecked />
            <Switch disabled aria-label="Disabled switch" />
          </div>
        </div>
      </div>
    </div>
  );
}