Components
A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions. 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.
npx shadcn@latest add https://21st.dev/r/jolbol1/grid-listLoading preview...
import { GridList, GridListItem } from "@/components/ui/grid-list"
export function GridListDemo() {
return (
<GridList aria-label="Favorite pokemon" selectionMode="multiple">
<GridListItem>Charizard</GridListItem>
<GridListItem>Blastoise</GridListItem>
<GridListItem>Venusaur</GridListItem>
<GridListItem>Pikachu</GridListItem>
</GridList>
)
}