# Primer Brand — @primer/react-brand v0.0.0-20260624121905

> Version-pinned documentation for @primer/react-brand v0.0.0-20260624121905, bundled with the installed package.
> These docs match this exact release; prefer them over https://primer.style/brand when the
> installed version differs from the latest. All links below are relative to this file.

## Getting started

- [Getting started (ESM)](docs/getting-started/esm.md): Primer Brand is open-sourced on GitHub and available on npm.
- [Getting started](docs/getting-started/index.md): Primer Brand is open-sourced on GitHub and available on npm.

## Introduction

- [Animation](docs/introduction/animation.md): Use animations to add visual interest and interactivity to a web page or application.
- [Guides](docs/introduction/index.md): Get started with Primer Brand
- [Theming](docs/introduction/theming.md)

## Primitives

- [Color](docs/primitives/color.md)
- [Primitives](docs/primitives/index.md): Learn about Primer Brand Primitives

## Layout

- [Box](docs/layout/Box/react.md): Use a box to simplify the process of applying one-off styles to an element
- [Grid](docs/layout/Grid/react.md): Use the grid component to create flexible and responsive grid-based layouts.
- [Layout](docs/layout/index.md)
- [Stack](docs/layout/Stack/react.md): Use the stack component to create a layout for its immediate children along the vertical or horizontal axis.

## Typography

- [Heading](docs/typography/Heading/react.md): Use the heading component to render title or subtitle text.
- [Text](docs/typography/Text/react.md): Use the text component create a range of body text
- [Typography](docs/typography/index.md)

## Components

- [Action menu](docs/components/ActionMenu/index.md): Use the action menu component to display a list of actions or selections that expand through a trigger button.
- [Anchor nav](docs/components/AnchorNav/index.md): Use the anchor nav component for prompt navigation to different sections of a page.
- [Avatar](docs/components/Avatar/react.md): Use the avatar component to display a thumbnail representation of a person.
- [Bento](docs/components/Bento/index.md): Use the bento to present content in a responsive grid layout.
- [Breadcrumbs](docs/components/Breadcrumbs/react.md): Breadcrumbs display the current page within the site's hierarchy, allowing users to easily navigate to a different level.
- [Breakout banner](docs/components/BreakoutBanner/react.md): Use a breakout banner to break up content on longer pages and highlight important information.
- [Button](docs/components/Button/react.md): Use the button component for the main actions on a page or form.
- [Button group](docs/components/ButtonGroup/react.md): Use the button group component to group related buttons together.
- [Card](docs/components/Card/react.md): Use the card component to display information in a compact way and link to other internal pages.
- [Comparison table](docs/components/ComparisonTable/index.md): Use the comparison table component to compare two products or features in a table format.
- [Components](docs/components/index.md): Primer Brand UI components
- [CTA banner](docs/components/CTABanner/react.md): Use the CTA banner component to highlight and create urgency around user actions.
- [CTA form](docs/components/CTAForm/react.md): Use the CTA form component to create a form that is used to collect minimal information from users.
- [Eyebrow banner](docs/components/EyebrowBanner/index.md): Use the eyebrow banner to highlight important information at the top of a page.
- [FAQ](docs/components/FAQ/react.md): Use the FAQ component to display content in a Q&A format.
- [Footnotes](docs/components/Footnotes/react.md): Use footnotes to display contextual information and cite sources in the page content.
- [Hero](docs/components/Hero/react.md): Use the hero component to render a full-width banner at the top of a page.
- [Icon](docs/components/Icon/index.md): Use the icon component to display Octicons with an optional background
- [IDE](docs/components/IDE/index.md): Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.
- [Image](docs/components/Image/react.md): Use the image component to display a graphical representation.
- [Label](docs/components/Label/react.md): Use the label component to add metadata or indicate the status of items.
- [Logo suite](docs/components/LogoSuite/react.md): Use a logo suite to present a list logos, such as sponsors or vendors.
- [Media playlist](docs/components/MediaPlaylist/index.md): Use MediaPlaylist to pair thumbnail-backed media items with a shared playback or media area.
- [Minimal footer](docs/components/MinimalFooter/index.md): Use the minimal footer component to provide a global footer featuring legal links, GitHub logomarks and footnotes.
- [Ordered list](docs/components/OrderedList/react.md): Use the ordered list component to display a list of numbered items.
- [Pagination](docs/components/Pagination/index.md): Use Pagination to display a sequence of links that allow navigation to discrete, related pages.
- [Pillar](docs/components/Pillar/react.md): Use the pillar component to group related content together.
- [Pricing options](docs/components/PricingOptions/index.md): Use the pricing options to display pricing plan information on a page.
- [Prose](docs/components/Prose/index.md): Use the prose component to apply Primer Brand styles to HTML markup.
- [River](docs/components/River/react.md): Use the river component to introduce a feature using a type and media pairing.
- [River accordion](docs/components/RiverAccordion/index.md): Use the river accordion to create expandable content panels with associated visuals.
- [River breakout tabs](docs/components/RiverBreakoutTabs/index.md): Use RiverBreakoutTabs to pair card-based tabs with a shared visual area on desktop and an accordion pattern on narrower viewports.
- [Section](docs/components/Section/react.md): Use the section component to group related content together.
- [Section intro](docs/components/SectionIntro/react.md): Use the section intro component to provide a title, optional description and link to a new section in the page.
- [Section intro stacked](docs/components/SectionIntroStacked/index.md): Use this section intro component to provide a heading, link and itemized content in a stacked layout.
- [Statistic](docs/components/Statistic/index.md): Use the statistic component display concise numerical information
- [Sub nav](docs/components/SubNav/index.md): A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
- [Subdomain nav bar](docs/components/SubdomainNavBar/index.md): Use the subdomain nav bar component for top level navigation for subdomain sites.
- [Tabs](docs/components/Tabs/index.md): Use Tabs to display a list of tabs with associated content panels.
- [Testimonial](docs/components/Testimonial/react.md): Use testimonial to display a quote from a customer or user.
- [Tiles](docs/components/Tiles/index.md): Use tiles to display a grid of logos or icons with optional links.
- [Timeline](docs/components/Timeline/index.md): Use the timeline component to display a list of connected items as a vertical timeline.
- [Token](docs/components/Token/index.md): Token is a compact representation of an object, and is typically used to show a collection of related metadata.
- [Tooltip](docs/components/Tooltip/index.md): Use the tooltip component to display a short message when a user hovers or focuses an interactive element.
- [Unordered list](docs/components/UnorderedList/react.md): Use the unordered list component to present a collection of items without specific ordering.
- [Video player](docs/components/VideoPlayer/index.md): Use the video player component to enable playback of self-hosted videos

## Forms

- [Checkbox](docs/forms/Checkbox/react.md): Use the checkbox component to select one or more options of a limited number of choices.
- [Checkbox group](docs/forms/CheckboxGroup/react.md): Checkbox group renders a set of checkboxes.
- [Form control](docs/forms/FormControl/index.md): Use the form control component to display form inputs alongside labels, validation and more.
- [Forms](docs/forms/index.md)
- [Radio](docs/forms/Radio/react.md): Use the radio component when a user needs to select one option from a list.
- [Radio group](docs/forms/RadioGroup/react.md): Radio group is used to render a short list of mutually exclusive options.
- [Select](docs/forms/Select/index.md): Use the select component to enable selection of one option from a list.
- [Text input](docs/forms/TextInput/index.md): Use the text input component for single-line text field.
- [Textarea](docs/forms/TextArea/index.md): Use the textarea component for multi-line text input form fields.