# Outline, solid, light and mono

> The 4 variants side by side: outlined, filled, soft grey and one gray for every type.

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

- Page, with a live preview: https://shadcn.exchange/r/reui/c-file-type-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-file-type-2-light-caee2d108f13f3e3.png
- Registry item: https://reui.io/r/new-york-v4/c-file-type-2.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-2.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-2.tsx`

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

const variants: FileTypeVariant[] = ["outline", "solid", "light", "mono"]

// The same types in every row, so the variant is the only thing that changes.
const types = [
  "pdf",
  "docx",
  "xlsx",
  "jpg",
  "zip",
] as const satisfies readonly FileTypeName[]

export function Pattern() {
  return (
    <div className="mx-auto flex w-fit flex-col gap-5">
      {variants.map((variant) => (
        <div key={variant} className="flex flex-col gap-2.5">
          <span className="text-muted-foreground text-xs capitalize">
            {variant}
          </span>
          <div className="flex gap-4">
            {types.map((type) => (
              <FileType key={type} type={type} variant={variant} />
            ))}
          </div>
        </div>
      ))}
    </div>
  )
}
```