Components / furniture

DataList

Dotted-Leader Label → Value Rows

01 Preview

02 Usage

Spec-sheet key/value rows with dotted leaders.

<DataList
  items={[
    { label: 'Role', value: 'Full Stack Engineer' },
    { label: 'GitHub', value: '@denizarsan', href: 'https://github.com' },
  ]}
/>

03 Props

PropTypeDefaultNotes
items* DataListItem[] — —

Also accepts every attribute of React.HTMLAttributes<HTMLDListElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 DataListItem

PropTypeDefaultNotes
label* string — —
value* React.ReactNode — —
href string — —

05 Import

import { DataList } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';