Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area.

Explore the following examples based on various styles, sizes, and positionings to leverage the sticky banner component and increase marketing conversions with a responsive element supporting dark mode.

To start using the banner component you need to import it from flowbite-react:

import { Banner } from "flowbite-react";

Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner.

This example can be used to position the sticky banner to the bottom side of the page instead of the top side.

Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner. Set a different width by using the max-w-{*} utility classes from Tailwind CSS.

This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page.

This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links.

Theme#

This component is a work in progress, and currently doesn't have a theme. It may in future updates.

To learn more about how to customize the appearance of components, please see the Theme docs.

References#