Skip to content
MIZU.

DescriptionList

Aligned names and values with the semantics of a description list.

Live — this one is real

Package
mizu-ui
License
MIT
Format
ES modules

Usage

import { DescriptionList } from "mizu-ui";

export function Example() {
  return (
    <DescriptionList
      items={[
        { label: "Package", value: "mizu-ui" },
        { label: "License", value: "MIT" },
        { label: "Format", value: "ES modules" },
      ]}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect data/Records.tsx

Source is included in the npm package under src/data/Records.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
items{label: string; value: ReactNode}[]—Terms and descriptions.

Accessibility

Native dl/dt/dd relationships. Values can contain links or controls.

Motion

Static, reflowing layout.

Works alongside

DataTableStatBarChartSparkline