DataList

A native list of structured rows with independent links and actions.

Preview

Design system
Foundations and reusable components
Updated today
Website
Documentation and live examples
Updated today
Agent guides
Design instructions for your agent
Updated today

Use DataList

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

PackageProject UI

"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <DataList>
        <DataListItem title="Design system" description="Foundations and components" metadata="Updated today" />
        <DataListItem title="Website" description="Documentation and examples" metadata="Updated yesterday" />
      </DataList>
    </FloodRoot>
  );
}

Design notes

This is a ul/li list, not a listbox or data grid.
Keep navigation in the title link and actions in their own buttons.

API reference

Prop	Values	Default
`density`	"compact" \| "comfortable"	"comfortable"
`dividers`	boolean	true
`Native HTML props`	Omit<HTMLAttributes<HTMLUListElement>, "role">	Forwarded

View TypeScript source

Page Markdown Agent skill