Chewypixel component
Switch
A switch whose thumb springs across when toggled and stretches while pressed.
Installation
npx shadcn@latest add https://chewypixel.io/r/switch.jsonUsage
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
export function NotificationsToggle() {
return (
<div className="flex items-center gap-2">
<Switch id="notifications" defaultChecked />
<Label htmlFor="notifications">Email notifications</Label>
</div>
);
}Props
checkedThe checked state, when controlled.
boolean
defaultCheckedThe starting state, when uncontrolled.
boolean = false
onCheckedChangeCalled when the checked state changes.
(checked: boolean) => void
Released under the MIT License.
More components
- CheckboxA checkbox that draws its check mark and squishes when pressed.
- StatusA colored dot and a label for showing state, with an optional pulse.
- Animated NumberA number that counts to its new value when it changes.
- Radio GroupRadio buttons that squish when pressed, with a dot that springs in when picked.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.