GovtBanner

Usage

import { GovtBanner } from "@opengovsg/oui"

<GovtBanner />

import { GovtBanner } from "@opengovsg/oui"export const Example = () => {  return <GovtBanner />}

Alternatively, install the component as local source via the shadcn CLI:

npx shadcn@latest add https://oui.open.gov.sg/r/govt-banner.json

pnpm dlx shadcn@latest add https://oui.open.gov.sg/r/govt-banner.json

npx shadcn@latest add https://oui.open.gov.sg/r/govt-banner.json

bunx --bun shadcn@latest add https://oui.open.gov.sg/r/govt-banner.json

GovtBanner is the standardised "A Singapore Government Agency Website" masthead that identifies an application as an official government service. It renders with role="banner" and includes a collapsible "How to identify" panel built on React Aria's useDisclosure, explaining how users can verify they are on a legitimate .gov.sg site. Place it as the first element on the page, above your own navigation.

Do not restyle the GovtBanner. It is a standardised government identifier, and consistency across all .gov.sg services is what lets citizens trust and recognise it. Its colors, copy, crest, icons, and internal layout are fixed and cannot be overridden. The classNames prop exposes only the outer banner and mainContentContainer slots, for narrow integration needs such as aligning the banner's horizontal padding with your page container (see Custom Styles).

When to use

Use GovtBanner once per page, at the very top, to identify the site as an official government service. For prominent system-level messages such as maintenance notices or session warnings, use Banner instead.

Examples

Environment

Use the environment prop to display a note indicating a non-production environment. The value is uppercased and rendered as [NOTE: THIS IS A {environment} WEBSITE].

import { GovtBanner } from "@opengovsg/oui"export const Example = () => {  return <GovtBanner environment="staging" />}

Expanded by default

Set defaultExpanded to render the "How to identify" panel open on first paint (uncontrolled).

import { GovtBanner } from "@opengovsg/oui"export const Example = () => {  return <GovtBanner defaultExpanded />}

Controlled visibility

Control the panel's open state with the isExpanded and onExpandedChange props.

import { useState } from "react"import { GovtBanner } from "@opengovsg/oui"export const Example = () => {  const [isExpanded, setIsExpanded] = useState(false)  return <GovtBanner isExpanded={isExpanded} onExpandedChange={setIsExpanded} />}

Accessibility

• The component renders with role="banner" to identify it as a page-level landmark.
• The "How to identify" trigger is a real <button> wired with React Aria's disclosure pattern; it exposes aria-expanded and toggles the panel on press and keyboard activation (Enter / Space).
• The chevron rotation is purely decorative and is suppressed when reduced motion is preferred.
• The "Trusted websites" link opens in a new tab; its external-link icon is marked aria-hidden so it is not announced.

Slots

Slots are named regions of the component you can target with custom Tailwind classes via the classNames prop. Only the two outer container slots are exposed — the banner's internal layout and styling are fixed to keep it consistent across all .gov.sg services.

• banner: The outermost <div> wrapper carrying the banner role.
• mainContentContainer: The wrapper around the always-visible top row (crest + main content).

Custom Styles

The two container slots are exposed only to let you fit the banner into your page's layout. The intended use is aligning the banner's horizontal padding with your page container so the masthead lines up with the content below it. The example below widens the gutters via the banner and mainContentContainer slots.

import { GovtBanner } from "@opengovsg/oui"export const Example = () => {  return (    <GovtBanner      classNames={{        banner: "px-8 lg:px-16",        mainContentContainer: "mx-auto max-w-5xl",      }}    />  )}

Props

GovtBanner

Inherits all remaining props from React Aria's DisclosureProps.