Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Attachment

File attachments with metadata, previews, actions and upload states.

CoreMessaging@gaudi/design-system/core/AttachmentView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Attachment } from '@gaudi/design-system/core/Attachment';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/attachment-assistant-reply.json.

Usage

import { Attachment, AttachmentMedia, AttachmentContent, AttachmentTitle, AttachmentDescription } from '@gaudi/design-system/core/Attachment';
const file = { name: 'report.pdf', type: 'application/pdf', description: 'PDF · ready to send' };
<Attachment>  <AttachmentMedia file={file} />  <AttachmentContent>    <AttachmentTitle>{file.name}</AttachmentTitle>    <AttachmentDescription>{file.description}</AttachmentDescription>  </AttachmentContent></Attachment>

Examples

Files in an assistant reply

Storybook

Composer tray with removable files

Storybook

File picker that fills a tray

Storybook

Image thumbnail strip

Storybook

API

7 props

Accessibility

Use descriptive filenames and name every icon action. Keep retry and remove actions available when an upload fails.

InputText, search, numeric and date inputs with prefix and suffix slots.11 examplesFieldField composes form label, description, error, and input building blocks.7 examplesFileUploadChoose or drop attachments with validation, upload progress and recovery actions.5 examples