A collection of file card components built with shadcn/ui and Tailwind CSS. Each card displays a recognizable format badge alongside a content preview, making it easy to communicate file types at a glance. Covers 26 formats across documents, spreadsheets, archives, code, and media — drop it into any React or Next.js project and install it directly via the shadcn CLI.
A collection of file preview cards for common file types (PDF, DOC, images, MD, PPT, video, archives, and more). Ideal for dashboards, file managers, and upload UIs with consistent visual language.
Run the command below to add the component to your project. It registers automatically with shadcn and requires no additional configuration.
npx shadcn@latest add https://urmauur.com/r/file-card.jsonThe component accepts a single prop that controls which file type is displayed.
| Prop | Type | Value |
|---|---|---|
formatFile | string | docpdfmdmdxcsvxlsxlsxtxtpptpptxziprartargzcodehtmljsjsxtsxcssjsonimgpngjpgjpegvideo |