Skip to content
LuoForge/Tungsten
Components/DataList·Experimental

DataList

since v12.1.0

DataList — record detail key/value panel (the read view that pairs with

DataTable). Semantic <dl>; each pair is a flex row with a mono-caps label

opposite its value, hairline-separated.

Install

Add the package and import the component.

pnpm add @hey-mike/tungsten
pnpm add @hey-mike/tungsten
import { DataList } from '@hey-mike/tungsten';
import { DataList } from '@hey-mike/tungsten';

Preview

Same fixtures used by the visual-regression suite.

Open snapshot in new view →

Usage

apps/docs/app/snapshots/data-list/page.tsx

import { DataList } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
import { HeroSpecimen } from '../_components/HeroSpecimen';

export default function DataListSnapshot() {
  return (
    <VariantGrid
      title="DataList"
      hero={
        <HeroSpecimen>
          <DataList
            items={[
              { label: 'Role', value: 'Admin' },
              { label: 'Status', value: 'Active' },
              { label: 'Team', value: 'Platform' },
            ]}
          />
        </HeroSpecimen>
      }
      variants={[
        {
          label: 'default',
          node: (
            <div className="w-80">
              <DataList
                items={[
                  { label: 'Role', value: 'Admin' },
                  { label: 'Status', value: 'Active' },
                  { label: 'Team', value: 'Platform' },
                  { label: 'Joined', value: 'Mar 14, 2025' },
                  { label: 'Last active', value: '2 hours ago' },
                  { label: '2FA', value: 'Enabled' },
                ]}
              />
            </div>
          ),
        },
      ]}
    />
  );
}

import { DataList } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
import { HeroSpecimen } from '../_components/HeroSpecimen';

export default function DataListSnapshot() {
  return (
    <VariantGrid
      title="DataList"
      hero={
        <HeroSpecimen>
          <DataList
            items={[
              { label: 'Role', value: 'Admin' },
              { label: 'Status', value: 'Active' },
              { label: 'Team', value: 'Platform' },
            ]}
          />
        </HeroSpecimen>
      }
      variants={[
        {
          label: 'default',
          node: (
            <div className="w-80">
              <DataList
                items={[
                  { label: 'Role', value: 'Admin' },
                  { label: 'Status', value: 'Active' },
                  { label: 'Team', value: 'Platform' },
                  { label: 'Joined', value: 'Mar 14, 2025' },
                  { label: 'Last active', value: '2 hours ago' },
                  { label: '2FA', value: 'Enabled' },
                ]}
              />
            </div>
          ),
        },
      ]}
    />
  );
}

Props

Surface specific to <DataList />.

PropTypeDefaultDescription
items*DataListItem[]——

Source