Attachment

An Attachment typically contains an AttachmentMedia thumbnail, an AttachmentContent block with AttachmentTitle and AttachmentDescription, and an AttachmentActions slot holding one or more AttachmentAction buttons. AttachmentMedia can hold an icon, an img, or an AttachmentLabel file-type tag. During an upload, put an AttachmentProgress bar inside the content. Add an AttachmentTrigger to make the whole card clickable.

Wrap several attachments in an AttachmentGroup to render them as a single list with inset dividers. Use attachments for files in composers, chat messages and upload forms.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/attachment

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add attachment

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react class-variance-authority

2. Add the pieces it builds on: Button.

3. Copy the source into components/ui/attachment.tsx:

4. Update the import paths to match your project.

Usage

import { Attachment, AttachmentLabel, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription, AttachmentProgress, AttachmentActions, AttachmentAction, AttachmentTrigger, AttachmentGroup } 

<Attachment

Set state to reflect the file's lifecycle. idle adds a dashed border (outside a group), and error colors the description with text-destructive. The state, size and orientation values are also exposed as data-* attributes for your own styling.

AttachmentAction renders a Button with the secondary variant and an icon size by default. Pass variant="link" for a text action such as "Try Again". Icon-only actions need an aria-label.

AttachmentTrigger is an invisible button stretched over the card. Give it an aria-label, or use render to turn it into a link. Actions sit above it, so they remain separately clickable.

Examples

Sizes

Compares the default, sm and xs sizes.

States

Shows the idle, uploading, processing, error and done states.

Drop zone

Image

Uses an image thumbnail with the image media variant.

Vertical

Stacks the media above the content with orientation="vertical".

Clickable

Makes the whole card a button with AttachmentTrigger, alongside a separate download action.

Group

Combines several attachments in one AttachmentGroup list.

File types

Uses colored AttachmentLabel tags to indicate file extensions.

File list

A full-width list of separate attachment cards.

Uploaded

Marks completed uploads with a check icon in the actions slot.

API Reference

Accessibility

• AttachmentProgress wraps the progress primitive and exposes the progressbar role with aria-valuenow; give it an aria-label.
• AttachmentTrigger renders a button with type="button" by default; give it an aria-label that names the file.
• The trigger and each AttachmentAction are separate tab stops, in that order.
• The card shows a focus ring when its trigger has keyboard focus.

Notes

• Styling hooks: data-slot values such as attachment, attachment-media, attachment-content and attachment-action, plus data-state, data-size and data-orientation on the root and data-variant on the media.
• Inside AttachmentGroup, attachments fill the width, lose their own rounding and get inset top dividers.
• AttachmentLabel uses bg-primary by default; override it with a color class per file type.

Attachment is a rounded View that lays out an AttachmentMedia thumbnail, an AttachmentContent column and AttachmentActions. It comes in default, sm and xs sizes and in horizontal or vertical orientation; the vertical layout makes a tile with the actions floating over the media.

The state prop reflects the upload lifecycle: idle draws a dashed border for an empty drop slot, error turns the description red, and uploading, processing and done are passed to the parts through context. Put several attachments in an AttachmentGroup to show them as one list with hairlines between rows.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/attachment

$ pnpm dlx @esuiss/ui@latest add attachment

$ pnpm dlx @esuiss/ui@latest add attachment --platform swift