Shadcn File Type: Format Colors, Variants, Sizes and MIME Types

Browse 14 shadcn file type icon components: 99 extensions in brand and family colors, outline, solid, light and mono variants, and 6 sizes from 18px to 56px.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Attachment lists, upload queues and file browser rows, each icon resolved from a name or MIME type
Export format pickers and legends of the formats a product accepts or produces
Version tags, document codes and marks such as a lock or star drawn on a document

When not to use

A drop zone or picker that collects documents before they are sent: use the File Upload component
Documents carried by a chat message as chips with idle, uploading and error states: use the Attachment component
A complete drive page with a folder tree, list and grid views and bulk actions: use the Files blocks

Agent notes

type takes an extension, not a file name: report.pdf passed straight in draws a neutral page labeled REPORT.PDF, so run names through getFileType
FileType is not focusable and has no keyboard behavior, so an action goes on a wrapping Button or link with its own accessible name

Markdownhttps://reui.io/components/file-type.md

MCPget_component("file-type")

Installnpx shadcn@latest add @reui/file-type

Full index for agents:llms.txtReUI MCP setup

Shadcn File Type: Show What a File Is at a Glance

ReUI File Type is a custom shadcn component that draws the icon for a file format: a page with a folded corner and the extension in a colored band. Each format takes its brand color, PDF in orange, Word in blue, Excel in green and PowerPoint in red, else its family's color, and formats with neither, such as ZIP or TXT, are grey.

It knows 99 extensions in 11 families, from documents, spreadsheets and code to archives, design files, applications and fonts, plus a folder and a blank page for things with no extension. getFileType turns a file name, a path, a URL or a MIME type into a type, so an upload or an API row maps to an icon without a lookup table of your own.

The examples cover the places a file icon actually lands: an attachment list, an upload queue resolved from MIME types, the rows of a sortable data grid and an export format picker. Others show custom labels such as version tags, custom colors, a lock or star in place of the label, restyled labels, and what an unknown extension falls back to.

What is Shadcn File Type?

A file type icon tells a reader what a file is before they read its name, so an orange PDF, a green XLSX and a yellow PNG sort themselves in a long list. Shadcn File Type is 1 component and 2 helpers: FileType renders a span with role img, an inline SVG page and the extension as text in a band that overhangs the page's left edge.

A type is an extension such as pdf or .docx, matched in any case, or a family name such as image or folder, which draws the family glyph with no label. Any other text renders as a neutral grey file with that text in upper case, so an extension the table does not know still reads correctly.

Sizes, labels and glyphs

6 preset sizes run from mini at 18px, made for data grid rows, to xl at 56px, and every size draws the same page and label band. A Tailwind size class such as size-20 or size-full sets any other size, and the label, its corners and the stroke are measured against the box, so they scale with it.

label replaces the extension with your own text, such as a version tag or a document code, and that text shrinks only when its characters would run past the band. glyph shows the family glyph in place of the label, as does an empty label or a family type such as image.

Shadcn File Type Features

Brand and family colors. PDF orange, Word blue, Excel green, PowerPoint red and JPG violet; a format with no brand color takes its family's, and archives, plain text and fonts are grey. Every color is the 600 step, so the set reads as one palette.
Outline, solid, light and mono. Outline draws the page as a grey outline under a colored label and is the default, solid fills the page with the type color and sets the label on it with no badge, and light sits on a soft grey page, and mono draws every type in the theme gray.
The same design at every size. From mini at 18px to xl at 56px, every size draws the page and the label band, and a Tailwind size class such as size-20 scales the label and the stroke with the box.
Resolve any file reference. getFileType reads a file name, a path, a URL with a query or hash, a bare extension or a MIME type. A trailing slash returns folder, and a name with no extension such as README returns empty.
Families for grouping. getFileTypeCategory returns the family of any type, so a file list can group or filter documents, images or archives with the same table the icons use.
Custom labels, icons and colors. label puts a version tag or a document code in the band, icon draws a lock or a star on the page in its place, labelClassName restyles the label badge, and a single text color class on the root recolors the type.
CSS variables. --file-type-stroke sets the line width, --file-type-border the page outline, --file-type-fill the solid page, --file-type-foreground the label text and --file-type-radius the label corners, all on the root.
Server-ready. FileType has no state, effects or event handlers, so it renders in a React server component, and getFileType is a pure function you can call while rendering.

Accessibility and dark mode

The root is a span with role img and a name for its type, such as PDF file, Spreadsheet or Folder, and a custom text label joins that name, so a DOCX labeled V3 reads as V3, DOCX file. When the file name already sits beside the icon, as in a list row, pass aria-hidden so a screen reader does not hear the type twice, as the list examples do.

In dark mode the glyph in outline and light is mixed 30% toward white, because a 1px line in a 600 shade sits near 3:1 on a near-black page, while the label keeps the shade its white text needs. The stroke stays 1px up to 40px and grows in proportion above it, and the label band follows the style, square in Lyra and Sera and a pill in Maia, Luma and Rhea.

In a file list, put the icon in the media slot of Shadcn Item or Shadcn Attachment, with the name and size beside it. In a table, a mini icon sits in a Shadcn Data Grid row next to the file name, as the file browser example shows.

For uploads, pair it with Shadcn File Upload for the drop zone and Shadcn Progress for each row, resolving every icon from its file. Shadcn Icon Tile stays the right choice for an icon that is not a file, such as a setting or a feature.

The Files blocks are the assembled version of a file manager, 1 Pro layout with a folder tree, list and grid views and bulk selection. The File Type docs list every prop, helper and CSS variable.

Files Blocks in ReUI Pro

The free examples above pair with 1 production ready files block in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Files (1 block)File explorer, folder browsing, sharing, and storage management pages.

Browse all Solutions blocks

Frequently Asked Questions

How is this different from Icon Tile or a file icon from an icon set?

Icon Tile is a colored surface for any icon, and an icon set draws a generic page per family with no extension on it. File Type draws the file itself, a page with the extension in its format's color, so a PDF and a DOCX look different at a glance, and getFileType picks the type from the file name for you.

How do I show the icon for an uploaded file?

Pass the File's name or its type, the MIME type, to getFileType and hand the result to type. The name is the safer input: a browser leaves the MIME type empty for formats the operating system does not recognize, and getFileType returns empty for an empty or generic MIME type such as application/octet-stream.

What happens with an extension it does not know?

It renders a neutral grey page with that extension in upper case as the label, so an .epub or a .heif file still reads correctly. getFileType returns the extension as it is, and getFileTypeCategory reports it as file, so you can catch it in code.

Can I change the colors?

Yes. The type color is the root's text color, so a single class such as text-teal-700 recolors a type, and --file-type-foreground changes the label text from white. To recolor a format everywhere, wrap FileType in a component of your own that maps the type to a class. The mono variant draws every type in the theme's gray instead.

Can I use a size the presets do not cover?

Yes. Pass a Tailwind size class such as size-20, size-[72px] or size-full, and it replaces the preset box. The label, its padding and corners, and the stroke are measured against the rendered box, so a custom size draws the same design as the presets.

Is the label readable at 18px?

On a sharp screen, yes. Up to 20px the label band grows and its text turns semibold at 5.8px, so PDF or MP3 can be read in a table row, while the format color carries the type at a glance. Keep the file name beside the icon for the full extension, or pass glyph to show the family glyph instead.

How do I show a folder or a file with no extension?

Pass folder as the type, or give getFileType a path that ends in a slash and it returns folder. A file with no extension, such as README or .env, resolves to empty, a blank page named File.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.