Neoconstruct banner on cream paper with a hard ink rule below: a red Ribbon Badge for the seats left, the workshop notice, and a small Neoconstruct button with an arrow and an offset shadow that keeps its label on phones.
import { cn } from "cn"
import {
Banner,
BannerContent,
BannerDismiss,
BannerLink,
} from "@/components/banner/banner"
import { RibbonBadge } from "@/components/neoconstruct/neoconstruct-badge"
import {
ArrowRight,
buttonVariants,
} from "@/components/neoconstruct/neoconstruct-button"
// The copy: change text here, not in the markup.
const COPY = {
badge: "2 seats left",
// Replaces badge below the sm breakpoint.
badgeShort: "2 left",
news: "October workshop at the Orbcore studio.",
newsLink: "Reserve a seat",
// Replaces newsLink below the sm breakpoint, so the banner holds one line.
newsLinkShort: "Reserve",
} as const
export default function Banner05() {
return (
<Banner
data-theme="neoconstruct"
className="border-b-3 border-border bg-background py-3 text-foreground"
>
<BannerContent>
<RibbonBadge className="shrink-0">
<span className="sm:hidden">{COPY.badgeShort}</span>
<span className="max-sm:hidden">{COPY.badge}</span>
</RibbonBadge>
<p className="min-w-0 max-sm:hidden">{COPY.news}</p>
<BannerLink
href="#"
labelOnPhone
icon={<ArrowRight />}
className={cn(
buttonVariants({ size: "sm" }),
"h-auto min-h-9 font-heading hover:no-underline max-sm:px-3"
)}
>
<span className="sm:hidden">{COPY.newsLinkShort}</span>
<span className="max-sm:hidden">{COPY.newsLink}</span>
</BannerLink>
</BannerContent>
<BannerDismiss />
</Banner>
)
}
pnpm dlx shadcn add @01orbital/banner-05npx shadcn add @01orbital/banner-05yarn shadcn add @01orbital/banner-05bunx --bun shadcn add @01orbital/banner-05Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/banner/banner-05/index.tsx, as source you own and edit.
import Banner05 from "@/components/blocks/banner/banner-05"
export default function Example() {
return <Banner05 />
}npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
bannerfont-unboundedMuted Release Banner
Centered announcement bar on the muted ground with a release note, an arrow link and a dismiss button. A shorter line replaces the message below the md breakpoint.
New Feature Badge Banner
Accent-colored banner with a New badge before the message, an arrow link to the feature and a dismiss button. A shorter line swaps in on small screens.