ns-ui
A dismissible notice with a perforated edge: dismissing rips the panel off along the perforation, leaving a small permanent stub that reopens it.
Use when a dismissible notice the user may want back, since dismissing rips it off along a perforation and leaves a small permanent stub that reopens it rather than removing it with no route to recovery; pick toast-gravity-stack instead when the notice is transient and self-dismissing, or empty-state-dashed when the panel is a persistent empty region with a CTA rather than a notice.
Install
npx shadcn add https://design.helpmarq.comns-ui / banner-tear-stub — dismiss, then click the stub to reopen
Scheduled maintenance
This workspace will be read-only for about ten minutes starting at 02:00 UTC tonight.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | The notice's title. Also becomes the stub's accessible name once torn off ("Reopen: <title>"). |
| description? | ReactNode | — | Supporting copy shown under the title. |
| variant? | "info" | "urgent" | — | Swaps role=status for role=alert and the default icon for the more severe glyph. @default "info" |
| icon? | ReactNode | — | Custom icon replacing the built-in glyph. Always rendered aria-hidden — the accessible name comes from `title` and `dismissLabel`, not the icon. |
| open? | boolean | — | Controlled open state. Omit to let the component manage its own. |
| defaultOpen? | boolean | — | Initial open state when uncontrolled. @default true |
| onOpenChange? | (open: boolean) => void | — | Fires after a dismiss or a reopen, from a click or the keyboard. |
| dismissLabel? | string | — | Accessible name (and visible label) for the dismiss control. @default "Dismiss" |
| className? | string | — | — |