Switch
A control that indicates whether a setting is on or off.
Switch wraps Base UI's Switch.Root with a built-in thumb whose size is
controlled by the --thumb-size CSS variable.
Installation
npx shadcn@latest add @kosori/switchExample
switch-example.tsx
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
const SwitchExample = () => (
<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='kosori-notifications'
>
<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 defaultChecked id='kosori-notifications' />
</Label>
);
export default SwitchExample;
Usage
import { Switch } from '@/components/ui/switch';
const SwitchDemo = () => <Switch defaultChecked />;