Chewypixel component
Checkbox
A checkbox that draws its check mark and squishes when pressed.
Installation
npx shadcn@latest add https://chewypixel.io/r/checkbox.jsonUsage
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
export function UpdatesOptIn() {
return (
<div className="flex items-center gap-2">
<Checkbox id="updates" defaultChecked />
<Label htmlFor="updates">Send me product updates</Label>
</div>
);
}Props
checkedThe checked state, when controlled.
boolean | "indeterminate"
defaultCheckedThe starting state, when uncontrolled.
boolean | "indeterminate" = false
onCheckedChangeCalled when the checked state changes.
(checked: boolean | "indeterminate") => void
Released under the MIT License.
More components
- 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.
- TooltipA tooltip on a frosted panel that scales in from its trigger and fades out when you move away.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.