Attachment

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

PreviewSource

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

sales-dashboard.pdfUploading · 64%

message-renderer.tsxTypeScript · 12 KB

Example requirements

Also uses: Spinner.

bun add --exact lucide-preact@1.51.0

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact class-variance-authority@0.7.1 cn@0.4.0 preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects attachment.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/attachment --files LICENSE.md,registry/ui/attachment.tsx,registry/ui/button.tsx,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/button/Button.tsx,registry/ui/primitives/button/index.ts,registry/ui/primitives/internals/composite/root/CompositeRootContext.ts,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useButton.ts,registry/ui/primitives/internals/useFocusableWhenDisabled.ts,registry/ui/primitives/internals/useIsoLayoutEffect.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/use-render/index.ts --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/attachment/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/attachment/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/attachment. Existing components stay in place; shared source files are updated from main.

Selected source files (23)

Usage

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

<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>

Examples

Image

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

ImageSource

Preview

Example requirements

bun add --exact lucide-preact@1.51.0

States

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

StatesSource

Preview

Example requirements

Also uses: Spinner.

bun add --exact lucide-preact@1.51.0

Sizes

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

SizesSource

Preview

Example requirements

bun add --exact lucide-preact@1.51.0

Group

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

GroupSource

Preview

Example requirements

bun add --exact lucide-preact@1.51.0

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.

TriggerSource

Preview

Example requirements

Also uses: Dialog.

bun add --exact lucide-preact@1.51.0

Reference

See the official Attachment documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source