Attachment

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

sales-dashboard.pdfUploading · 64%

message-renderer.tsxTypeScript · 12 KB

Copy

import { IconFileCode, IconX } from "@tabler/icons-react"

import {

View Code

Installation#

pnpmnpmyarnbun
bunx --bun shadcn@latest add @ondo-ui/attachment
Copy

Usage#

Copyimport {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

Copy<Attachment>
  <AttachmentMedia>
    <FileTextIcon />
  </AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove sales-dashboard.pdf">
      <XIcon />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

Composition#

Use the following composition to build an attachment:

CopyAttachment
├── AttachmentMedia
├── AttachmentContent
│   ├── AttachmentTitle
│   └── AttachmentDescription
├── AttachmentActions
│   └── AttachmentAction
└── AttachmentTrigger

Use AttachmentGroup to lay out multiple attachments in a scrollable row:

CopyAttachmentGroup
├── Attachment
└── Attachment

Examples#

Image#

Set variant="image" on AttachmentMedia and render an <img> inside it. Use orientation="vertical" to stack the media above the content.

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

Copy

import { IconX } from "@tabler/icons-react"

import {

View Code

States#

Set state to reflect the upload lifecycle. uploading and processing shimmer the title, and error switches to a destructive treatment.

import {
  IconCheck,
  IconClock,

Sizes#

Use size to switch between default, sm, and xs.

import { IconFileText } from "@tabler/icons-react"

import {

Group#

Wrap attachments in AttachmentGroup to lay them out in a horizontally scrollable, snapping row with an edge fade.

briefing-notes.pdfPDF · 1.4 MB

workspace.pngPNG · 820 KB

customers.csvCSV · 18 KB

renderer.tsxTSX · 12 KB

Copy

import { IconFileCode, IconFileText, IconTable, IconX } from "@tabler/icons-react"
import { type FC, type SVGProps } from "react"

View Code

Trigger#

Add an AttachmentTrigger to make the whole card open a link or dialog. It fills the card behind the actions, so the actions stay clickable.

import { IconCopy, IconFileSearch, IconX } from "@tabler/icons-react"

import {

API reference#

Attachment#

The root attachment container.

AttachmentMedia#

The media slot for an icon or image preview.

AttachmentContent#

Wraps the title and description.

AttachmentTitle#

The attachment name. Shimmers while the attachment is uploading or processing.

AttachmentDescription#

Secondary metadata such as the file type, size, or upload status.

AttachmentActions#

A container for one or more actions, aligned to the end of the attachment.

AttachmentAction#

An action button. Renders a Button and accepts all of its props.

AttachmentTrigger#

A full-card overlay that activates the attachment. Renders a <button> by default.

AttachmentGroup#

Lays out attachments in a horizontally scrollable, snapping row.