File Format

Description

FileFormat renders a single <svg> shaped like a page with a folded corner. Pass a format string ("PDF", "XLSX", "MP4") and it prints that label, picks a matching glyph, and tints itself with a brand color. It is one self-contained element, not a compound component.

Reach for it wherever a file needs a recognizable type marker: rows in a file list, items in an upload queue, attachment chips in a message, or the thumbnail on a download card. Sizing is driven entirely by className, so the same component works at size-8 in a dense table and size-24 on a card. Everything inside scales with the box.

For a generic status or count pill, use Badge. For a person or entity image, use Avatar. For the drop target that accepts files in the first place, use Dropzone or File Upload. FileFormat is the passive marker, not an interactive control.

FileFormat is a Create UI Pro component. Install it with a Pro seat.

Installation

pnpm dlx @create-ui/cli add file-format

Usage

import { FileFormat } from "@/components/ui/file-format"

<FileFormat format="PDF" />

Examples

Every example is a Pro preview (marked with a Pro badge). The API is the same across them; only the props change.

Variants

variant combines a color family with a fill tone. colorful-solid and colorful-soft use the format's brand color; neutral-solid and neutral-soft drop to the theme's grays for a quieter look in dense lists.

Appearance

appearance sets the fill weight. filled paints the whole page in the color; outline keeps the page transparent and colors only the border, glyph, and label.

Sizes

There is no size prop. Set the footprint with className (size-8, size-16, size-24) and the label, glyph, folded corner, and border all scale proportionally.

Formats

Common formats are recognized out of the box: passing format looks up both the glyph and the brand color, so "HTML", "JSON", "MP4", and dozens more render correctly with no extra props.

Custom

For a format the lookup does not know, drive it yourself. Pass color (a single string, or a { strong, light } pair for depth), an icon, and a label. With no color, an unknown format reads neutral.

Accessibility

The component is a static graphic, not an interactive control.

ARIA notes:

• The root sets role="img" and a generated aria-label of "{format} file" (for example "PDF file"), so screen readers announce a meaningful name rather than reading the SVG paths.
• When the icon sits next to a visible file name, the label is redundant. Mark the icon aria-hidden in that case so the name is not announced twice.
• Color and glyph carry the file type visually. Keep the printed label (or an adjacent text name) so the type is not conveyed by color alone.

Styling

Tailwind override: pass className to size the icon and merge any other Tailwind classes with the component's own via cn():

<FileFormat format="PDF" className="size-16 drop-shadow-sm" />

Data slots and attributes: the component exposes one styling hook and a set of CSS custom properties:

• data-slot="file-format" on the root <svg>.
• --ff-page, --ff-stroke, --ff-earmark, --ff-line, and --ff-label are set on the root from the resolved variant. They color the page fill, the border, the folded corner, the glyph, and the label. Override one to retint a single part without touching the rest.

Target the root or retint a part in CSS:

[data-slot="file-format"] {
  --ff-label: var(--color-white);
}

Related Components

• Badge: use this for a status, count, or category pill, not a file-type marker.
• Avatar: use this for a person or entity image with a fallback.
• Dropzone: use this for the drag-and-drop target that accepts files.
• File Upload: use this for the full upload list; it renders FileFormat per row.

API Reference

FileFormat

File-type icon that maps a format string to a glyph, brand color, and label. Renders an <svg role="img"> and extends Omit<React.ComponentProps<"svg">, "children" | "color">, so standard SVG attributes (id, aria-*, onClick, etc.) are accepted; color is replaced by the typed prop below and children is not used.

Props

Variants