Bento

Bento Checklist

new

A cascade of checks that tick one by one, the latest lifting off the stack.

Types check

Tests passed

Code reviewed

Preview approved

Deploy with confidence

Every pull request runs the same checks, so what merges is what you meant to ship.

Installation

npx shadcn@latest add @blank/bento-checklist

Usage

import { BentoChecklist } from "@/components/ui/bento-checklist"

<BentoChecklist
  items={[
    { label: "Tests passed", done: true },
    { label: "Preview approved" },
  ]}
/>

The checks tick in order once half of the list is in view, and the latest one lifts. An item without done stays open, so the cascade stops where the work does. The fill follows --bento-light on the card, so a card tinted [--bento-light:var(--success-primary)] ticks green.