shadcn.io is not affiliated with official shadcn/ui
Email Inbox Table Block for Radix UI
A mail inbox in a fixed window with Primary and Updates tabs showing unread counts, star toggles and attachment marks, and a reader pane that opens a message, marks it read and can mark it unread.
Installation
Overview
Read mail beside the list that holds it, with this email inbox table for React with Radix UI. Ten messages of a mail client sit in two Tabs, Primary and Updates, each with its unread count, in native tables inside a window of fixed height, and the chosen message is in a pane at the end. An unread message is bold with a dot, a Toggle stars a message and a paperclip says it has a file. Pressing a subject opens the message in the pane and marks it read; Mark unread in the pane puts it back; and "6 unread" in the top bar is counted from the messages. A polite line at the foot says what changed. Below the large breakpoint the reader replaces the list, with a Back to inbox Button that returns focus to the subject you left. It's built from native tables, Tabs, Toggle, Button and Guides. For mail clients, notification centres, message queues and any list you read one item at a time.
FAQ
How does reading and unread work?
Each message has an unread flag. Opening one clears it, Mark unread sets it again, and the counts in the tabs and the top bar are worked out from the flags on every render. An unread message is bold with a dot, and a screen reader hears "Unread" before the sender's name.
How is the open message marked?
The subject is a real button inside the row, and the open one has aria-current="true". The row also gets a muted background and a bar at its start edge, so it reads without colour. Starring does not open a message.
What happens on a phone or tablet?
Below the large breakpoint only one pane shows. Pressing a subject swaps the list for the reader and moves focus to the message's heading; Back to inbox swaps them back and focuses the subject you left. From the large breakpoint both panes show and the reader keeps the last message you opened.
How do the tabs behave?
They are the catalog's Tabs with a line style: the arrow keys move between Primary and Updates, and each panel is a table of its own messages, newest first. The unread count in each tab is part of its name. The open message stays open when you switch.
Does anything change the window's height?
No. The window has a fixed height and only the list and the message scroll, so reading, starring and switching tabs never move the page.
What stays local, and how do I wire it for real?
The messages are typed in the file and reading, starring and marking unread only change this page; nothing is sent and a reload brings the sample back. For real mail, load the messages of the open mailbox, and send the read, starred and unread changes to your mail API from the same handlers.