Grid List

Copy MarkdownOpen

Example

Features

A list can be built using <ul> or <ol> HTML elements, but does not support any user interactions. HTML lists are meant for static content, rather than lists with rich interactions like focusable elements within rows, keyboard navigation, row selection, etc. GridList helps achieve accessible and interactive list components that can be styled as needed.

• Item selection – Single or multiple selection, with optional checkboxes, disabled rows, and both toggle and replace selection behaviors.
• Interactive children – List items may include interactive elements such as buttons, checkboxes, menus, etc.
• Actions – Items support optional row actions such as navigation via click, tap, double click, or Enter key.
• Async loading – Support for loading items asynchronously.
• Keyboard navigation – List items and focusable children can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well.
• Drag and drop – GridList supports drag and drop to reorder, insert, or update items via mouse, touch, keyboard, and screen reader interactions.
• Virtualized scrolling – Use Virtualizer to improve performance of large lists by rendering only the visible items.
• Touch friendly – Selection and actions adapt their behavior depending on the device. For example, selection is activated via long press on touch when item actions are present.
• Accessible – Follows the ARIA grid pattern, with additional selection announcements via an ARIA live region. Extensively tested across many devices and assistive technologies to ensure announcements and behaviors are consistent.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add grid-list

Anatomy

import { GridList, GridListItem } from "@/components/ui/core/grid-list";

<GridList
  items={items}
  className="min-w-64"
>
  {(item) => <GridListItem id={item.id}>{item.name}</GridListItem>}
</GridList>

<GridList>
  <GridListItem>Item belongs here</GridListItem>
</GridList>

ANother Examples

Multiple

Supports selecting multiple items simultaneously, making it easy to manage or act on several elements at once.

Drag and Drop

Lets users reorder items directly through drag-and-drop interactions for a more intuitive layout experience.

Infinite Scroll

Loads additional items automatically as the user scrolls, creating a seamless, continuous flow of content.

Empty State

Displays placeholder visuals or messages when no content is available, keeping the interface informative and balanced.

Disabled

Prevents interaction with items and visually indicates an inactive or unavailable state.

Props

Loading types…