Skip to content

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

Free

Simple Right Drawer for Vue

A right drawer titled Drawer Title, with a short description, one line of text, and Confirm and Cancel.

UI library: Ark UI

Open Right Drawer slides a panel in from the right. It shows a title, a short description, one line of text, and Confirm and Cancel.

Use it for details beside the page on a phone. On a desktop, a Sheet is the usual side panel. In Vue, Ark UI closes it when the panel is swiped away.

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="right">
  <DrawerTrigger :asChild="true">
    <Button variant="outline">Open Right Drawer</Button>
  </DrawerTrigger>
  <DrawerContent :showBar="false">
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>
        This drawer slides in from the right side.
      </DrawerDescription>
    </DrawerHeader>
    <div class="p-4">
      <p class="text-muted-foreground text-sm">
        Right-side drawers are great for supplementary content, settings, or detail views.
      </p>
    </div>
    <DrawerFooter>
      <Button>Confirm</Button>
      <DrawerClose :asChild="true">
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

FAQ

How does this drawer open from the right?

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

What's inside the panel?

DrawerHeader with Drawer Title and This drawer slides in from the right side, one paragraph, and DrawerFooter with Confirm and Cancel.

What do Confirm and Cancel do?

Cancel is a DrawerClose, so it dismisses the drawer. Confirm is a plain Button with no handler. DrawerClose takes asChild and merges onto the Button inside it.

Is there a drag bar?

No. A side or top drawer still follows a swipe, but it doesn't draw the bar. showBar={false} on DrawerContent hides it.

How does the trigger open it?

An outline button opens the drawer. Its text, Open Right Drawer, is the accessible name. DrawerTrigger takes asChild and merges onto the one Button inside it.

When should I use a right Drawer instead of a Sheet?

Pick a Drawer when people should be able to drag the panel, which feels natural on touch screens. A Sheet slides in from an edge without the drag and suits desktop side panels; a Dialog is centered.

API Reference

Drawer

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

Button

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

All 22 drawer examples