Bento

Bento Planner

Pronew

A planner board running off the card, its first task lifted and tilted over the slot it left.

Today

Plan the day by hand

Pick a task up, drop it where it belongs. Status, owners and progress travel with the card.

Installation

npx shadcn@latest add @blank-pro/bento-planner

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoPlanner } from "@/components/ui/bento-planner"

<BentoPlanner
  title="Today"
  tasks={[
    {
      title: "Ship onboarding v2",
      status: "Done",
      done: true,
      comments: 8,
      subtasks: [5, 5],
    },
    {
      title: "Billing settings",
      status: "Review",
      assignees: [{ name: "Leo Park" }],
    },
    { title: "Webhooks API", status: "In progress", subtasks: [2, 7] },
  ]}
/>

The first task is the one in hand: it lifts off a dashed slot once the card is in view, and hovering the card carries it a little further. The board fills the card with as many 176px columns as fit and runs past the right edge, so it reads as a slice of a bigger plan in a narrow or a wide cell. Only done turns a badge green; every other status stays neutral.