@primer/react-brand/docs/index.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

# Primer Brand docs (v0.0.0-20260624121905)

These docs are bundled with `@primer/react-brand@0.0.0-20260624121905` and match your installed version.

New here? Start with [Getting started](getting-started/index.md) for installation, global
stylesheet and font setup. Component directories are named after their import (e.g.
`components/Button`), and `react.md` holds the import line, live examples and props.

## Getting started

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

## Introduction

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

## Primitives

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

## Layout

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

## Typography

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

## Components

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

## Forms

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