# List + detail

> An inbox-style split view — a selectable message list beside a detail pane with archive and delete actions.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/list-detail).

- Page, with a live preview: https://shadcn.exchange/r/quill/list-detail
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/list-detail-light-9ca1c9003a3a0b82.png
- Registry item: https://www.quilldesignsystem.com/r/list-detail.json
- Categories: messaging, app-shell
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/list-detail.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `badge`, `button`, `separator`, `https://www.quilldesignsystem.com/r/icon.json`

## Notes from the registry

An inbox-style split view — a selectable message list beside a detail pane with archive and delete actions. Do: Keep the selected thread visually marked in the list (background fill) while its detail is open, so context isn't lost. Don't: Let the list's selection state go stale or unmarked once a thread is open in the detail pane. Use mail-shell when you need a fuller mail client — search, reply composer, forward — not just list-and-read. Use chat when the conversation is a live back-and-forth thread, not discrete messages you select and read one at a time.

## Files

### `registry/blocks/list-detail.tsx`

```tsx
import { Icon } from '@/components/ui/icon'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'

const threads = [
  { from: 'Grace Hopper', subject: 'Re: Q3 roadmap', preview: 'Looks great — one note on timing…', time: '9:41', active: true },
  { from: 'Alan Turing', subject: 'Deploy window', preview: 'Can we push to Thursday?', time: '8:02' },
  { from: 'Katherine J.', subject: 'Design review', preview: 'Left comments on the flows.', time: 'Yesterday' },
]

/** An inbox-style split view — a selectable message list beside a detail pane with archive and delete actions. */
export function ListDetail() {
  return (
    <div className="flex h-[520px] w-full bg-background text-foreground">
      <div className="flex w-72 shrink-0 flex-col border-r border-border">
        <div className="flex items-center justify-between px-4 py-3">
          <span className="font-medium">Inbox</span>
          <Badge variant="secondary">3</Badge>
        </div>
        <Separator />
        <ul className="flex flex-col overflow-auto">
          {threads.map((t) => (
            <li key={t.subject}>
              <button
                className={`flex w-full flex-col gap-0.5 border-b border-border px-4 py-3 text-left transition-colors hover:bg-accent outline-hidden focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring/50 ${
                  t.active ? 'bg-accent' : ''
                }`}
              >
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">{t.from}</span>
                  <span className="text-xs text-muted-foreground">{t.time}</span>
                </div>
                <span className="text-sm text-foreground">{t.subject}</span>
                <span className="truncate text-xs text-muted-foreground">{t.preview}</span>
              </button>
            </li>
          ))}
        </ul>
      </div>
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="flex items-center justify-between px-6 py-4">
          <div className="flex flex-col">
            <span className="text-lg font-medium">Re: Q3 roadmap</span>
            <span className="text-sm text-muted-foreground">Grace Hopper · 9:41 AM</span>
          </div>
          <div className="flex gap-2">
            <Button variant="ghost" size="icon" aria-label="Archive">
              <Icon name="folder_open" size={18} />
            </Button>
            <Button variant="ghost" size="icon" aria-label="Delete">
              <Icon name="delete" size={18} />
            </Button>
          </div>
        </div>
        <Separator />
        <div className="flex flex-col gap-4 overflow-auto p-6 text-sm leading-relaxed text-foreground">
          <p>Hi Ada,</p>
          <p>
            Looks great — one note on timing: can we align the beta with the marketing push in week 6?
            That gives us room to bake in the feedback from the design review.
          </p>
          <p>Thanks, Grace</p>
        </div>
      </div>
    </div>
  )
}
```