DataList

A list of things and what they are called: a details panel, a summary of a record, the metadata under a heading. Real <dt>/<dd> pairs, so each row is read as "label, value".

import { DataList, DataListItem } from 'neba';

<DataList>
  <DataListItem label="Status">Live</DataListItem>
  <DataListItem label="Region">Frankfurt</DataListItem>
</DataList>;

Props

Prop	Type	Default	Description
orientationshared	'horizontal' | 'vertical'	'horizontal'	Where the label sits. Horizontal is a column of its own beside the value, vertical is above it
labelWidth	number | string	—	How wide the label column is when horizontal. Numbers are pixels; left out it is as wide as the widest label
dividers	boolean	false	Draws a hairline between the rows
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The type scale of the labels and the values
densityshared	'default' | 'compact'	'default'	Changes the gaps between rows and columns, and nothing else
children	ReactNode	—	The rows

Every native <dl> attribute passes through, apart from color. It draws no surface: put it in a Card or a Box when one is wanted.

Not a two-column Table. A table is a grid of rows all of the same shape, walked as a grid; this is a set of pairs, each read as a label and its value.

DataListItem

Prop	Type	Default	Description
label *	ReactNode	—	What the value is called. Rendered as the dt
children	ReactNode	—	The value. A node, so a Chip, a link or a piece of code all fit. Rendered as the dd

Examples

orientation

horizontal puts the label in a column of its own beside the value, which is the shape a details panel takes. vertical puts it above: for a narrow column, and for values long enough that a label beside them would leave most of the row empty.

import { Box, DataList, DataListItem } from 'neba';

export default function DataListOrientation() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      {(['horizontal', 'vertical'] as const).map((orientation) => (
        <Box key={orientation} variant="outline">
          <DataList orientation={orientation}>
            <DataListItem label="Plan">Team</DataListItem>
            <DataListItem label="Seats">12 of 20</DataListItem>
            <DataListItem label="Renews">1 April 2026</DataListItem>
          </DataList>
        </Box>
      ))}
    </div>
  );
}

labelWidth

Left out, the label column is as wide as the widest label, which is what makes every value start at the same place. Set it to hold two lists side by side to the same measure.

import { Box, DataList, DataListItem } from 'neba';

export default function DataListLabelWidth() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Box variant="outline">
        <DataList>
          <DataListItem label="Id">8f2c1a</DataListItem>
          <DataListItem label="Environment">Production</DataListItem>
        </DataList>
      </Box>
      <Box variant="outline">
        <DataList labelWidth={140}>
          <DataListItem label="Id">8f2c1a</DataListItem>
          <DataListItem label="Environment">Production</DataListItem>
        </DataList>
      </Box>
    </div>
  );
}

dividers

A hairline between the rows, for a long list where the pairs need separating.

import { Box, DataList, DataListItem } from 'neba';

export default function DataListDividers() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2">
      {[false, true].map((dividers) => (
        <Box key={String(dividers)} variant="outline">
          <DataList dividers={dividers} density="compact" size="sm">
            <DataListItem label="Runtime">Node 26</DataListItem>
            <DataListItem label="Framework">Next.js 16</DataListItem>
            <DataListItem label="Bundle">215.3 kB</DataListItem>
          </DataList>
        </Box>
      ))}
    </div>
  );
}

Accessibility

• Renders a real <dl> with each pair as a <dt> and a <dd>, so the label and the value are associated without any ARIA.
• A value can be any node (a Chip, a TextLink, an Avatar), and keeps whatever semantics it brought.