# Beam React

> Beam is a headless, token-driven design system built for modern applications. It provides accessible components, design tokens, and first-class theming support.

## Components

- [Accordion/Accordion](llms/components-accordion-accordion.txt): An Accordion allows users to expand and collapse sections of content within a limited space.
- [Accordion/AccordionGroup](llms/components-accordion-accordiongroup.txt): An AccordionGroup allows users to expand and collapse sections of content within a limited space.
- [ActionList](llms/components-actionlist.txt): ActionList is a vertical list of interactive actions or selectable options; allowing for the inclusion of icons, description, and other visual elements.
- [ActionList/Examples](llms/components-actionlist-examples.txt)
- [Alert](llms/components-alert.txt): Alerts are attention-grabbing elements that help users quickly understand key information or take immediate action.
- [Avatar/Avatar](llms/components-avatar-avatar.txt): An avatar represents an entity such as a user, group or organization. They can display as images, text or icons.
- [Avatar/Avatar.Group](llms/components-avatar-avatar-group.txt): An avatar group displays two or more [Avatars](/docs/components-avatar-avatar--docs) in an overlapping stack or spaced out.
- [Badge](llms/components-badge.txt): Badge is used to indicate status, highlight featured content, and hold small amounts of information.
- [BadgeDot](llms/components-badgedot.txt): BadgeDot is used to indicate status, and hold small amounts of information.
- [Box](llms/components-box.txt): Box is a primitive wrapper used to build components,
- [Breadcrumb/Breadcrumb](llms/components-breadcrumb-breadcrumb.txt): Breadcrumb is a secondary navigation pattern that helps users understand the hierarchy
- [Breadcrumb/BreadcrumbItem](llms/components-breadcrumb-breadcrumbitem.txt): Breadcrumb is a secondary navigation pattern that helps users understand the hierarchy
- [Button](llms/components-button.txt): Button allows users to trigger actions or events.
- [Card/Card](llms/components-card-card.txt): Card is a container component that provides structure for displaying content
- [Card/CardGroup](llms/components-card-cardgroup.txt): CardGroup provides selection management for groups of selectable Cards.
- [Chip/Chip](llms/components-chip-chip.txt): A Chip collects data and filters content.
- [Chip/ChipGroup](llms/components-chip-chipgroup.txt): ChipGroup allows for single or multi-selection within a group of Chips.
- [CloseButton](llms/components-closebutton.txt): The CloseButton is used inside of other components, like a page alert, toast or a modal. Its function is to close or dismiss its parent component.
- [Dialog](llms/components-dialog.txt): A Dialog presents focused content, tasks, or decisions in a temporary window above the current page.
- [Divider](llms/components-divider.txt): A divider can be used to separate or group content and can be placed horizontally or vertically.
- [EmptyState](llms/components-emptystate.txt): Empty states are used to communicate page-level information. They are ideal for grabbing attention and generally include an action to prevent users from hitting a dead end.
- [HelperText](llms/components-helpertext.txt): HelperText provides additional guidance about an input and can also be
- [Icon/Flag](llms/components-icon-flag.txt): Beam provides flags to support different areas of the business across Viasat.
- [Icon/Icon](llms/components-icon-icon.txt): Icons help convey meaning to actions and concepts within a digital experience. They should be easy to understand and recognizable.
- [Icon/Logo](llms/components-icon-logo.txt): Beam provides various logo types to support different areas of the business across Viasat.
- [Label](llms/components-label.txt): A Label is a caption for form components such as inputs, checkboxes,
- [Link](llms/components-link.txt): Links are navigational elements that can lead users to other pages, external websites or jump to a section of the current page. They may appear on their own, within a sentence or paragraph, or directly following the content.
- [List](llms/components-list.txt): Lists are vertical groupings of related text elements. List items can begin with a number, bullet, icon or come unstyled.
- [Menu/Examples](llms/components-menu-examples.txt): Menu.PopoverContent is a wrapper around the content that appears in Menu.
- [Menu/Menu](llms/components-menu-menu.txt): A Menu is a hidden list used for quick actions and selections. It’s composed of an [ActionList](/docs/components-actionlist-actionlist--docs) within a [Popover](/docs/components-popover-popover--docs) and can be invoked by clicking an interactive trigger like a Button or Chip.
- [Menu/Menu.PopoverContent](llms/components-menu-menu-popovercontent.txt): Menu.PopoverContent is a wrapper around the content that appears in Menu.
- [Menu/Menu.Trigger](llms/components-menu-menu-trigger.txt): Menu.Trigger is a wrapper component around the element that triggers or closes a Menu.
- [PageHeader](llms/components-pageheader.txt): Page header is the highest level heading of a page and can be combined with other built in UI elements.
- [Pagination](llms/components-pagination.txt): Pagination is used to move back and forth through content that’s split across multiple pages.
- [Panel](llms/components-panel.txt): A Panel presents supplementary content, tools, or focused workflows in a container associated with the current experience.
- [Popover/Popover](llms/components-popover-popover.txt): A Popover is a temporary container that appears on top of the interface when an element is triggered.
- [Popover/Popover.Content](llms/components-popover-popover-content.txt): Popover.Content is a wrapper around the content that appears in Popover.
- [Popover/Popover.Trigger](llms/components-popover-popover-trigger.txt): Popover.Trigger is a wrapper component around the element that triggers or closes a Popover.
- [ProgressBar](llms/components-progressbar.txt): Progress bars show the progression and duration of a system task such as file uploads, downloads, or installations.
- [Search](llms/components-search.txt): Search allows users to enter queries to discover, explore, or retrieve an open-ended set of results. Use this for exploration where the user might not know exactly what they are looking for.
- [SegmentedControl](llms/components-segmentedcontrol.txt): SegmentedControl is a set of two or more mutually exclusive options to filter
- [Spinner](llms/components-spinner.txt): Spinner give users visual feedback that their request is being processed.
- [Stepper/Stepper](llms/components-stepper-stepper.txt): A stepper guides users through the steps of a task in sequential order.
- [Stepper/Stepper.Step](llms/components-stepper-stepper-step.txt): Stepper.Step is a child component of Stepper that represents a single item within a Stepper.
- [Tabs/Tabs](llms/components-tabs-tabs.txt): Alpha
- [Tabs/Tabs.Group](llms/components-tabs-tabs-group.txt): Tabs.Group is a child component of Tabs that represents a group of items.
- [Tabs/Tabs.Item](llms/components-tabs-tabs-item.txt): Tabs.Item is a child component of Tabs that represents a single item within a group of items.
- [Tabs/Tabs.Panel](llms/components-tabs-tabs-panel.txt): Tabs.Panel allows Tabs to toggle between sets of grouped content.
- [Text](llms/components-text.txt): Text styles strings, ensuring typography is consistent across all Viasat products.
- [Toast/Toast](llms/components-toast-toast.txt): A toast is a compact notification that pops up to provide brief feedback on actions or status updates. It’s commonly used for brief, non-critical notifications like confirmations, warnings, or errors.
- [Toast/ToastContainer](llms/components-toast-toastcontainer.txt): ToastContainer is a utility component that renders the Toast in the browser.
- [Tooltip](llms/components-tooltip.txt): Tooltips display additional information upon hover. The information should be contextual, useful, and nonessential.

## Concepts

- [Component Lifecycle](llms/concepts-component-lifecycle.txt): Beam 3 components have a predetermined set of requirements and expectations that define each stage of their lifespan. View status for all components [here](/docs/concepts-component-status--docs).
- [Component Status](llms/concepts-component-status.txt): Beam 3 components have a predetermined set of requirements and expectations that define each stage of their lifespan. Learn more about Component Lifecycles [here](/docs/concepts-component-lifecycle--d
- [Data Visualization](llms/concepts-data-visualization.txt)
- [Styling](llms/concepts-styling.txt): Beam is built on a **token-driven** architecture where design decisions flow from centralized tokens into component styles. This guide covers how styling works in Beam and the various ways you can cus
- [Theming](llms/concepts-theming.txt): Beam ships with a first-class theming system, implemented as a lightweight wrapper around [next-themes](https://github.com/pacocoursey/next-themes/tree/main), which lets you tailor the UI along three 
- [Using Beam with AI](llms/concepts-using-beam-with-ai.txt): The `@viasat/beam-react-claude-plugin` is the recommended way to use Claude with Beam. Once installed, Claude gets direct, structured access to component props, stories, and concept docs through the B

## Forms

- [Autocomplete](llms/forms-autocomplete.txt): An Autocomplete allows users to type into a field to quickly filter and select a specific value from a predefined set of options. Use this when the task requires selecting a precise, existing item, such as assigning a person, picking a country, or applying a tag.
- [Checkbox/Checkbox](llms/forms-checkbox-checkbox.txt): Checkboxes allow users to select multiple choices simultaneously or change a single option between two states. Checkboxes don't immediately apply their changes and require further action, such as clicking a submit button.
- [Checkbox/CheckboxGroup](llms/forms-checkbox-checkboxgroup.txt): Used when there are a list of related options where the user may select any number of choices (including zero).
- [FileUpload/FileUpload](llms/forms-fileupload-fileupload.txt): File uploader allows users to upload one or more files by dragging and dropping or activating with a button.
- [FileUpload/FileUpload.Button](llms/forms-fileupload-fileupload-button.txt): FileUpload.Button is a child component of FileUpload that allows users to upload one or more files by activating a button.
- [FileUpload/FileUpload.Dropzone](llms/forms-fileupload-fileupload-dropzone.txt): FileUpload.Dropzone is a child component of FileUpload that allows users to upload one or more files by dragging and dropping.
- [FileUpload/FileUpload.List](llms/forms-fileupload-fileupload-list.txt): FileUpload.List is a child component of FileUpload that represents a list of items being uploaded.
- [FileUpload/FileUpload.List.Item](llms/forms-fileupload-fileupload-list-item.txt): FileUpload.List.Item is a child component of FileUpload.List that represents a specific item being uploaded.
- [Form](llms/forms-form.txt): Form is a collection of inputs that allow a user to submit data.
- [NativeSelect](llms/forms-nativeselect.txt): Native select allows users to choose one option from a list and uses native browser styles and functionality for that list. It is ideal for single selection on mobile devices.
- [RadioButton/RadioButton](llms/forms-radiobutton-radiobutton.txt): RadioButton allows a user to choose a single option from a group of choices;
- [RadioButton/RadioButtonGroup](llms/forms-radiobutton-radiobuttongroup.txt): Used when there are a list of related options where the user may select
- [Select](llms/forms-select.txt): Select allows users to pick one or more items from a predefined styled list.
- [Slider](llms/forms-slider.txt): A slider allows users to select a value from a predefined range by dragging a handle along a track.
- [Switch/Switch](llms/forms-switch-switch.txt): A switch serves as a simple on/off toggle, allowing users to apply immediate decisions.
- [Switch/SwitchGroup](llms/forms-switch-switchgroup.txt): SwitchGroup serves as a grouping of simple on/off toggles, allowing users to apply immediate decisions.
- [TextArea](llms/forms-textarea.txt): A TextArea is an input field that allows users to enter long-form text.
- [TextField](llms/forms-textfield.txt): A TextField allows users to enter short snippets of text, like names, emails,

## General

- [Getting Started](llms/getting-started.txt): Beam 3 is a **headless**, **token-driven** component library built for modern React applications. It provides scalable components, accessible design tokens, and first-class support for cross-platform 
- [Introduction](llms/introduction.txt)

## Hidden

- [DataViz](llms/hidden-dataviz.txt): Data visualization colors utilize Beam's color palette and is optimized for accessibility and maximizing data readability.

## In Development

- [DataTable](llms/in-development-datatable.txt): DataTable renders tabular data with a compound component API (Header,
- [DataTable/Performance](llms/in-development-datatable-performance.txt): Performance stories for DataTable. Separate from the main stories file —
- [DateField](llms/in-development-datefield.txt): Segmented date input — day, month, and year are each independently focusable

## Layout

- [Header/Examples](llms/layout-header-examples.txt): The header serves as a horizontal navigation bar at the top of all pages within the application.
- [Header/Header](llms/layout-header-header.txt): The header serves as a horizontal navigation bar at the top of all pages within the application.
- [PageLayout/Examples](llms/layout-pagelayout-examples.txt)
- [PageLayout/PageLayout](llms/layout-pagelayout-pagelayout.txt): PageLayout is a robust utility component that leverages Header and SideNav to create responsive UI shells for web applications at Viasat.
- [SideNav/Examples](llms/layout-sidenav-examples.txt)
- [SideNav/SideNav](llms/layout-sidenav-sidenav.txt): Side nav provides vertical navigation that links to key sections within an application.

## Migrations

- [v1 to v2](llms/migrations-v1-to-v2.txt): - Published to standard NPM registry - No custom registry configuration needed - Improved package discoverability
- [v2.35.0 to v2.36.0](llms/migrations-v2-35-0-to-v2-36-0.txt): Extended Collections reworks how Beam builds its brand themes. Two things came out of it: the generated stylesheets got a lot smaller, and a handful of token names changed along the way.

## Tokens

- [Border Radius](llms/tokens-border-radius.txt): Use radius tokens to change the border-radius dimensions on a component or shape. Common examples are containers, cards, buttons, badges, chips and more. Border-radius size varies depending on the com
- [Border Width](llms/tokens-border-width.txt): Border-width tokens define the width of borders in a consistent and flexible manner.
- [Color](llms/tokens-color.txt): Semantic tokens codify design decisions with names that reflect their intended use. This promotes design consistency throughout applications, enabling global design updates through single value modifi
- [Compact Typography](llms/tokens-compact-typography.txt): Compact typography offers a reduced line-height to cater for instances where the default line-height is not suitable; an example of this could be in a dense layout in a table or graph. It should be co
- [Opacity](llms/tokens-opacity.txt): Sets of opacity tokens used for element transparency.
- [Shadow](llms/tokens-shadow.txt): Use shadow tokens to draw focus to an experience rather than visual decoration. Use them sparingly so their intent is not lost.
- [Size](llms/tokens-size.txt): Size tokens define the width, height (or both values) of an element.
- [Space](llms/tokens-space.txt): Spacing tokens provide a consistent and intentional arrangement of empty space between elements within an interface. This includes margins, padding, and overall spatial relationships to ensure a cohes
- [Typography](llms/tokens-typography.txt): Typography is a cornerstone of design systems, shaping the user experience through typeface selection, hierarchy, and styles.