Outline

The outline banner keeps the page background and closes with a hairline border, for quieter notices above a header.

Dependencies

@radix-ui/react-slotmotionclass-variance-authority@hugeicons/react@hugeicons/core-free-icons

Interaction Type

Press the close button to dismiss the banner. The close button is reachable by keyboard and shows the accent focus ring.

Props

Options you can pass to customize this component.

Prop

Type

Description

message

ReactNode

Banner text. Defaults to "Install any component with one command, no setup beyond shadcn."

linkLabel

string

Link text after the message. Defaults to "Get started". Pass an empty string to hide it.

href

string

Where the link points.

open

boolean

Controlled open state.

defaultOpen

boolean

Initial open state. Defaults to true.

onOpenChange

(open: boolean) => void

Called when the banner is dismissed.

dismissible

boolean

Shows the dismiss button. Defaults to true.

dismissLabel

string

Accessible label of the dismiss button. Defaults to "Dismiss banner".

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/banner-outline.json

How to use

<BannerOutline
  message="Install any component with one command."
  linkLabel="Get started"
  href="/components"
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

acme.app

Install any component with one command, no setup beyond shadcn.Get started

npx shadcn@latest addhttps://ui.nexvyn.dev/r/banner-outline.json