# Attachment

> File and image attachment with upload state and actions.

Registry name: `attachment`. HTML docs: https://ui.anuragroy.dev/component/attachment.

## Install

```bash
npx shadcn@latest add https://ui.anuragroy.dev/r/attachment.json
```

If the website is down: `npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/attachment.json`.

Registry JSON: https://ui.anuragroy.dev/r/attachment.json (GitHub: https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/attachment.json).

## Import

Import paths follow the consumer `components.json` aliases. After a default install:

```tsx
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentGroup,
  AttachmentMedia,
  AttachmentTitle
} from "@/components/ui/attachment"
```

## Usage

```tsx
import { FileText } from "lucide-react"

import {
  Attachment,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

export function Example() {
  return (
    <Attachment state="done">
      <AttachmentMedia>
        <FileText />
      </AttachmentMedia>
      <AttachmentContent>
        <AttachmentTitle>dashboard-spec.pdf</AttachmentTitle>
        <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
      </AttachmentContent>
    </Attachment>
  )
}
```

## API

### Attachment

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `state` | "idle" \| "uploading" \| "processing" \| "error" \| "done" | "done" |  |
| `size` | "default" \| "sm" \| "xs" | "default" |  |
| `orientation` | "horizontal" \| "vertical" | "horizontal" |  |

### AttachmentMedia

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | "icon" \| "image" | "icon" |  |

## See also

- [HTML page](https://ui.anuragroy.dev/component/attachment): Preview and the same docs in the site chrome.
- [Registry item](https://ui.anuragroy.dev/r/attachment.json): Source files and dependencies.
- [Catalog](https://ui.anuragroy.dev/component): All components.
- [llms.txt](https://ui.anuragroy.dev/llms.txt): Agent index for this library.