Skip to content

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

Free

Top Drawer Notification Banner for Ark UI

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

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 React, Ark UI does not install the update.

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

Anatomy

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

Usage

<Drawer swipeDirection="up">
  <DrawerTrigger asChild>
    <Button variant="outline">Show Notification</Button>
  </DrawerTrigger>
  <DrawerContent showBar={false}>
    <div className="flex flex-wrap items-center justify-between gap-4 border-info/32 border-b bg-info/4 p-4">
      <div className="flex items-center gap-3">
        <CircleAlertIcon
          aria-hidden="true"
          className="size-5 shrink-0 text-info"
        />
        <div className="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 className="flex items-center gap-2">
        <Button size="sm" variant="outline">
          Update Now
        </Button>
        <DrawerClose asChild>
          <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 read details.open in onOpenChange.

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", asChild and showBar={false}. 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