Density

ListItem

ListItem renders a compact, full-width ghost row in normal flow with a title, optional subtitle, and optional start and end slots. It always uses Density’s clickable interaction primitive. Subtitles render one size smaller than the ListItem size, clamped at 2xs.

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

export default function ListItemExample() {
  return (
    <View gap="sm">
      <ListItem title="Release notes" />
      <ListItem title="Project roadmap" />
      <ListItem title="Team decisions" />
    </View>
  );
}

Content and element

Icons on the right

import { ListItem, View } from "density-base-ui";
import { MoreHorizontal } from "lucide-react";

export default function ListItemEndContentExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ListItem
        title="Release notes"
        childrenEnd={<MoreHorizontal aria-hidden="true" size={16} />}
      />
      <ListItem
        title="Project roadmap"
        childrenEnd={<MoreHorizontal aria-hidden="true" size={16} />}
      />
    </View>
  );
}

Hover visibility

ListItem is a reveal host. Give a descendant in either slot hoverVisibility="hover" to show it while the row is hovered or contains keyboard focus, or hoverVisibility="not-hover" to hide it then. On touch-first devices, both remain visible.

Release notesNew
Project roadmapUpdated
import { Badge, Button, ListItem, View } from "density-base-ui";

export default function ListItemHoverVisibilityExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ListItem
        as="div"
        title="Release notes"
        childrenEnd={
          <>
            <Badge hoverVisibility="not-hover">New</Badge>
            <Button hoverVisibility="hover" size="sm" type="button">
              View
            </Button>
          </>
        }
      />
      <ListItem
        as="div"
        title="Project roadmap"
        childrenEnd={
          <>
            <Badge hoverVisibility="not-hover">Updated</Badge>
            <Button hoverVisibility="hover" size="sm" type="button">
              View
            </Button>
          </>
        }
      />
    </View>
  );
}

Text below

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

export default function ListItemSubtitleExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ListItem title="Release notes" subtitle="Edited 12 minutes ago" />
      <ListItem title="Project roadmap" subtitle="Edited yesterday" />
    </View>
  );
}

Icons on the left

import { ListItem, View } from "density-base-ui";
import { FileText } from "lucide-react";

export default function ListItemStartContentExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ListItem
        title="Release notes"
        childrenStart={<FileText aria-hidden="true" size={16} />}
      />
      <ListItem
        title="Project roadmap"
        childrenStart={<FileText aria-hidden="true" size={16} />}
      />
    </View>
  );
}

Kitchen sink

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

export default function ListItemKitchenSinkExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ListItem
        as="div"
        title="Release notes"
        subtitle="Edited 12 minutes ago"
        childrenStart={<FileText aria-hidden="true" size={16} />}
        childrenEnd={<MoreHorizontal aria-hidden="true" size={16} />}
      />
      <ListItem
        as="div"
        title="Project roadmap"
        subtitle="Edited yesterday"
        childrenStart={<FileText aria-hidden="true" size={16} />}
        childrenEnd={<MoreHorizontal aria-hidden="true" size={16} />}
      />
    </View>
  );
}

Size

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

export default function ListItemSizeExample() {
  return (
    <View gap="sm" layout="grid" padding={false}>
      <ListItem
        size="2xs"
        subtitle="Updated 2 minutes ago"
        title="Product analytics"
      />
      <ListItem
        size="xs"
        subtitle="Updated 2 minutes ago"
        title="Product analytics"
      />
      <ListItem
        size="sm"
        subtitle="Updated 2 minutes ago"
        title="Product analytics"
      />
      <ListItem
        size="md"
        subtitle="Updated 2 minutes ago"
        title="Product analytics"
      />
      <ListItem
        size="lg"
        subtitle="Updated 2 minutes ago"
        title="Product analytics"
      />
      <ListItem
        size="xl"
        subtitle="Updated 2 minutes ago"
        title="Product analytics"
      />
      <ListItem
        size="2xl"
        subtitle="Updated 2 minutes ago"
        title="Product analytics"
      />
      <ListItem
        size="3xl"
        subtitle="Updated 2 minutes ago"
        title="Product analytics"
      />
    </View>
  );
}