List

Bordered list of rows with title, description, leading and trailing slots.

Data & surfacesServer-safe2 exports

HomeOverview and recent work⌘1
Components178 piecesLive

Install

bash

npx @agents-npm-packages/vibeui add list --dir ./src/components/ui

Import

tsx

import { List, ListItem } from "@/components/ui/list"

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<List>

Prop	Type	Default	Description
children*	ReactNode	—	Content rendered inside the component.
className	string	—	Extra classes, merged with the component's own.

<ListItem>

Prop	Type	Default	Description
title*	string	—	Heading text.
description	string	—	Supporting text under the title.
leading	ReactNode	—	Node shown before the text, such as an icon.
trailing	ReactNode	—	Node shown after the text, such as a badge.
className	string	—	Extra classes, merged with the component's own.
onClick	(() => void)	—	Called on click.

Source

src/components/ui/list.tsx

import { cn } from "@/lib/utils";

/** Bordered list of rows with title, description, leading and trailing slots. */
export function List({
  className,
  children,
}: {
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <ul
      className={cn(
        "divide-y divide-line overflow-hidden rounded-lg border border-line bg-surface shadow-quiet",
        className,
      )}
    >
      {children}
    </ul>
  );
}

export function ListItem({
  title,
  description,
  leading,
  trailing,
  className,
  onClick,
}: {
  title: string;
  description?: string;
  leading?: React.ReactNode;
  trailing?: React.ReactNode;
  className?: string;
  onClick?: () => void;
}) {
  const inner = (
    <>
      {leading ? (
        <span className="flex size-9 shrink-0 items-center justify-center rounded-sm bg-surface-muted text-ink-soft">
          {leading}
        </span>
      ) : null}
      <span className="min-w-0 flex-1">
        <span className="block truncate text-sm font-medium text-ink">{title}</span>
        {description ? (
          <span className="mt-0.5 block truncate text-[13px] text-muted">
            {description}
          </span>
        ) : null}
      </span>
      {trailing}
    </>
  );

  if (onClick) {
    return (
      <li className={className}>
        <button
          type="button"
          onClick={onClick}
          className="flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-surface-muted"
        >
          {inner}
        </button>
      </li>
    );
  }

  return (
    <li className={cn("flex w-full items-center gap-3 px-4 py-3", className)}>
      {inner}
    </li>
  );
}

Exports List and 1 more. Peer dependencies: clsx, tailwind-merge.

API