Block PartsPro

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

bash

npm install @wunderui/react

Then import what you need:

tsx

import { FileCard, FileCardProps } from "@wunderui/react"

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	—