Bento

Bento Templates

Pronew

A template picker where the option under the cursor lifts, with a window peeking out behind.

Start from a template

Pick a layout that already works and send your first notification in minutes, not sprints.

Installation

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

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

Usage

import { BentoTemplates } from "@/components/ui/bento-templates"

<BentoTemplates
  title="Choose a template"
  description="Start from a layout and edit the copy"
  active={1}
  items={[
    { label: "In-app message", icon: <MessageSquareIcon /> },
    { label: "Email digest", icon: <MailIcon /> },
    { label: "Push alert", icon: <BellIcon /> },
  ]}
/>

The cursor arrives at active and the option lifts toward it. Hovering the card lifts it a little more and slides the window behind into view, the page the template is about to fill.