Staaarter

Dismissible Banner Hero

Centered hero with a dismissible top announcement bar, dual CTAs, trust text, and a wide media panel below. Perfect for launches that want to lead with timely news without permanently taking up header space.

By Staaarter Team
Hero
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/dismissible-banner-hero.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/hero/hero3.tsx instead.

Usage

The file also exports hero3Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Hero3, hero3Demo } from "@/components/blocks/hero/hero3";

export default function Page() {
  return <Hero3 {...hero3Demo} />;
}

Props

PropTypeDefaultDescription
bannerTextstringundefinedTop announcement bar text; the bar only renders when this is set.
bannerHrefstringundefinedWraps bannerText in a link when set; otherwise it renders as plain text.
headingReactNodenoneMain headline.
descriptionstringundefinedSupporting subtext below the heading.
buttonsButtonItem[][]CTA buttons below the description.
trustTextstringundefinedSmall text below the CTAs, e.g. pricing or guarantee copy.
imageMediaSlotImageundefinedWide media panel below the hero copy; falls back to a placeholder when omitted.
classNamestringnoneExtra classes for the outer section element.

Types

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

  • The dismiss button is real local state: clicking it collapses the banner via a max-height/opacity transition and there is no way to bring it back without reloading the block, matching a real one-time announcement bar.
  • The banner only renders at all when bannerText is supplied; there is no reserved empty space for it otherwise.
  • Both CTA buttons are inert placeholders (href defaults to "#" in the demo) with no real navigation target wired up.

More Hero Blocks

View all →

Metrics Counter Hero

Centered hero with a badge pill, dual CTAs, avatar social proof, and stat counters that animate up when scrolled into view.

Split Announcement Hero

Split hero with an image on one side and a short list of dated announcement links on the other.

Layered Screens Hero

Split hero with a feature checklist on one side and two overlapping browser-frame screenshots on the other.

App Showcase Hero

Split hero with a feature checklist and dual store CTAs beside a phone-frame screenshot mockup.