Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Drawer examples · Top

Top Drawer Quick Actions for React

A top drawer with a three-column grid of six quick action buttons, each an icon over a label.

Framework
UI library

Six quick actions in a top drawer: New File, Upload, Download, Share, Settings and More, as tall outline buttons in a three-column grid. Each button stacks its icon over its label, and the grid stays centered on wide screens.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the grid laid out?

A grid grid-cols-3 gap-4, capped at max-w-2xl and centered with mx-auto. Each button is h-20 flex-col, so the icon sits over the label.

What do screen readers hear for each action?

The label, such as New File or Upload. The icons are aria-hidden.

Do the actions do anything?

Not yet: they're outline Buttons with no handler. Run each action from its button, and close the drawer once it starts: Pass open to Drawer; onOpenChange receives the next boolean.

Why do New File and More share an icon?

Both use the plus icon in this demo. Give More its own icon, such as an ellipsis, so the two don't look alike.

How does Quick Actions open the drawer?

An outline button opens the drawer. Its text, Quick Actions, is the accessible name. The Button goes in the render prop of DrawerTrigger. The bolt icon before it is aria-hidden.

How does the drawer open from the top?

swipeDirection="up" on Drawer puts it on the top edge. The prop names the swipe that closes the drawer, so up docks it at the top; leave it out for a bottom drawer.

All 22 drawer examples