Command Menu

Search documentation, components, and switch theme.

Atoms

Attachment

Displays a file or image attachment with media, metadata, upload state, and actions.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/attachment

Install the following dependencies:

npm install class-variance-authority radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentGroup,
  AttachmentMedia,
  AttachmentTitle,
} from '@/components/ui/attachment';
<Attachment>
  <AttachmentMedia>
    <FileTextIcon />
  </AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>chart-of-accounts.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 248 KB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove">
      <XIcon />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

Examples#

Image#

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

States#

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

Sizes#

Use size (default, sm, xs) to fit the attachment to its context.

Group#

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

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.

Compound Components

Compose the pieces you need:

<Attachment />Root container with size, orientation, and upload-state variants.
<AttachmentGroup />Horizontal scroller for laying out multiple attachments.
<AttachmentMedia />Media slot for an icon or image thumbnail.
<AttachmentContent />Wraps the title and description.
<AttachmentTitle />File name; shimmers while uploading or processing.
<AttachmentDescription />Secondary metadata line (type, size, progress).
<AttachmentActions />Container for action buttons.
<AttachmentAction />A single icon button action (e.g. remove or cancel).
<AttachmentTrigger />Full-surface trigger for making the attachment clickable.