Email Dashboard

A premium, fully interactive email client featuring a modern SaaS aesthetic. It includes out-of-the-box state management for reading, starring, archiving, deleting, and composing emails, alongside a fully responsive mobile drawer sidebar.

The client is fully encapsulated — hand it initialEmails and reading, starring, archiving, deleting and composing all work. Try searching for a sender, starring a message to watch it move to the Starred folder, or opening Compose.

Email dashboard

PassinitialEmails: as Email[] — each carries its own folder (inbox, sent…) plus isRead and isStarred, and the client owns every interaction from there.
color: themes the compose button, unread dots and focus rings.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Email

npx shadcn@latest add @algorize-ui/email

components/custom/blocks/Email.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Email needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Minimal

Setvariant"minimal": to strip the elevated shell for a flatter, denser mailbox.

Glass

Setvariant"glass": to frost the sidebar, list and overlays — the Compose modal included.

Liquid Glass

Setvariant"liquid-glass": for authentic liquid glass refraction using SVG displacement mapping, multi-layer specular highlights, and fluid reflections.

Features

Discover the Email interface component's layout features, including inbox listing, message preview, and responsive split panes.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`initialEmails`	`Email[]`	Required	Array of email objects to populate the client. Includes routing data like `folder` ("inbox", "sent", etc.) and state trackers like `isRead` and `isStarred`.
`variant`	`"default" \| "minimal" \| "glass"`	`"default"`	Applies overarching structural layouts, including borders, backdrop blurs, and shadows.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc" \| (hex string)`	`"primary"`	Applies global color themes to the compose button, unread notification dots, and focus rings.