Staaarter

Announcement Highlight Box

A single centered bordered card carrying an optional badge, a heading, a short description, and a highlighted pill callout below it, suited to an announcement, release-highlight, or promo section.

By Staaarter Team
Feature
Docs
Live preview

Docs

Installation

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

npx shadcn add https://staaarter.com/r/announcement-highlight-box.json

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

Usage

The file also exports feature139Demo, 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 { Feature139, feature139Demo } from "@/components/blocks/feature/feature139";

export default function Page() {
  return <Feature139 {...feature139Demo} />;
}

Props

PropTypeDefaultDescription
badgestringnoneOptional small badge above the heading.
headingstringnoneCard heading.
descriptionstringnoneSupporting copy under the heading.
highlightFeature139HighlightnoneLabel/value pair shown in the highlighted pill callout.
classNamestringnoneExtra classes for the outer section element.

Types

type Feature139Highlight = { label: string; value: string };

Behavior notes

  • Fully static server component, no client-side state.
  • The highlight pill uses a fixed Sparkles icon rather than an icon prop, since only one instance is ever rendered per block.