FilePreview
Compact file, code, and media thumbnails for file attachment metadata.
PDFZIPHTMLIMGMP4
import {
FilePreview,
FilePreviewBadge,
FilePreviewDocument,
} from "raft-ui";
<FilePreview>
<FilePreviewDocument />
<FilePreviewBadge type="pdf">PDF</FilePreviewBadge>
</FilePreview>Prefer type for semantic kinds (pdf, zip, …). It maps onto badge color. Use color only when you need a one-off that is not in the type map — the two props are mutually exclusive.
PDFDOCXTXT
ZIPHTMLIMG
FilePreviewMedia owns the frame, crop, and rounding. Supply an image, video, SVG, or other preview through children.
PNGMP4JPG
API#WIP
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Preview root and positioning context for the visual part and badge. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Document-sheet illustration. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Archive/file illustration. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Code-file illustration. |
| Prop | Type | Default | Description |
|---|---|---|---|
...props | span props | — | Cropped media frame. Pass image, video, SVG, or other decorative preview content as children; image and video thumbnails typically use size-full object-cover. |
| Prop | Type | Default | Description |
|---|---|---|---|
type | "pdf" | "zip" | "docx" | "img" | "mp4" | … | — | Semantic file kind. Maps onto badge color (e.g. pdf→rose, zip→amber). Mutually exclusive with color. |
color | "rose" | "blue" | "amber" | "emerald" | "violet" | "neutral" | "rose" | Direct badge color. Mutually exclusive with type; omit both to keep the rose default. |
...props | useRender.ComponentProps<"span"> | — | Format label such as PDF or TXT. Render it beside the visual part. |