# antuikit / Listy

> Listy, with no divider under its last row.

Docs: https://antuikit.com/docs/components/listy

## Install

npx antuikit@latest init
npx antuikit@latest add listy

## Import

import { Listy } from "@/components/ui/listy";

## Demos

- [Basic](https://ui.antuikit.com/embed/listy/basic.md): Pass `items`, a `rowKey` that names a stable field like `id`, and an `itemRender` that returns the content of each row.
- [Rich rows](https://ui.antuikit.com/embed/listy/rich-rows.md): Return any layout from `itemRender`, like an avatar, a name over a team and a role tag, and the list adds the padding and separators.
- [Navigation rows](https://ui.antuikit.com/embed/listy/nav-rows.md): Return a link from `itemRender` and set `classNames.item` to `p-0` so the whole row, padding included, is the click target.
- [Virtual scrolling](https://ui.antuikit.com/embed/listy/virtual.md): Set `virtual` and a `height` to mount only the rows on screen, so a list of 5,000 scrolls as smoothly as a short one.
- [Grouping](https://ui.antuikit.com/embed/listy/group.md): Pass `group` a `key` to collect rows under headers without sorting them first, and a `title` that receives each group's rows for a count.
- [Sticky headers](https://ui.antuikit.com/embed/listy/sticky.md): Set `sticky` and a `height` on a grouped list to pin each header to the top until the next group pushes it out.
- [Scroll to a row](https://ui.antuikit.com/embed/listy/scroll-to.md): Call `scrollTo` on the list's ref with an index or a row `key`, and set `align` to bring that row to the top or the bottom.
- [Drag sorting](https://ui.antuikit.com/embed/listy/drag-sorting.md): Sort rows with dnd-kit: the dragged row lifts, the others slide aside to show where it lands, and Space with the arrow keys sorts from the keyboard.
- [Load on scroll](https://ui.antuikit.com/embed/listy/load-more.md): Read the scroll position in `onScroll` to load the next page near the bottom, with a button for anyone who does not scroll.
- [Inbox](https://ui.antuikit.com/embed/listy/inbox.md): An inbox with unread dots, attachment icons and category tags, and star and archive buttons that appear on hover or focus.
- [Activity feed](https://ui.antuikit.com/embed/listy/activity-feed.md): A team activity feed grouped by day under sticky headers, where each event says who did what and tags what it touched.
- [Bulk selection](https://ui.antuikit.com/embed/listy/selectable-bulk.md): A file list with checkboxes and bulk actions, where `classNames` and `styles` as functions highlight the list while any row is selected.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/listy`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Listy` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.