# Custom colors and unknown types

> Unknown extensions fall back to a neutral icon, and one class recolors any type.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-file-type-11).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-file-type-11
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-file-type-11-light-2b6a5acc993f8698.png
- Registry item: https://reui.io/r/new-york-v4/c-file-type-11.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-file-type-11.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@reui/file-type`

## Files

### `c-file-type-11.tsx`

```tsx
import { FileType } from "@/components/reui/file-type"

type CustomFormat = {
  type: string
  name: string
  /** A text color class. The label band, glyph and solid page follow it. */
  className: string
}

/* None of these is in the built-in table. Each color keeps the white label
   text at 4.5:1 or better: 700 for teal and orange, 600 for indigo and rose. */
const FORMATS: CustomFormat[] = [
  { type: "dwg", name: "AutoCAD drawing", className: "text-teal-700" },
  { type: "stl", name: "3D print mesh", className: "text-indigo-600" },
  { type: "blend", name: "Blender scene", className: "text-orange-700" },
  { type: "step", name: "CAD exchange", className: "text-rose-600" },
]

export function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-6">
      <figure className="flex flex-col gap-3">
        {/* No visible text names these, so each keeps its default
            accessible name ("DWG file"). */}
        <ul className="flex flex-wrap gap-3">
          {FORMATS.map((format) => (
            <li key={format.type}>
              <FileType type={format.type} />
            </li>
          ))}
        </ul>
        <figcaption className="text-muted-foreground text-sm text-pretty">
          An extension outside the built-in table renders on a neutral page,
          labeled with the extension itself.
        </figcaption>
      </figure>
      <figure className="@container flex flex-col gap-3">
        {/* 2 columns once the figure, not the viewport, fits a name and
            its class side by side. */}
        <ul className="grid gap-3 @[22rem]:grid-cols-2">
          {FORMATS.map((format) => (
            <li key={format.type} className="flex min-w-0 items-center gap-3">
              <FileType type={format.type} className={format.className} />
              <div className="flex min-w-0 flex-col">
                <span className="truncate text-sm font-medium">
                  {format.name}
                </span>
                <code className="text-muted-foreground truncate font-mono text-xs">
                  {format.className}
                </code>
              </div>
            </li>
          ))}
        </ul>
        <figcaption className="text-muted-foreground text-sm text-pretty">
          One <code className="font-mono">text-*</code> class recolors any type,
          and the label stays white.
        </figcaption>
      </figure>
    </div>
  )
}
```