---
title: Components
description: Primer Brand UI components
---

## In this section

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