Block Parts
File Card
A file tile with a preview, a name and details, plus optional selection, a menu and a deleted state.
Usage
Q3 report.pdf
PDF · 2.4 MB
Budget 2026.xlsx
Spreadsheet · 860 KB
Hero banner.png
Image · 1.2 MB
Installation
npm install @wunderui/reactThen import what you need:
import { FileCard, FileCardProps } from "@wunderui/react"API Reference
| Prop | Type | Default |
|---|---|---|
| name | ReactNode | — |
| meta | ReactNode | — |
| icon | ReactNode | <FileText /> |
| color | "indigo" | "blue" | "purple" | "pink" | "red" | "orange" | "yellow" | "green" | "alternative" | "red" |
| thumbnail | string | — |
| selected | boolean | — |
| onSelectedChange | (selected: boolean) => void | — |
| deletedAt | ReactNode | — |
| onMenu | () => void | — |
| onOpen | () => void | — |
| className | string | — |