# Checkbox Card Select — React Checkbox Component

> Multi-select cards: a chosen card tints, its icon tile inverts and a check bubble springs into the corner while the running total rolls.

- Category: [Checkboxes & Radios](https://pixelpapa.com/components/checkboxes.md)
- Tags: checkbox, card, multi-select, addons, form
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/checkboxes/checkbox-card-select

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/checkbox-card-select
```

The file is written to `components/pixelpapa/checkbox-card-select.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/checkboxes/checkbox-card-select.

## AI prompt

```text
Add the "Checkbox Card Select" component from PixelPapa UI to this project.

What it is: Multi-select cards: a chosen card tints, its icon tile inverts and a check bubble springs into the corner while the running total rolls.
Category: Checkboxes & Radios. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/checkbox-card-select
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/checkbox-card-select.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/checkbox-card-select.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/checkbox-card-select" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More checkboxes & radios

- [Checkbox Draw Check](https://pixelpapa.com/components/checkboxes/checkbox-draw-check.md): A checkbox whose fill springs out from the centre while the tick is drawn as a single pen stroke, then erased in reverse when cleared.
- [Checkbox Indeterminate Tree](https://pixelpapa.com/components/checkboxes/checkbox-indeterminate-tree.md) (Pro): A nested checkbox tree where parents reflect their children: the mark morphs between a dash and a check, and branches fold open with animated height.
- [Checkbox Todo Strikethrough](https://pixelpapa.com/components/checkboxes/checkbox-todo-strikethrough.md): A to-do list where ticking an item draws a line through its text from left to right, then the finished item sinks to the bottom with a layout spring.
- [Radio Card Plans](https://pixelpapa.com/components/checkboxes/radio-card-plans.md): Plan cards backed by native radios: one shared selection ring glides from card to card with a spring while the radio dot pops in.
- [Radio Segmented Dots](https://pixelpapa.com/components/checkboxes/radio-segmented-dots.md) (Pro): A minimal radio group of dots on a hairline: a ringed marker bounces between them on a spring and the chosen option's name rolls in beside the label.