Shadcn UI Banner Block
The Banner4 component is a concise and well-structured UI block designed to display prominent messages or announcements, like sales or important updates, to users. It features a customizable title and description and is intended to draw the user's attention with an optional call-to-action button. The component integrates well with shadcn components and adheres to a flexible layout that can accommodate different screen configurations.
This shadcn ui block provides a dismissible interface where users can read an announcement and close it when it is no longer required or relevant, enhancing user experience by preventing clutter. The component starts by default with its visibility parameter set to true, but it can be controlled programmatically using the defaultVisible prop. The design ensures that the component's primary function remains accessible on various devices by adapting its presentation between vertical and horizontal orientations depending on the screen size for optimal visibility and interaction.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
button @shadcn | Registry |