# File list

> File icon, name, size metadata, and a trailing overflow menu with actions per row.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/item-14).

- Page, with a live preview: https://shadcn.exchange/r/flx/item-14
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/item-14-light-8568302830c8a709.png
- Registry item: https://ui.flexnative.com/r/item-14.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/item-14.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: `item`, `button`, `dropdown-menu`

## Files

### `registry/patterns/item/item-14.tsx`

```tsx
'use client'

import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'
import {
  FileSpreadsheetIcon,
  FileTextIcon,
  ImageIcon,
  MoreHorizontalIcon,
} from 'lucide-react'

const files = [
  {
    icon: FileTextIcon,
    name: 'Q4-strategy.md',
    meta: 'Markdown · 14 KB',
  },
  {
    icon: FileSpreadsheetIcon,
    name: 'pricing.csv',
    meta: 'Spreadsheet · 3.2 KB',
  },
  {
    icon: ImageIcon,
    name: 'hero-cover.png',
    meta: 'Image · 1.4 MB',
  },
]

export function Item14() {
  return (
    <ItemGroup className="w-full max-w-md">
      {files.map((file) => (
        <Item key={file.name} variant="outline">
          <ItemMedia variant="icon">
            <file.icon />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>{file.name}</ItemTitle>
            <ItemDescription>{file.meta}</ItemDescription>
          </ItemContent>
          <ItemActions>
            <DropdownMenu>
              <DropdownMenuTrigger
                render={
                  <Button variant="ghost" size="icon-sm" aria-label="More">
                    <MoreHorizontalIcon />
                  </Button>
                }
              />
              <DropdownMenuContent align="end">
                <DropdownMenuItem>Open</DropdownMenuItem>
                <DropdownMenuItem>Download</DropdownMenuItem>
                <DropdownMenuItem>Rename</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem variant="destructive">
                  Delete
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </ItemActions>
        </Item>
      ))}
    </ItemGroup>
  )
}
```