Component template for an announcement bar.

Introduction

Announcement bars highlight time-sensitive updates, offers, legal notices, or other key messages in a clear and accessible way.

Placing them at the top of the screen and using effective color, layout, and typography ensures the message stands out without interrupting the browsing experience and helps guide visitor attention to essential information or next steps.

Besides showing general messaging, running AB tests with different variations and applying personalization, such as tailoring promotions based on visitor location or behavior, can help optimize visibility, boost engagement, and drive higher conversion.

This template adds an announcement bar component to your project or creates a new project using Next.js if none is found in the current directory.

It comes fully integrated with Croct, giving you CMS, AB testing, and personalization out of the box.

Usage

To create a new project using this template, run:

npx croct@latest use croct://ui/component/announcement-bar

You can customize the template by specifying options:

npx croct@latest use croct://ui/component/announcement-bar --router=page

Options

The following options are available for this template:

OptionDescriptionRequiredDefault
projectNameThe name of the project.Nomy-app
versionThe Next.js version to use.Nolatest
routerThe router to use (app or page).Noapp
javascriptWhether to use JavaScript instead of TypeScript.Nofalse
contentThe URL of the slot content to use.Nonone
extensionThe URL of an extension template to apply.Nonone

Start building in seconds

Paste the following command in your terminal and let the CLI do the rest.

npx croct@latest init