Inbox 4 - Bulk select and archivePro

A dense message list with row checkboxes, a select-all header and a contextual bulk action bar to archive, mark read or delete several messages at once with undo. Use it for email, feedback or lead inboxes where triage happens in batches.

About Inbox 4

A dense message list with row checkboxes, a select-all header and a contextual bulk action bar to archive, mark read or delete several messages at once with undo. Use it for email, feedback or lead inboxes where triage happens in batches.

Inbox 4 is a inbox block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 113 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • inbox
  • bulk-actions
  • checkbox
  • archive
  • triage
  • list

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add inbox-04

Dependencies installed automatically: lucide-react, motion.

Uses: button, checkbox, reveal, use-reduced-motion, utils.

Usage

import Inbox04 from "@/components/blocks/inbox-04"

export default function Page() {
  return <Inbox04 />
}

FAQ