### Default Token Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Token/index.mdx
A basic example of the Token component displaying the text 'Guide'.
```jsx
Guide
```
--------------------------------
### Install Dependencies
Source: https://github.com/primer/brand/blob/main/CONTRIBUTING.md
Install project dependencies using npm.
```bash
npm install
```
--------------------------------
### Default SectionIntro Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/SectionIntro/react.mdx
A basic example of the SectionIntro component with a label, heading, description, and a link.
```jsx
LabelFocus on solving bigger problems
Spend less time creating boilerplate and repetitive code patterns, and more time on what matters: building great
software. Write a comment describing the logic you want and GitHub Copilot will immediately suggest code to
implement the solution.
Explore docs
```
--------------------------------
### Install Primer React Brand
Source: https://github.com/primer/brand/blob/main/README.md
Install the @primer/react-brand package as a project dependency using npm. Ensure Node.js and npm are installed.
```sh
npm install @primer/react-brand
```
--------------------------------
### Default Video Player Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/VideoPlayer/index.mdx
A basic example of the VideoPlayer component with a video source and a track.
```jsx
```
--------------------------------
### Default Media Playlist Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/MediaPlaylist/index.mdx
A basic example of the Media Playlist component displaying a list of videos with thumbnails, titles, and descriptions.
```jsx
Latest videos}>
See workflows for scoping context, choosing the right mode, and getting more focused Copilot answers.
}>
Use GitHub Copilot CLI planning to clarify goals, map an approach, and prepare implementation work.
}>
Get a quick look at TanStack AI and its open source approach to framework-agnostic AI tooling.
```
--------------------------------
### Default FAQ Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/FAQ/react.mdx
A standard implementation of the FAQ component displaying a list of questions and their corresponding answers. This example includes details on GitHub for Startups offers, eligibility, and partnership.
```jsx
<>
Frequently asked questionsWhat's included in the GitHub for Startups offer?
All GitHub for Startups companies receive up to 20 seats of GitHub Enterprise for free for year one and 50%
off year two. Learn more about the features and capabilities of GitHub Enterprise{' '}
here
.
Who is eligible to apply?
Startups who meet the following criteria are eligible to apply for the program:
Must be associated with a current GitHub for Startups partner.
Self-funded or funded (Seed-Series A)
Not a current GitHub Enterprise customer
Must not have previously received credits for GitHub Enterprise
What if my startup is not eligible? Are there other resources for me?
If you’re not currently eligible for the GitHub for Startups but would like to try GitHub Enterprise, please
feel to sign up for a trial
here
{''}.
How can my organization become a GitHub for Startups partner?
Any investor, accelerator, or startup support organization is eligible to apply for the GitHub for Startups
program.
```
--------------------------------
### Default Tooltip Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Tooltip/index.mdx
A basic example of a tooltip with default settings. It displays sample content when hovering over a button.
```jsx
```
--------------------------------
### Default Ordered List Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/OrderedList/react.mdx
A basic example of how to use the OrderedList component with several list items.
```jsx
Automatic security and version updatesGitHub Security AdvisoriesCode and secret scanningDependency reviewAutomated authentication and identity management
```
--------------------------------
### Default RiverBreakoutTabs Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/RiverBreakoutTabs/index.mdx
Demonstrates the default usage of RiverBreakoutTabs with multiple items, each containing a heading, content, and a visual. This setup is ideal for showcasing distinct but related information sections.
```jsx
Plan, review, and ship with CopilotPlan from your backlogBreak large issues into practical implementation steps.
Learn more
Review with contextKeep discussion, suggestions, and diffs together while you review.
Explore reviews
Merge with confidenceUse checks and approvals to move from code to merge safely.
See merge controls
```
--------------------------------
### Clone Repository
Source: https://github.com/primer/brand/blob/main/CONTRIBUTING.md
Clone the Primer Brand repository to start contributing.
```bash
git clone https://github.com/primer/brand
```
--------------------------------
### Tabs with Start Alignment
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Tabs/index.mdx
Demonstrates how to align tabs to the start of their container. This is useful for left-aligned navigation.
```jsx
Tab oneTab twoTab threePanel onePanel twoPanel three
```
--------------------------------
### Default Testimonial Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Testimonial/react.mdx
A basic example of the Testimonial component with a quote, name, and avatar.
```jsx
GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
of code we're writing.
David Ross
```
--------------------------------
### Default Timeline Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Timeline/index.mdx
A basic example of the Timeline component displaying three items. Ensure the `dir` attribute is set on the `` element.
```jsx
GitHub Codespaces offers a complete dev environment in seconds, so you can code, build, test, and open pull requests
from any repo anywhere.
GitHub Copilot is your AI pair programmer that empowers you to complete tasks 55% faster by turning natural language
prompts into coding suggestions.
GitHub Actions automates your build, test, and deployment workflow with simple and secure CI/CD.
```
--------------------------------
### Default River Component Examples
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/River/react.mdx
Demonstrates the default River component with different alignment options (start, end, center).
```jsx
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
felis nam pulvinar risus elementum.
Call to action
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
felis nam pulvinar risus elementum.
Call to action
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
felis nam pulvinar risus elementum.
Call to action
```
--------------------------------
### Default Heading Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/typography/Heading/react.mdx
Renders a basic heading with default styling.
```jsx
This is my super sweet heading
```
--------------------------------
### Default TextInput Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/forms/TextInput/index.mdx
A basic example of a TextInput component with an accessible label.
```jsx
```
--------------------------------
### Default Pillar Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Pillar/react.mdx
A basic Pillar with a heading and description.
```jsx
Collaboration is the key to DevOps successEverything you need to know about getting started with GitHub Actions.
```
--------------------------------
### Default LogoSuite Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/LogoSuite/react.mdx
A basic implementation of the LogoSuite component displaying a visually hidden heading and a logobar with two example logos (GitHub and Microsoft).
```jsx
Featured sponsors
```
--------------------------------
### Default CTABanner Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/CTABanner/react.mdx
A basic CTABanner with a heading, description, and a button group. This is the default display.
```jsx
Where the most ambitious teams build great things
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
felis nam pulvinar risus elementum.
```
--------------------------------
### Bento Layout Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Bento/index.mdx
An example of a Bento layout with items spanning different columns and rows. This showcases how to define item sizes within the grid.
```jsx
```
--------------------------------
### Basic SubdomainNavBar Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/SubdomainNavBar/index.mdx
A basic example of the SubdomainNavBar with a title, links, and primary/secondary actions. The component is designed to fix to the top of the viewport.
```jsx
CollectionsTopicsSocialPrimary CTASecondary CTA
```
--------------------------------
### Timeline with Emphasis Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Timeline/index.mdx
An example demonstrating how to emphasize text within Timeline items using the `` element for a duotone style. Ensure the `dir` attribute is set on the `` element.
```jsx
GitHub Codespaces offers a complete dev environment in seconds, so you can code, build, test, and open pull
requests from any repo anywhere.
GitHub Copilot is your AI pair programmer that empowers you to complete tasks 55% faster by turning natural
language prompts into coding suggestions.
GitHub Actions automates your build, test, and deployment workflow with simple and secure CI/CD.
```
--------------------------------
### Default Hero Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Hero/react.mdx
A basic Hero component with a label, heading, description, and primary/secondary actions.
```jsx
LabelThis is my super sweet hero heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
felis nam pulvinar risus elementum.
Primary actionSecondary action
```
--------------------------------
### Install Primer Brand CSS
Source: https://github.com/primer/brand/blob/main/packages/css/README.md
Install the Primer Brand CSS package using npm. This command adds the necessary files to your project for using Primer Brand components.
```sh
npm install --save @primer/brand-css
```
--------------------------------
### Default Card Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Card/react.mdx
Displays a card with a heading and description. The call to action text defaults to 'Learn more' but can be customized.
```jsx
Collaboration is the key to DevOps successEverything you need to know about getting started with GitHub Actions.
```
--------------------------------
### Default Footnotes Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Footnotes/react.mdx
Renders a list of footnotes with citations and links. Each footnote item is a distinct entry.
```jsx
import {Footnotes} from '@primer/react-brand'
import {InlineLink} from '@primer/react'
"Automating your workflow with GitHub Actions," GitHub Docs
https://docs.github.com/en/actions.
"About Issues," GitHub Docs
https://docs.github.com/en/issues.
"GitHub Copilot: Your AI pair programmer," GitHub
https://github.com/features/copilot/.
"Explore the GitHub Marketplace," GitHub Docs
https://github.com/marketplace.
"GitHub Pages basics," GitHub Docs
https://docs.github.com/en/pages.
```
--------------------------------
### Stacked Pillars Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Pillar/react.mdx
Use the `Stack` component to arrange multiple Pillars horizontally or vertically, with customizable gap and alignment.
```jsx
} />
HeadingEverything you need to know about getting started with GitHub Actions.} />
HeadingEverything you need to know about getting started with GitHub Actions.} />
HeadingEverything you need to know about getting started with GitHub Actions.
```
--------------------------------
### Default Unordered List Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/UnorderedList/react.mdx
A basic unordered list with several items. Use this for general lists where order does not matter.
```jsx
Automatic security and version updatesGitHub Security AdvisoriesCode and secret scanningDependency reviewAutomated authentication and identity management
```
--------------------------------
### IDE with GitHub Copilot Suggestions
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/IDE/index.mdx
Simulates GitHub Copilot suggestions by using the `suggestedLineStart` property to indicate where the suggestion should apply. The code is split into lines and mapped to an array, with empty lines preserved as spaces.
```jsx
import {IDE} from '@primer/react-brand'
{
const response = await fetch(...)
const drawScatterplot = (data, height, width) => {
const svg = d3.select("#scatterplot")
.data(data)
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("r", 5)
}
const json = await response.json();
return json.label === "pos";
}`
.split('\n')
.map(line => line || ' '),
},
]})
/>
```
--------------------------------
### Tabs Default Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Tabs/index.mdx
Demonstrates the basic usage of the Tabs component with multiple items and panels. Ensure all Tabs.Item components are followed by a corresponding Tabs.Panel.
```jsx
import {Tabs, Text} from '@primer/react-brand'
Tab oneTab twoTab threeTab fourTab fivePanel onePanel twoPanel threePanel fourPanel five
```
--------------------------------
### File Structure Before Monorepo Conversion
Source: https://github.com/primer/brand/blob/main/contributor-docs/adrs/adr-002-conversion-to-monorepo.md
Illustrates the directory structure of the Primer Brand repository before adopting a monorepo. It shows a flat structure with distinct directories for documentation, fonts, libraries, scripts, and source code including components and tokens.
```ascii
.
├── .storybook/
│ ├── main.js
│ ├── preview.js
│ └── ...
├── docs/
│ ├── src/
│ └── content/
│ ├── Button.documentation.mdx
│ └── ...
├── fonts/
│ ├── MonaSans.woff
│ └── fonts.css
├── lib/
│ ├── css/
│ ├── design-tokens/
│ ├── Button/
│ ├── ...
│ └── index.js
├── scripts/
│ ├── build-design-tokens.sh
│ └── ...
├── src/
│ ├── tokens/
│ │ ├── base/
│ │ │ └── color.json
│ │ └── functional/
│ │ └── color.json
│ ├── css/
│ │ ├── reset.css
│ │ └── global.ts
│ ├── e2e/
│ │ └── global-tests.js
│ └── Button/
│ ├── Button.tsx
│ ├── Button.test.tsx
│ ├── Button.module.css
│ ├── Button.stories.css
│ └── index.ts
└── package.json
```
--------------------------------
### Column Offset
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/layout/Grid/react.mdx
Positions a column using the `start` prop to provide a specific starting column offset.
```jsx
```
--------------------------------
### Default Pagination Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Pagination/index.mdx
Demonstrates the default usage of the Pagination component with state management for the current page and total pages. Includes handlers for next, previous, and direct page changes.
```jsx
const App = () => {
const [currentPage, setCurrentPage] = React.useState(5)
const totalPages = 10
const handlePageChange = (e, pageNumber) => {
if (pageNumber === currentPage + 1 && currentPage < totalPages) {
// Next page handler
setCurrentPage(currentPage + 1)
} else if (pageNumber === currentPage - 1 && currentPage > 1) {
// Previous page handler
setCurrentPage(currentPage - 1)
} else if (pageNumber >= 1 && pageNumber <= totalPages) {
setCurrentPage(pageNumber)
}
}
return
}
render()
```
--------------------------------
### Default Breadcrumbs Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/Breadcrumbs/react.mdx
A basic example of the Breadcrumbs component with three items, indicating the current page with the 'selected' prop.
```jsx
ResourcesGitHub Copilot
Chat
```
--------------------------------
### Default SubNav Example
Source: https://github.com/primer/brand/blob/main/apps/next-docs/content/components/SubNav/index.mdx
Demonstrates the basic usage of the SubNav component with headings and links. Ensure the parent container has relative positioning and a defined height/width.
```jsx
