Components
Loading preview...
A checkbox group with proximity hover, animated checkmarks, contiguous selection merging, and spring transitions. Built on Radix UI with Framer Motion.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/checkbox-group"use client";
import { useState } from "react";
import { CheckboxGroup, CheckboxItem } from "../components/ui/checkbox-group";
const items = ["Design System", "Components", "Animation", "Accessibility", "Documentation"];
export default function CheckboxGroupDemo() {
const [checked, setChecked] = useState<Set<number>>(new Set([0, 2]));
const toggle = (index: number) => {
setChecked((prev) => {
const next = new Set(prev);
if (next.has(index)) next.delete(index);
else next.add(index);
return next;
});
};
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<CheckboxGroup checkedIndices={checked} className="w-80">
{items.map((item, i) => (
<CheckboxItem key={item} label={item} index={i} checked={checked.has(i)} onToggle={() => toggle(i)} />
))}
</CheckboxGroup>
</div>
);
}