Skip to content

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

Free

Simple Top Drawer for Solid

A top drawer titled Top Drawer that slides down from the top, with a short description and Close.

UI library: Ark UI

Open Top Drawer slides a panel down from the top. It shows Top Drawer, a short description, one line of text, and Close.

Use it for a notice that belongs at the top of the screen. A notice that must stay can be an Alert. In Solid, 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="up">
    <DrawerTrigger asChild={props => <Button {...props()} variant="outline">Open Top Drawer</Button>} />
    <DrawerContent showBar={false}>
      <DrawerHeader>
        <DrawerTitle>Top Drawer</DrawerTitle>
        <DrawerDescription>
          This drawer slides down from the top.
        </DrawerDescription>
      </DrawerHeader>
      <div class="p-4">
        <p class="text-muted-foreground text-sm">
          Top drawers are useful for search bars, notifications, and quick
          action panels.
        </p>
      </div>
      <DrawerFooter>
        <DrawerClose asChild={props => <Button {...props()} variant="outline">Close</Button>} />
      </DrawerFooter>
    </DrawerContent>
  </Drawer>

FAQ

How does this 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.

What's inside the drawer?

DrawerHeader with Top Drawer and This drawer slides down from the top, one paragraph, and DrawerFooter with Close.

How does Close work?

It's a DrawerClose, so it dismisses the drawer. Swiping it back toward its edge, Escape and a click on the overlay all close it, and focus goes back to the trigger. asChild on DrawerClose receives props: spread them onto the button.

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 Top Drawer, is the accessible name. asChild on DrawerTrigger receives props: spread them onto the button.

When should I use a top Drawer?

When the content reads best from the top down: a search bar, a banner, a row of actions. 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="up", asChild, props and showBar={false}. The rest is on the Drawer page.

Button

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

All 22 drawer examples