FileItem

A named file row with size, type, thumbnail and independent actions.

Use FileItem

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

PackageProject UI

"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" />
      </FileList>
    </FloodRoot>
  );
}

Design notes

Render inside FileList or another native list.
No file reading, object URL creation or uploading is performed.

API reference

Prop	Values	Default
`name`	string	Required
`size`	number	—
`mimeType`	string	—
`format`	string \| null	—
`thumbnail`	ReactNode	—
`description`	ReactNode	—
`href`	string	—
`download`	boolean	—
`onPreview`	() => void	—
`onRemove`	() => void	—
`disabled`	boolean	—
`labels`	FileActionLabels	—
`formatSize`	(bytes: number) => string	—
`Native HTML props`	Omit<HTMLAttributes<HTMLLIElement>, "children" \| "title">	Forwarded

View TypeScript source

Page Markdown Agent skill