# Attachment list

> Attachments with their type, size and a download action.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-file-type-7).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-file-type-7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-file-type-7-light-7858d23a5ba43161.png
- Registry item: https://reui.io/r/new-york-v4/c-file-type-7.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-file-type-7.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: `button`, `@reui/file-type`, `item`

## Files

### `c-file-type-7.tsx`

```tsx
import {
  FileType,
  getFileType,
} from "@/components/reui/file-type"

import { Button } from "@/components/ui/button"
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

type Attachment = {
  id: string
  name: string
  size: string
  /** ISO date for the time element, and the short form people read. */
  modified: string
  modifiedLabel: string
}

const ATTACHMENTS: Attachment[] = [
  {
    id: "agreement",
    name: "master-services-agreement-signed.pdf",
    size: "2.1 MB",
    modified: "2026-10-06",
    modifiedLabel: "Oct 6",
  },
  {
    id: "deck",
    name: "q3-board-deck.pptx",
    size: "18.4 MB",
    modified: "2026-10-02",
    modifiedLabel: "Oct 2",
  },
  {
    id: "forecast",
    name: "revenue-forecast-2027.xlsx",
    size: "860 KB",
    modified: "2026-09-29",
    modifiedLabel: "Sep 29",
  },
  {
    id: "brief",
    name: "launch-brief.docx",
    size: "312 KB",
    modified: "2026-09-24",
    modifiedLabel: "Sep 24",
  },
  {
    id: "demo",
    name: "product-demo.mp4",
    size: "64.2 MB",
    modified: "2026-09-18",
    modifiedLabel: "Sep 18",
  },
]

export function Pattern() {
  return (
    <ItemGroup aria-label="Attachments" className="mx-auto w-full max-w-md">
      {ATTACHMENTS.map((file) => (
        // ItemGroup is a role="list", so each row declares itself a listitem
        // or assistive tech announces an empty list.
        <Item key={file.id} role="listitem" variant="outline" size="sm">
          <ItemMedia>
            {/*
             * The light page keeps its shape against the row border, where an
             * outline page would read as a second frame. aria-hidden because
             * the visible name already ends in the extension.
             */}
            <FileType
              type={getFileType(file.name)}
              variant="light"
              aria-hidden="true"
            />
          </ItemMedia>
          {/*
           * min-w-0 lets the content shrink below the name's width, and the
           * span (not the flex title) carries the ellipsis.
           */}
          <ItemContent className="min-w-0">
            <ItemTitle className="max-w-full">
              <span className="truncate" title={file.name}>
                {file.name}
              </span>
            </ItemTitle>
            <ItemDescription>
              {file.size}
              <span
                aria-hidden="true"
                className="bg-muted-foreground/40 mx-1.5 inline-block size-1 rounded-full align-middle"
              />
              <time dateTime={file.modified}>{file.modifiedLabel}</time>
            </ItemDescription>
          </ItemContent>
          <ItemActions>
            <Button
              type="button"
              variant="ghost"
              size="icon-sm"
              aria-label={`Download ${file.name}`}
            >
              <IconPlaceholder
                lucide="DownloadIcon"
                tabler="IconDownload"
                hugeicons="Download01Icon"
                phosphor="DownloadSimpleIcon"
                remixicon="RiDownloadLine"
                aria-hidden="true"
              />
            </Button>
          </ItemActions>
        </Item>
      ))}
    </ItemGroup>
  )
}
```