fma-ds

File Type

A file type icon: a page with a folded corner and the extension label, in the format's brand or family color (Word blue, Excel green, the GitHub language colors).

Data displaythird-partyMITChangelogRegistry JSON

Overview

  • `type`: one of 171 extensions (documents, certificates, code, config, archives…), one of 13 families (image, folder… drawn as a glyph) or any other string (a neutral labelled page).
  • `getFileType()`: resolves a file name, path, URL or MIME type, including well-known names without an extension (Dockerfile, .env.local, go.mod, LICENSE) and aliases such as .cer. getFileTypeCategory() returns the family.
  • `variant`: outline, solid, light or mono (theme gray). A text-* class recolors it.
  • `size`: from mini (18px, for table rows) to xl; a Tailwind size-* class scales the label and stroke with the box (container units).
  • Content: label replaces the text, glyph shows the family glyph and icon draws a custom icon.

Renders a span with role="img" named after the type. It has no state, so it works in Server Components.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/file-type

    Files land in components/fma-ds/file-type.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
class-variance-authority@^0.7.1cn@^0.5.0
Registry
None