File Card
Compact component used to display file information along with actions. Commonly used in upload previews, file managers, or shared document views.
File Card Playground
File Card Playground
Preview
Code
Sample file.pdf
412 KB
Controls
Icon Style:
Simple
Expressive
Size:
Small
Medium
Large
Format:
General
PDF
ZIP
Figma
Doc
Sheet
Download:
Remove:
Installation
You can add the file card component to your project manually:
1
Install the following dependencies:
npm
pnpm
yarn
bun
npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react @react-aria/interactions @react-aria/focus2
Copy and paste the following code into your project.
FileCard.tsx
Button.tsx
Loader.tsx
Material.tsx
ContainedIcon.tsx
index.ts
cn.ts
Loading source code...
3
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 (medium)
<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
Icon Style
Two visual styles are available for the contained icon — simple (solid fill and border) and expressive (gradient with inset shadow and duotone icon):
<FileCard iconStyle="simple" format="pdf" fileName="Document.pdf" fileSize="412 KB" />
<FileCard iconStyle="expressive" format="pdf" fileName="Document.pdf" fileSize="412 KB" />Size
Three sizes are available — small, medium, and large:
<FileCard size="small" fileName="Small.pdf" fileSize="412 KB" />
<FileCard size="medium" fileName="Medium.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 automaticaria-labelcombining file name and size - Action buttons have descriptive
aria-labelattributes - File icons are decorative and hidden from screen readers
File Card Props
| Prop | Type | Default | Description |
|---|---|---|---|
iconStyle | 'simple' | 'expressive' | 'simple' | Visual style treatment for the contained icon container. |
size | 'small' | 'medium' | 'large' | 'medium' | Size variant controlling height, icon size, and typography. |
format | 'general' | 'pdf' | 'zip' | 'figma' | 'document' | 'spreadsheet' | 'general' | File format determining the icon and semantic color role. |
iconCornerRadiusType | 'default' | 'control' | 'full' | 'full' | Corner radius type for the contained icon container. |
iconCornerRadius | string | 'var(--corner-radius-default-fully-rounded)' | Explicit corner-radius override for the contained icon. |
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. |