Start-aligned maintenance notice on the card surface with a bottom border, a clock icon that hides on phones, a status-page link and a dismiss button.
import { ClockIcon } from "@phosphor-icons/react/dist/ssr"
import {
Banner,
BannerContent,
BannerDismiss,
BannerLink,
} from "@/components/banner/banner"
// The copy: change text here, not in the markup.
const COPY = {
news: "Scheduled maintenance: Saturday, 02:00 to 03:00 UTC.",
// Replaces news below the sm breakpoint, so the banner holds one line.
newsShort: "Maintenance Sat, 02:00 UTC.",
newsLink: "Status page",
} as const
export default function MinimalBanner02() {
return (
<Banner className="border-b bg-card text-card-foreground">
<ClockIcon aria-hidden="true" className="size-5 shrink-0 max-sm:hidden" />
<BannerContent>
<p className="min-w-0">
<span className="sm:hidden">{COPY.newsShort}</span>
<span className="max-sm:hidden">{COPY.news}</span>
</p>
<BannerLink href="#">{COPY.newsLink}</BannerLink>
</BannerContent>
<BannerDismiss />
</Banner>
)
}
pnpm dlx shadcn add @01orbital/minimal-banner-02npx shadcn add @01orbital/minimal-banner-02yarn shadcn add @01orbital/minimal-banner-02bunx --bun shadcn add @01orbital/minimal-banner-02Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/banner/minimal-banner-02/index.tsx, as source you own and edit.
import MinimalBanner02 from "@/components/blocks/banner/minimal-banner-02"
export default function Example() {
return <MinimalBanner02 />
}npm: @phosphor-icons/react. The CLI installs them for you.
Registry pieces it installs with it:
bannerGradient Live Event Banner
Centered live-event banner on the page background washed with a low-opacity gradient across chart colors 1, 3 and 5, with a join link and dismiss button.
Muted 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.