File card

A file the agent made: type icon, a name that never hides its extension, size, preview and download, with generating and error states.

Markdown

On this page

A CSV with a preview, a PDF and a deck that is still rendering.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/file-card.json

Usage

tsx

import { FileCard } from "@/components/ui/chatcn/file-card"

<FileCard
  name="q3-revenue-by-region.csv"
  size={2184}
  href={downloadUrl}
  renderPreview={() => <CsvTable rows={rows} />}
/>

Long names truncate in the middle at a word break, so quarterly-business-revi…-final.pdf still shows what it is. The full name is in the tooltip and the accessible name.

Examples

States and compact

While generating, the icon becomes a spinner and an optional progress draws a 2 px bar along the bottom edge. Errors say what to change and offer Retry. The compact variant fits inline in a message or a composer.

Generating, progress, ready, error and the compact variant.

Props

Prop	Type	Notes
`name`	`string`	With extension. Picks the icon and the type label
`size`	`number`	Bytes. Shown as `4.2 MB` with a non-breaking space
`type`	`string`	MIME type, used when the name has no extension
`detail`	`ReactNode`	Extra meta, for example `14 pages`
`state`	`"generating" \| "ready" \| "error"`	Default `ready`
`progress`	`number`	0 to 1 while generating
`href`	`string`	Download link with the `download` attribute
`onDownload`	`() => void`	Called on download, or instead of a link
`previewUrl`	`string`	Images render inline, anything else in a sandboxed frame
`renderPreview`	`() => ReactNode`	Custom preview content for the dialog
`errorText`, `onRetry`		Shown on `error`
`variant`	`"default" \| "compact"`

Keyboard

Key	Action
`Tab`	Preview, then Download
`Enter`	Activate the focused action
`Esc`	Close the preview

Accessibility

Determinate generation is a progressbar with its value. The card is aria-busy while generating.
A polite live region announces when the file is ready or failed.
Failure pairs the red icon with words, never color alone.

Motion

The progress bar scales along its track, no layout animation.
The preview opens with the dialog motion and appears instantly from the keyboard.