Components
Loading preview...
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.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/grid-listimport { 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>
)
}