Does Navbar Announcement work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Navbar Announcement

Dismissible announcement bar above a nav with a Cmd+K search palette and a mobile sheet.

Type: Navbar section
Styles: Light, Enterprise
Licence: Charcoal UI Pro

About Navbar Announcement

Navbar Announcement puts a dismissible accent bar above a clean navigation, with a search button that opens a command palette on Cmd+K and a slide-out sheet for mobile.

It is a full-width navbar section for React and Tailwind CSS 4, in a light and enterprise style. Preview it at any width above, then install it with one command.

When to use Navbar Announcement

SaaS products announcing a release.
Docs and wiki tools.
Developer platforms.
Version 2 launches.

How it is built

Uses Command Menu and Sheet, listens for Cmd or Ctrl+K, and the brand, announcement, links and CTA are props.

It is composed from Button, Command Menu, Sheet, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Navbar Announcement

Navbar Announcement is part of 5 full templates, so you can see it in a finished page.

Quill template: Ask your data, get answers.
Vellum template: Find anything your team ever wrote.
Runway template: Push to deploy, in every region.
Hexwork template: The framework, and the people behind it.
Relaunch template: Announce the big new version.
Navbar Floating: A floating glass React navbar that hides on scroll with a mobile sheet
Navbar Mega Menu: A full-width React navbar with a mega menu on hover or focus
Navbar Centered: An editorial shop React navbar with a centred serif wordmark that shrinks
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Command Menu: An animated React command palette with fuzzy search, groups and keyboard control
Sheet: An animated React side sheet on the native dialog element that you can fling closed

Install Navbar Announcement

npx shadcn@latest add @charcoal/navbar-announcement

Navbar Announcement is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Navbar Announcement work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Command Menu: ⌘K palette with fuzzy filtering, grouped results, a gliding highlight and full keyboard control.
Sheet: Side panel on the native <dialog> element. It slides in from either edge, and you can fling it back to close.

Navbar Announcement as Markdown