File Card

Compact component used to display file information along with actions. Commonly used in upload previews, file managers, or shared document views. Supports 6 file format types, 3 sizes, and optional download/remove actions.

File Card Playground

Preview

Code

Sample file.pdf

412 KB

Controls

Size:

Small

Default

Large

Format:

General

PDF

ZIP

Figma

Doc

Sheet

Download:

Remove:

Installation

You can add the file card component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @react-aria/interactions

Copy and paste the following code into your project.

FileCard.tsx

index.ts

cn.ts

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { FileCard } from '@versaui/ui/components/FileCard';

// Default file card
<FileCard fileName="Document.pdf" fileSize="412 KB" />

// PDF format
<FileCard format="pdf" fileName="Report.pdf" fileSize="2.1 MB" />

// Large ZIP file
<FileCard size="large" format="zip" fileName="Archive.zip" fileSize="15 MB" />

Variants

Size

Three sizes are available — small, default, and large:

<FileCard size="small" fileName="Small.pdf" fileSize="412 KB" />
<FileCard size="default" fileName="Default.pdf" fileSize="412 KB" />
<FileCard size="large" fileName="Large.pdf" fileSize="412 KB" />

Format

Six file formats determine the icon and color scheme:

<FileCard format="general" fileName="file.jam" fileSize="3.2 MB" />
<FileCard format="pdf" fileName="file.pdf" fileSize="412 KB" />
<FileCard format="zip" fileName="file.zip" fileSize="2.4 MB" />
<FileCard format="figma" fileName="file.fig" fileSize="3.2 MB" />
<FileCard format="document" fileName="file.docx" fileSize="136.2 KB" />
<FileCard format="spreadsheet" fileName="file.xlsx" fileSize="136.2 KB" />

Actions

Control download and remove buttons independently:

// Both actions
<FileCard downloadable removable />

// Download only
<FileCard downloadable removable={false} />

// No actions
<FileCard downloadable={false} removable={false} />

Accessibility

Uses role="listitem" with automatic aria-label combining file name and size
Action buttons have descriptive aria-label attributes
File icons are decorative and hidden from screen readers

File Card Props

Prop	Type	Default	Description
`size`	`'small' \| 'default' \| 'large'`	`'default'`	Size variant controlling height, icon size, and typography.
`format`	`'general' \| 'pdf' \| 'zip' \| 'figma' \| 'document' \| 'spreadsheet'`	`'general'`	File format determining the icon and color scheme.
`fileName`	`string`	`'Sample file'`	File name to display.
`fileSize`	`string`	`'3.2 MB'`	File size text to display.
`downloadable`	`boolean`	`true`	Show the download button.
`removable`	`boolean`	`true`	Show the remove (×) button.
`icon`	`ReactNode`	`—`	Custom icon overriding the format default.
`onDownload`	`() => void`	`—`	Download button click handler.
`onRemove`	`() => void`	`—`	Remove button click handler.
`className`	`string`	`''`	Additional CSS classes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page