# File list (goodtabs UI)

Files as rows with type icon, name, size and one download action.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/file-list.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/file-list`

## Usage

```tsx
import { FileList } from "@/components/ui/file-list"

<FileList files={[{ name: "spec.pdf", size: 240000, href: "/spec.pdf" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| files | `{ name: string; size?: number; href: string }[]` |  | Name with extension, size in bytes when known, and the download link. |
| label | `string` | `"Files"` | Accessible name for the list. |

## When to use

- Attachments on a message, ticket or release
- A small set of downloads on a docs or handoff page

## When not to use

- Picking or uploading files: use file-drop
- Hundreds of files with sorting: use a table

## Notes for agents

- One action per row by design: a download link with an icon-only button look and an aria-label
- Size is bytes in, decimal units out (1 kB is 1000 bytes); with no size the row shows the type alone
- The icon comes from the extension; unknown extensions get a plain file icon
- Server component; the link is a real anchor with the download attribute

Docs: https://ui.goodtabs.co/components/file-list