Item list

import { ItemList, type ItemListRow } from "@/components/ui/item-list";

import { ItemList, type ItemListRow } from "@/components/ui/item-list";
import { GlobeIcon } from "lucide-react";

const data: ItemListRow[] = [
  {
    icon: GlobeIcon,
    title: "Chrome",
    subtitle: "Web Browser",
    member: "Ann Wong",
    amount: "$88,904.92",
    href: "/apps/chrome",
  },
];

export function Example() {
  // Columns auto-derive from the keys (member, amount); pass `columns` to
  // reorder / relabel / align / custom-render.
  return <ItemList data={data} />;
}

ItemList (props)                              // flat, card-per-row list
├── data: ItemListRow[]                       // each row is a dict
│   ├── icon? | image?                        // leading visual
│   ├── iconClassName?                        // e.g. "bg-transparent" for bare brand marks
│   ├── title / subtitle?                     // leading text
│   ├── [key]: ReactNode                      // any other key → a data column (auto)
│   ├── actions?: { icon, label, onClick }[]  // animate-ui icon buttons
│   └── href? | onNavigate?                   // trailing chevron navigation
├── variant?: "card" | "flat"                 // card rows (default) or hairline rows
├── columns?: ItemListColumn[]                // optional: reorder / relabel / align / render
├── nameHeader?  (default "Name")
├── sortable?                                 // click a header: asc → desc → unsorted
├── sort? / defaultSort? / onSortChange?      // controlled or uncontrolled sort
├── nameSortValue?                            // what the name column sorts by
└── hideHeader? / emptyState? / getRowId?

Row = <Card> surface
├── Leading cell — icon|image + title + subtitle
├── Data columns — value rendered as-is (drop in Badge / Select / Input to edit inline)
├── Action cluster — animated Lucide icons, animate on hover
└── Chevron — navigates via href (<a>) or onNavigate