Filled

The filled banner inverts the page: a foreground surface with background-colored text, for announcements that should be seen first.

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 "New blocks are landing in Nexvyn UI, ready to copy into your project."

linkLabel

string

Link text after the message. Defaults to "Browse blocks". 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-filled.json

How to use

<BannerFilled
  message="New blocks are landing in Nexvyn UI."
  linkLabel="Browse blocks"
  href="/blocks"
/>

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

New blocks are landing in Nexvyn UI, ready to copy into your project.Browse blocks

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