HQ UI

Grid List

A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.

Dropdown MenuItem

Installation

npx shadcn@latest add https://hq-ui.vercel.app/r/grid-list

Preview

Selection Mode
Aardvark
Cat
Dog
Kangaroo
Panda
Snake

Blocks

grid-list-demo
The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
The Who
grid-list-controlled-demo
The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones

You have selected:

grid-list-section-demo
NYC-1
192.168.10.21
Atlas blogatlasblog.com
online
Northwind shopnorthwind.shop
deploying
Beacon docsdocs.beacon.io
maintenance
LON-1
10.0.3.44
Evergreen healthevergreen.health
online
Glacier analyticsglacier.ai
deploying
grid-list-multiple-demo
The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
grid-list-disabled-demo
The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
grid-list-empty-demo
No bands selected
grid-list-drag-demo
The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
The Beach Boys
The Kinks
The Who
grid-list-drag-item-demo
The Beatles
Led Zeppelin
Pink Floyd
Queen
The Rolling Stones
The Beach Boys
The Kinks
The Who
The Byrds
The Yardbirds
The Who
grid-list-infinite-demo
Dropdown Menu
Item