Component

DataList

Render structured rows for stats, timelines, metadata, and compact content.

Usage

Import the component entry and start with its smallest complete example.

Import

import { DataList } from "@chitrank2050/monoline-ui/data-list"

Basic usage

<DataList
  variant="numbered"
  items={[
    { label: "01", title: "Nine years", description: "Frontend to architect." },
    { label: "02", title: "14 production", description: "Apps shipped end-to-end." },
  ]}
/>

<DataList>
  <DataList.Item label="01" title="Nine years" description="Frontend to architect." />
</DataList>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

DataList works for compact, consistently aligned facts, milestones, or metadata.

Avoid when

The data needs column headers, or each row is navigation and should be an anchor.

Accessibility

DataList items become native buttons only when onClick is supplied. Static rows remain divs and should not receive focus unless you implement the expected keyboard behavior.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizesm | md | lgRow density and type scale

variantdefault | numberedDefault rows or fixed label column

itemsDataListItemData[]Data-driven rows

childrenReactNodeCompound composition override

DataList.Itemcompound slotManual row composition

Design tokens

Theme variables this component reads for color, spacing, and motion.

--ml-data-list-item-padding-yCSS varVertical row rhythm

--ml-data-list-label-widthCSS varNumbered label column width

--ml-data-list-title-textCSS varTitle type scale

--borderCSS varRow separators

Implementation

The source used by the example above, including any state it needs.

import { DataList } from "@chitrank2050/monoline-ui/data-list"

export function ExperienceStats() {
  return (
    <DataList
      variant="numbered"
      items={[
        { label: "01", title: "Nine years", description: "Frontend to architect." },
        { label: "02", title: "14 production", description: "Apps shipped end-to-end." },
      ]}
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentMetricComponent · ReferenceReference→02ComponentEditorial LineComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview