Skip to content
All 6 kits from $99 · Everything Bundle $149

Bare List

DisplayMIT
View in Storybook

Minimal unstyled list primitive — for when you want a list without ornamentation.

bun add @otfdashkit/ui

Preview

Bare List
Loading Storybook preview…

Code

import { FileText } from 'lucide-react'
import { DataList, DataListItem } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="w-[420px]">
      <DataList bordered={false} divided={false} className="space-y-1">
        <DataListItem left={<FileText className="h-4 w-4" />} title="Quarterly report.pdf" description="2.4 MB · Updated 2h ago" />
        <DataListItem left={<FileText className="h-4 w-4" />} title="Brand guidelines.pdf" description="8.1 MB · Updated yesterday" />
        <DataListItem left={<FileText className="h-4 w-4" />} title="Release checklist.md" description="14 KB · Updated Monday" />
      </DataList>
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the DataList source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
borderedbooleantrue
dividedbooleantrue