@primer/react-brand@0.65.0

Minor Changes

• #1252 e5ae233 Thanks @danielguillan! - Added new Tiles component for displaying a responsive grid of logos or icons with optional interactivity.

  🔗 See the documentation for usage examples

• #1264 ff4c8d3 Thanks @rezrah! - Deprecated the IDE component. It will be removed in a future release.

• #1239 9b201fd Thanks @rezrah! - Added presentational updates to the LogoSuite component.

  New features

  • New gridline-expressive variant

    <LogoSuite variant="gridline-expressive">
      <LogoSuite.Heading>New GridLine variant</LogoSuite.Heading>
      <LogoSuite.Logobar>{/* logos */}</LogoSuite.Logobar>
    </LogoSuite>

    🔗 Storybook example

  • New takeoverButton prop on LogoSuite.Logobar

    <LogoSuite.Logobar takeoverButton={{label: 'Learn more', href: '/customers'}}>{/* logos */}</LogoSuite.Logobar>

    🔗 Storybook example

  Accessibility improvements

  • marquee feature starts paused when prefers-reduced-motion: reduce is enabled
  • marquee feature pauses on focus and retains position when unfocused
  • marquee logos that are duplicated internally are now marked as inert

• #1256 5814563 Thanks @rezrah! - Removed condensed font-stretch value in Statistic.Heading. Statistic headings will now display at their default width instead of 75% condensed.

• #1254 24623ef Thanks @rezrah! - Updated ButtonGroup defaults

  • First Button in the group now defaults to accent instead of primary
  • Second Button in the group now defaults to subtle without an arrow instead of secondary

• #1254 24623ef Thanks @rezrah! - Updates to CTABanner component:

  • Default heading size changed from '1' to '3'.

  • align default changed from 'start' to 'center'.

  • A new variant prop controls overall layout of the banner. Three variants are available: default, balanced, and minimal.

    <CTABanner variant="balanced">
      <CTABanner.Heading>Heading</CTABanner.Heading>
      <CTABanner.Description>Description</CTABanner.Description>
      <CTABanner.ButtonGroup>
        <Button>Action</Button>
      </CTABanner.ButtonGroup>
      <CTABanner.Image src="/image.png" alt="description" />
    </CTABanner>

  • New CTABanner.Image sub-component: Renders an image within the banner. Used in the balanced variant for the two-column layout.

  • New hasGridLines prop: Enables GridLine borders around the banner, complementary to hasBorder.

  • New leadingComponent prop: Escape-hatch for inserting a custom React component above the heading content. Similar to trailingComponent

  ⚠️ Visual breaking change to CTABanner:

  • hasShadow has been marked as deprecated and the previous default styles have been removed in this release for better out-of-the-box defaults. In a future release we will remove the prop entirely.

• #1257 f881785 Thanks @rezrah! - Updates to the FAQ, FAQGroup, and Accordion components.

  • Accordion

    • Replaced +/- text toggles with chevrons
    • New item border color and transitions for active and hover state
    • Restyled emphasis variant
    • Updated typography
    • Added weight prop to Accordion.Heading. Forwards all weight options from the Heading component.

  • FAQ

    • New variant prop, supporting default and gridline options.
    • Updated typography
    • Added weight prop to Accordion.Heading. Forwards all weight options from the Heading component.

  • FAQGroup

    • New variant prop, supporting default and gridline options.
    • Updated button appearance for tablist
    • Updated typography

• #1231 d8b4d5e Thanks @danielguillan! - Updates to River component

  New Features

  • New River prop: variant. This prop controls the layout and appearance of the River component. Two variants are available: default and gridline.

    The default variant is the pre-existing River configuration and remains the default value.

    The gridline variant adds lateral padding and borders for use within bordered grid layouts.

    <River variant="gridline" />

  • New River.Visual prop: imageBackgroundColor. Set to 'subtle' to create a full-bleed container with a background color and the image/video centered inside with padding.

    <River variant="gridline">
      <River.Visual imageBackgroundColor="subtle">
        <img src="..." alt="..." />
      </River.Visual>
      <River.Content>...</River.Content>
    </River>

  • New River.Content prop: align. Controls vertical alignment of content within its container. Values: 'center' (default), 'block-end'.

  • EyebrowText support: River.Content now accepts EyebrowText as a child for adding small, uppercase labels above the heading.

    <River.Content>
      <EyebrowText>Feature</EyebrowText>
      <Heading>Title</Heading>
      <Text>Description</Text>
    </River.Content>

  • New RiverBreakout prop: variant. This prop controls the layout and appearance of the RiverBreakout component. Two variants are available: default and gridline.

    The gridline variant adds horizontal border lines, lateral spacing, and supports vertical dividers for the trailing component on tablet+ viewports.

    <RiverBreakout variant="gridline">
      <RiverBreakout.A11yHeading>Title</RiverBreakout.A11yHeading>
      <RiverBreakout.Visual>
        <img src="..." alt="..." />
      </RiverBreakout.Visual>
      <RiverBreakout.Content trailingComponent={Timeline} trailingComponentDivider>
        <Text>Description</Text>
      </RiverBreakout.Content>
    </RiverBreakout>

  • RiverBreakout padded background support: RiverBreakout.Visual now supports imageBackgroundColor="subtle" to display the visual with a padded background container that bleeds to the gridline borders.

Patch Changes

• #1268 70c85ea Thanks @rezrah! - Reduced the gap between Hero.Label and Hero.Heading.

• #1248 39772c1 Thanks @rezrah! - Updates to the SubNav component:

  • Visual overhaul of active states, typography, and narrow viewport menu toggle
  • Top and bottom borders now included by default on the container. This may cause double borders if the surrounding layout already applies borders
  • ⚠️ hasShadow prop is now deprecated. It will be removed in a future release
  • SubNav.Action default variant changed from primary to accent
  • No breaking API changes

• #1259 b7d7220 Thanks @rezrah! - - Remove 100vw width from SubdomainNavBar.Search component, as it was causing visual overflow on narrow viewports.

  • Applies position: relative to non-fixed SubdomainNavBar container to properly contain absolute children.

• #1256 5814563 Thanks @rezrah! - Added new props to Grid component for tighter layout control:

  • columnGap: controls the gap between columns. Accepts 'default' or 'none'.
  • rowGap: controls the gap between rows. Accepts 'default' or 'none'.
  • enableGutters: enables or disables default gutters. Defaults to true.

  No breaking changes. Both updates are opt-in and previous gap values remain the default.

• #1246 [32d8b4d...

@primer/brand-primitives@0.65.0

Minor Changes

• #1257 f881785 Thanks @rezrah! - Updates to design tokens for FAQ, FAQGroup, and Accordion components.

  • Removed --brand-Accordion-border-color-emphasis token
  • Removed --brand-Accordion-toggle-color-end
  • Removed --brand-FAQ-color-tabBg-selected token
  • Added --brand-FAQGroup-buttonIndicator-idle, --brand-FAQGroup-buttonIndicator-hover, --brand-FAQGroup-buttonIndicator-active tokens

• #1231 d8b4d5e Thanks @danielguillan! - Updates to River component

  New Features

  • New River prop: variant. This prop controls the layout and appearance of the River component. Two variants are available: default and gridline.

    The default variant is the pre-existing River configuration and remains the default value.

    The gridline variant adds lateral padding and borders for use within bordered grid layouts.

    <River variant="gridline" />

  • New River.Visual prop: imageBackgroundColor. Set to 'subtle' to create a full-bleed container with a background color and the image/video centered inside with padding.

    <River variant="gridline">
      <River.Visual imageBackgroundColor="subtle">
        <img src="..." alt="..." />
      </River.Visual>
      <River.Content>...</River.Content>
    </River>

  • New River.Content prop: align. Controls vertical alignment of content within its container. Values: 'center' (default), 'block-end'.

  • EyebrowText support: River.Content now accepts EyebrowText as a child for adding small, uppercase labels above the heading.

    <River.Content>
      <EyebrowText>Feature</EyebrowText>
      <Heading>Title</Heading>
      <Text>Description</Text>
    </River.Content>

  • New RiverBreakout prop: variant. This prop controls the layout and appearance of the RiverBreakout component. Two variants are available: default and gridline.

    The gridline variant adds horizontal border lines, lateral spacing, and supports vertical dividers for the trailing component on tablet+ viewports.

    <RiverBreakout variant="gridline">
      <RiverBreakout.A11yHeading>Title</RiverBreakout.A11yHeading>
      <RiverBreakout.Visual>
        <img src="..." alt="..." />
      </RiverBreakout.Visual>
      <RiverBreakout.Content trailingComponent={Timeline} trailingComponentDivider>
        <Text>Description</Text>
      </RiverBreakout.Content>
    </RiverBreakout>

  • RiverBreakout padded background support: RiverBreakout.Visual now supports imageBackgroundColor="subtle" to display the visual with a padded background container that bleeds to the gridline borders.

Patch Changes

• #1248 39772c1 Thanks @rezrah! - Added new tokens for SubNav component

@primer/brand-css@0.65.0

@primer/brand-css@0.65.0

@primer/react-brand@0.64.0

Minor Changes

• #1220 661ae42 Thanks @rezrah! - Updates to Hero component

  ⚠️ Important: Breaking changes are included in this update.

  Breaking Changes

  • Hero.Label: No longer extends Label component. It now renders as plain text with monospace font and in uppercase. Props like size and color are no longer supported.

    Update usage as follows:

    - <Hero.Label color="red">Red labels</Hero.Label>
    + <Hero.Label>Default label</Hero.Label>

  • Hero.Description: Default size changed from '350' to '200'. The default variant changed from 'default' to 'muted'.

  • Hero.PrimaryAction: Default button variant changed from 'primary' to 'accent'.

    Revert to previous style:

    - <Hero.PrimaryAction>Button</Hero.PrimaryAction> <-- now accent (green) variant
    + <Hero.PrimaryAction variant="primary">Button</Hero.PrimaryAction> <--revert to primary variant

  New Features

  • New Hero prop: variant. This prop controls overall layout, appearance and motion in the Hero. Two variants are available: default and gridline.

    The default variant is the pre-existing Hero configuration, and remains the default value to minimize breaking changes.

    The gridline layout is a new layout that can be opted-into. This is an experimental layout and configuration.

    <Hero variant="gridline" />

  • New Hero.Label animations: New animate and animationDelay props for text cursor animation effect.

  • New image positions: Hero.Image and Hero.Video now support 'inline-start', 'inline-end-padded', and 'inline-start-padded' positions.

  • New Hero.Video poster props: poster, posterAltText, and posterTitle for displaying a custom poster image with a play button overlay before the video loads. Video content is hidden until the user clicks the poster to play.

  • imageBackgroundColor prop: Set to 'subtle' for a subtle background on the image container.

  • imageContainerRef prop: Ref access to the image container element.

  • Built-in animations: When using variant="gridline", heading, description, image, and actions animate automatically on load.

  Other

  • Hero.Image border radius has been reduced from large to medium.
  • Hero internal grids have been optimized on medium (tablet) breakpoints to appear in the stacked layout (mobile). This is a layout improvement that prevents cramped image layouts.

Patch Changes

• #1220 661ae42 Thanks @rezrah! - Added additional customization options to the Box component

  • Responsive border width values:

    <Box
      borderWidth={{narrow: 'thin', regular: 'none'}} // now accepts an Object
    />

  • Border width can be set to none

    <Box borderBlockEndWidth={{narrow: 'thin', wide: 'none'}} />

  • Fixed bug whereby adding individual borders wasn't previously possible

    <Box borderBlockStartWidth="thin" borderInlineEndWidth="thin" borderInlineStartWidth="thin" />

  • Arbitrary background color values (e.g. CSS variables)

    <Box backgroundColor="var(--base-color-scale-gray-1)" />

• #1220 661ae42 Thanks @rezrah! - Fixed visual bug in VideoPlayer where the progress bar was incorrectly positioned when the parent uses flex child positioning.

• #1220 661ae42 Thanks @rezrah! - Added new reveal-in-up animation and immediate triggers to AnimationProvider

  <AnimationProvider animationTrigger="immediate">
    <Box animate="reveal-in-up">Wipe in up animation that runs immediately</Box>
  </AnimationProvider>

• #1220 661ae42 Thanks @rezrah! - Added position prop to Card.Image

  • New block-end position option to place the image below content

    <Card>
      <Card.Image src="/image.png" position="block-end" /> // Allows image to appear at the bottom of the card.
      <Card.Heading>Title</Card.Heading>
    </Card>

  • Fixed layout issue when combining align="center" with position="block-end"

@primer/brand-primitives@0.64.0

@primer/brand-primitives@0.64.0

@primer/brand-css@0.64.0

@primer/brand-css@0.64.0

@primer/react-brand@0.63.0

Minor Changes

• #1229 d851b4e Thanks @danielguillan! - Renamed font files to replace URL-unsafe characters (square brackets and commas) with hyphens

  ⚠️ Breaking change: Font file names have changed. If you are importing font files directly, update your imports:

  - @primer/react-brand/fonts/MonaSansVF[wdth,wght,opsz].woff2
  + @primer/react-brand/fonts/MonaSansVF-wdth-wght-opsz.woff2
  
  - @primer/react-brand/fonts/MonaSansMonoVF[wght].woff2
  + @primer/react-brand/fonts/MonaSansMonoVF-wght.woff2

@primer/brand-primitives@0.63.0

@primer/brand-primitives@0.63.0

@primer/brand-css@0.63.0

@primer/brand-css@0.63.0

@primer/react-brand@0.62.0

Minor Changes

• #1225 a1caad6 Thanks @rezrah! - Breaking change: Minimum Node.js version is now v24 (LTS)

  If you're using an older version, please upgrade to Node.js 24 LTS before updating to this release.

Patch Changes

• #1227 4733b38 Thanks @rezrah! - Updated the @primer/octicons-react library dependency, which includes the refreshed GitHub logos for 2026.