# File
URL: /docs/ui/file

Display file message parts with icon, name, size, and download button.

import { FileSample } from "@/components/docs/samples/file";

<FileSample />

Getting Started \[#getting-started]

<Steps>
  <Step>
    Add file \[#add-file]

    <InstallCommand shadcn={["file"]} />
  </Step>

  <Step>
    Use in your application \[#use-in-your-application]

    Pass `File` to `MessagePrimitive.Parts`:

    ```tsx title="/components/assistant-ui/thread.tsx" {1,8}
    import { File } from "@/components/assistant-ui/file";

    const AssistantMessage: FC = () => {
      return (
        <MessagePrimitive.Root className="...">
          <MessagePrimitive.Parts
            components={{
              File,
            }}
          />
        </MessagePrimitive.Root>
      );
    };
    ```
  </Step>
</Steps>

Variants \[#variants]

Use the `variant` prop to change the visual style.

```tsx
<File.Root variant="outline" /> // Border (default)
<File.Root variant="ghost" />   // No border
<File.Root variant="muted" />   // Background fill
```

Sizes \[#sizes]

Use the `size` prop to change padding and font size.

```tsx
<File.Root size="sm" />      // Compact
<File.Root size="default" /> // Default
<File.Root size="lg" />      // Larger
```

MimeType Icons \[#mimetype-icons]

The component automatically selects an appropriate icon based on the file's MIME type:

| MIME Type          | Icon         |
| ------------------ | ------------ |
| `image/*`          | ImageIcon    |
| `application/pdf`  | FileTextIcon |
| `application/json` | BracesIcon   |
| `text/*`           | FileTextIcon |
| `audio/*`          | MusicIcon    |
| `video/*`          | VideoIcon    |
| fallback           | FileIcon     |

API Reference \[#api-reference]

Composable API \[#composable-api]

The component exports composable sub-components:

```tsx
import {
  File,
  FileRoot,
  FileIconDisplay,
  FileName,
  FileSize,
  FileDownload,
} from "@/components/assistant-ui/file";

<FileRoot variant="muted" size="lg">
  <FileIconDisplay mimeType="application/pdf" />
  <div className="flex flex-col gap-0.5">
    <FileName>report.pdf</FileName>
    <FileSize bytes={2048} className="text-xs" />
  </div>
  <FileDownload
    data="SGVsbG8gV29ybGQh"
    mimeType="application/pdf"
    filename="report.pdf"
  />
</FileRoot>
```

| Component       | Description                                     |
| --------------- | ----------------------------------------------- |
| `File`          | Default export, renders complete file part      |
| `File.Root`     | Container with variant and size styling         |
| `File.Icon`     | MIME type-aware icon, or pass custom `children` |
| `File.Name`     | Truncated filename                              |
| `File.Size`     | Human-readable file size                        |
| `File.Download` | Download link button                            |

Custom Icon \[#custom-icon]

Pass `children` to `File.Icon` to override the default MIME type icon:

```tsx
<File.Icon>
  <MyCustomIcon className="size-5" />
</File.Icon>
```

Utilities \[#utilities]

The component also exports utility functions:

```tsx
import {
  getMimeTypeIcon,
  getBase64Size,
  formatFileSize,
} from "@/components/assistant-ui/file";

// Get icon component for a MIME type
const Icon = getMimeTypeIcon("application/pdf"); // FileTextIcon

// Calculate size from base64 string
const bytes = getBase64Size("SGVsbG8gV29ybGQh"); // 12

// Format bytes to human-readable
const size = formatFileSize(2048); // "2.0 KB"
```

Related Components \[#related-components]

* [Image](/docs/ui/image) - Image message parts
* [Attachment](/docs/ui/attachment) - File attachments in composer and messages