Skip to content

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

Free

Top Drawer Notification Banner for Vue

A top banner that says System Update Available, with an alert icon, Update Now, and a dismiss button.

UI library: Ark UI

Show Notification slides a strip down from the top. An alert icon, System Update Available, a short message, Update Now, and a dismiss button sit in that strip.

Use it for an update people can dismiss. If the message must stay in the page, use an Alert. In Vue, Ark UI does not install the update.

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">Show Notification</Button>
  </DrawerTrigger>
  <DrawerContent :showBar="false">
    <div class="flex flex-wrap items-center justify-between gap-4 border-info/32 border-b bg-info/4 p-4">
      <div class="flex items-center gap-3">
        <CircleAlertIcon aria-hidden="true" class="size-5 shrink-0 text-info" />
        <div class="flex flex-col gap-0.5">
          <DrawerTitle>System Update Available</DrawerTitle>
          <DrawerDescription>
            A new version is available. Update now to get the latest features.
          </DrawerDescription>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <Button size="sm" variant="outline">Update Now</Button>
        <DrawerClose :asChild="true">
          <Button aria-label="Dismiss" size="icon-sm" variant="ghost">
            <XIcon aria-hidden="true" />
          </Button>
        </DrawerClose>
      </div>
    </div>
  </DrawerContent>
</Drawer>

FAQ

What does the banner say?

DrawerTitle reads System Update Available and DrawerDescription reads A new version is available. Update now to get the latest features. Both sit beside the alert icon.

How is the banner colored?

With the info theme color: a light bg-info/4 fill, a border-info/32 bottom border and a text-info icon. Swap info for warning or destructive for other kinds of message.

How does the dismiss button work?

It's an icon-only DrawerClose with aria-label="Dismiss", so it closes the banner; the X is aria-hidden. Swiping up and Escape close it too.

What does Update Now do?

Nothing yet: it's a small outline Button with no handler. Start the update from it, then close the banner: Pass open to Drawer and listen to @open-change, which receives details.open.

How does the banner open?

An outline button opens the drawer. Its text, Show Notification, is the accessible name. DrawerTrigger takes asChild and merges onto the one Button inside it. In an app you'd open it from code instead, by controlling open.

How does the banner 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", size="sm", aria-label="Dismiss", size="icon-sm" and variant="ghost". The rest is on the Button page.

All 22 drawer examples