Skip to content
v0.2.10

FileList

A named native list of file rows.

Preview
  • Brand guidelines.pdfPDF2.4 MB
  • Logo.svgSVG18.4 kB
  • Cover.pngPNG850 kB

Use FileList

FileList is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood
Example import style
file-list.tsxTSX
"use client";

import { FloodRoot, FileList, FileItem } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <FileList label="Attachments">
        <FileItem name="Brand guidelines.pdf" size={2400000} mimeType="PDF" />
        <FileItem name="Logo.svg" size={18400} mimeType="SVG" />
      </FileList>
    </FloodRoot>
  );
}

Design notes

  • List contents and file identities are host owned. Narrow list containers adapt media, copy and actions without hiding primitive anatomy, including on a wide screen.
  • Use stable host IDs for React keys; a name is not a unique file identity.

API reference

PropValuesDefault
density"compact" | "comfortable"—
dividersboolean—
labelstringRequired
Native HTML propsOmit<HTMLAttributes<HTMLUListElement>, "role">Forwarded
View TypeScript source