Density

ListItem

ListItem renders a compact ghost row with a title, optional subtitle, and optional start and end slots. It always uses Density’s button presentation. Subtitles render one size smaller than the ListItem size, clamped at 2xs.

import { ListItem } from "density-base-ui";

export default function ListItemExample() {
  return <ListItem title="Release notes" />;
}

Props

Prop Attribute Values Default
title None ReactNode Required
subtitle None ReactNode None
childrenStart None ReactNode None
childrenEnd None ReactNode None
as None ElementType button
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
Fixed presentation data-dn-presentation button button

Content and element

Release notesEdited 12 minutes ago
import { ListItem } from "density-base-ui";
import { FileText, MoreHorizontal } from "lucide-react";

export default function ListItemContentExample() {
  return (
    <ListItem
      as="div"
      childrenEnd={<MoreHorizontal aria-hidden="true" size={16} />}
      childrenStart={<FileText aria-hidden="true" size={16} />}
      subtitle="Edited 12 minutes ago"
      title="Release notes"
    />
  );
}

Size

import { ListItem } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ListItemSizeExample() {
  return (
    <ExampleStack style={styles.panel}>
      <ListItem title="2xs" size="2xs" />
      <ListItem title="xs" size="xs" />
      <ListItem title="sm" size="sm" />
      <ListItem title="md" size="md" />
      <ListItem title="lg" size="lg" />
      <ListItem title="xl" size="xl" />
      <ListItem title="2xl" size="2xl" />
      <ListItem title="3xl" size="3xl" />
    </ExampleStack>
  );
}

const styles = {
  panel: {
    display: "grid",
    gap: "0.375rem",
  },
} as const;