Components
Loading preview...
A toggle switch component built on Base UI Switch with animated thumb.
npx shadcn@latest add https://21st.dev/r/coss.com/switch"use client";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { cn } from "@/lib/utils";
import type React from "react";
import { useId } from "react";
import { Switch } from "@/components/ui/component";
function Label({ className, render, ...props }: useRender.ComponentProps<"label">): React.ReactElement {
return useRender({
defaultTagName: "label",
props: mergeProps<"label">({ className: cn("inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground sm:text-sm/4", className), "data-slot": "label" }, props),
render,
});
}
export default function Particle() {
const id = useId();
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<Label
className="flex items-center gap-6 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50"
htmlFor={id}
>
<div className="flex flex-col gap-1">
<p>Enable notifications</p>
<p className="text-muted-foreground text-xs">
You can enable or disable notifications at any time.
</p>
</div>
<Switch
className="[--thumb-size:--spacing(4)] sm:[--thumb-size:--spacing(3)]"
defaultChecked
id={id}
/>
</Label>
</div>
);
}