Data List

Key–value pairs in a semantic description list, horizontal or stacked.

Name: Sophie Durand
Email: sophie@astralis.dev
Status: Active

"use client";

import { DataList, Badge, Box } from "astralis-ui";

export function DataListDemo() {
  return (
    <Box w="full" maxW="sm">
      <DataList>
        <DataList.Item>
          <DataList.Label>Name</DataList.Label>
          <DataList.Value>Sophie Durand</DataList.Value>
        </DataList.Item>
        <DataList.Item>
          <DataList.Label>Email</DataList.Label>
          <DataList.Value>sophie@astralis.dev</DataList.Value>
        </DataList.Item>
        <DataList.Item>
          <DataList.Label>Status</DataList.Label>
          <DataList.Value>
            <Badge colorScheme="green">Active</Badge>
          </DataList.Value>
        </DataList.Item>
      </DataList>
    </Box>
  );
}

Import#

import { DataList } from "astralis-ui";
// DataList.Item, DataList.Label, DataList.Value

Usage#

Values take any content — badges, avatars, links — while the underlying markup stays a real <dl>/<dt>/<dd> description list.

Vertical#

orientation="vertical" stacks each label above its value — better for narrow columns and cards.

Deployment region: eu-central-1 (Frankfurt)
Runtime: Node 22 on the edge

"use client";

import { DataList, Box } from "astralis-ui";

export function DataListVertical() {
  return (
    <Box w="full" maxW="sm">
      <DataList orientation="vertical" size="sm">
        <DataList.Item>
          <DataList.Label>Deployment region</DataList.Label>
          <DataList.Value>eu-central-1 (Frankfurt)</DataList.Value>
        </DataList.Item>
        <DataList.Item>
          <DataList.Label>Runtime</DataList.Label>
          <DataList.Value>Node 22 on the edge</DataList.Value>
        </DataList.Item>
      </DataList>
    </Box>
  );
}

Props#

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Label beside or above the value.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Text and rhythm scale.

Item, Label and Value take only className — they're layout, the semantics come free.