Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Top Drawer Quick Actions for Vue

A top Quick Actions drawer with six buttons in three columns: New File, Upload, Download, Share, Settings, and More.

UI library: Ark UI

Quick Actions drops from the top. Six outline buttons sit in three columns: New File, Upload, Download, Share, Settings, and More, each an icon over a label.

Use it for common actions at the top of a phone screen. If one action is the primary one, a Button in the page is clearer. In Vue, Ark UI does not perform the action.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Drawer anatomy: grabber, title, description, content, close

Usage

<Drawer swipeDirection="up">
  <DrawerTrigger :asChild="true">
    <Button variant="outline">
      <ZapIcon aria-hidden="true" data-icon="inline-start" />Quick Actions
    </Button>
  </DrawerTrigger>
  <DrawerContent :showBar="false">
    <DrawerHeader>
      <DrawerTitle>Quick Actions</DrawerTitle>
      <DrawerDescription>Perform common actions quickly from here</DrawerDescription>
    </DrawerHeader>
    <div class="p-4">
      <div class="mx-auto grid max-w-2xl grid-cols-3 gap-4">
        <Button class="h-20 flex-col gap-2" variant="outline">
          <PlusIcon aria-hidden="true" class="size-6" />
          <span class="text-xs">New File</span>
        </Button>
        <Button class="h-20 flex-col gap-2" variant="outline">
          <UploadIcon aria-hidden="true" class="size-6" />
          <span class="text-xs">Upload</span>
        </Button>
        <Button class="h-20 flex-col gap-2" variant="outline">
          <DownloadIcon aria-hidden="true" class="size-6" />
          <span class="text-xs">Download</span>
        </Button>
        <Button class="h-20 flex-col gap-2" variant="outline">
          <Share2Icon aria-hidden="true" class="size-6" />
          <span class="text-xs">Share</span>
        </Button>
        <Button class="h-20 flex-col gap-2" variant="outline">
          <SettingsIcon aria-hidden="true" class="size-6" />
<!-- The rest of the file is under Installation. -->

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 and listen to @open-change, which receives details.open.

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. DrawerTrigger takes asChild and merges onto the one Button inside it. 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.

API Reference

Drawer

Sets swipeDirection="up" and asChild. The rest is on the Drawer page.

Button

Sets variant="outline". The rest is on the Button page.

All 22 drawer examples