We are live on DevHunt: tool of the week contest

check it out

Checkbox

A high-fidelity checkbox with multiple animation variants and sizes.

Preview

Interactive Preview
Animation Variants
Sizes

Installation

Usage

tsx
import { Checkbox } from "@/components/ui/checkbox"

export default function Demo() {
  return (
    <div className="flex flex-col gap-4">
      <Checkbox label="Accept terms" variant="bounce" />
      <Checkbox label="Marketing emails" variant="reveal" size="sm" />
    </div>
  )
}

Dependencies

framer-motion

Props

PropTypeDefault
labelstring-
size
"sm""md""lg"
md
variant
"bounce""scale""reveal"
bounce