shadcn.io is an independent project built on shadcn/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 Svelte, Ark UI does not install the update.
Installation
Anatomy
Usage
<Drawer swipeDirection="up"><DrawerTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Show Notification</Button>{/snippet}</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>{#snippet asChild(props)}<Button {...props({ "aria-label": "Dismiss" })} size="icon-sm" variant="ghost"><XIcon aria-hidden="true" /></Button>{/snippet}</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.
API Reference
Drawer
Sets swipeDirection="up" and showBar={false}. The rest is on the Drawer page.
Button
Sets props, variant="outline", size="sm", aria-label, Dismiss and size="icon-sm". The rest is on the Button page.
