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 { 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() {
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background">
<Label>
<Switch />
Marketing emails
</Label>
</div>
);
}