# Attachment (https://v1.s3.dimah.dev/docs/react/ui/components/attachment)

`FileAttachment` and `StatusAttachment` are status rows built on [shadcn Attachment](https://ui.shadcn.com/docs/components/attachment).

## Preview [#preview]

<AttachmentPlaygroundPreview />

## Install [#install]

Complete [UI Setup](https://v1.s3.dimah.dev/docs/react/ui) first — stylesheet and toaster. Then
add this component:

<Tabs items={["npm package", "shadcn registry"]}>

<Tab value="npm package">

```tsx
import { FileAttachment, StatusAttachment } from "@dimah-s3/ui";
```

</Tab>

<Tab value="shadcn registry">

```npm
npx shadcn@latest add @dimah-s3/file-attachment
```

</Tab>

</Tabs>

---

## Usage [#usage]

```tsx
"use client";

import { useUpload } from "@dimah-s3/react";
import { UploadButton } from "@dimah-s3/ui";

// Don't use FileAttachment or StatusAttachment directly.
// Upload, download, and delete components already render them.

export function FileUploader() {
  const upload = useUpload({
    route: "avatar",
  });

  return <UploadButton upload={upload} />;
}
```

For custom chrome, compose [shadcn Attachment](https://ui.shadcn.com/docs/components/attachment) with the headless hooks — see [Custom UI](https://v1.s3.dimah.dev/docs/react/ui/customization/custom-ui).

---

## Props [#props]

```ts
import type { FileAttachmentProps, StatusAttachmentProps } from "@dimah-s3/ui";
```

### FileAttachment [#fileattachment]

<AutoTypeTable
  path="packages/ui/src/components/dimah-s3/attachment/file-attachment.tsx"
  name="FileAttachmentProps"
/>

### StatusAttachment [#statusattachment]

<AutoTypeTable
  path="packages/ui/src/components/dimah-s3/attachment/status-attachment.tsx"
  name="StatusAttachmentProps"
/>