Get started
Data display
Data entry
General
Layout
Navigation
Blocks
Packages
A lucide icon chosen for a file's type from its extension, decorative unless paired with the visible file name or given an aria-label.
- run.py
- logo.png
- Inter.woff2
- notes.md
- archive.zip
tsx
1
2
3import type { ReactNode } from 'react';
import { FileTypeIcon } from '@/registry/bases/base-ui/components/data-display/file-type-icon';Installation#
bash
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/file-type-icon.jsonUsage#
tsx
import { FileTypeIcon } from '@/components/data-display/file-type-icon';tsx
<FileTypeIcon name="run.py" className="text-muted-foreground size-4" />It is decorative, so pair it with the visible file name, or give it an aria-label where it stands alone.
API reference#
FileTypeIcon#
Renders the lucide icon its name maps to by extension (a generic file icon when none matches) and takes every prop a lucide icon takes, plus:
| Prop | Type | Default |
|---|---|---|
name | string | required |
Every glyph is a static lucide-react icon, FileText included even where an animated twin is vendored
elsewhere, so every file type takes the same props. It sets data-slot="file-type-icon".