# Abyss Web - LLM Documentation This file contains links to LLM-optimized documentation for all Abyss web components. ## Components ### Accessibility - [useVisuallyHidden](https://abyss.uhc.com/llms/web/hooks/useVisuallyHidden.md): The useVisuallyHidden is a custom hook for visually hiding content. ### Brand - [Brandmark](https://abyss.uhc.com/llms/web/brand/optum/Brandmark.md): Logos/Brandmarks for Optum brands. - [Brandmark](https://abyss.uhc.com/llms/web/brand/uhc/Brandmark.md): Logos/Brandmarks for UHC brands. - [Colors](https://abyss.uhc.com/llms/web/brand/optum/colors.md): Colors of the Optum brand - [Colors](https://abyss.uhc.com/llms/web/brand/uhc/colors.md): Colors of the UHC brand - [IconBrand](https://abyss.uhc.com/llms/web/brand/optum/IconBrand.md): Used to implement Brand icons and adapt their properties. - [IconBrand](https://abyss.uhc.com/llms/web/brand/uhc/IconBrand.md): Used to implement Brand icons and adapt their properties. - [IllustratedIconBrand](https://abyss.uhc.com/llms/web/brand/optum/IllustratedIconBrand.md): Used to implement UHC brand illustrated icons and adapt their properties. - [IllustratedIconBrand](https://abyss.uhc.com/llms/web/brand/uhc/IllustratedIconBrand.md): Used to implement UHC brand illustrated icons and adapt their properties. - [IllustrationBrand](https://abyss.uhc.com/llms/web/brand/optum/IllustrationBrand.md): Used to implement Brand illustrations and adapt their properties. - [IllustrationBrand](https://abyss.uhc.com/llms/web/brand/uhc/IllustrationBrand.md): Used to implement Brand illustrations and adapt their properties. - [Optum Brand](https://abyss.uhc.com/llms/web/brand/optum/get-started.md): '' - [Typography](https://abyss.uhc.com/llms/web/theme-customization/typography/typography-optum.md): Typography for Optum brands - [Typography](https://abyss.uhc.com/llms/web/theme-customization/typography/typography-uhc.md): Typography for UHC brands - [UHC Brand](https://abyss.uhc.com/llms/web/brand/uhc/get-started.md): The partnership with the UHC brand team solidifies the foundation of Abyss digital assets which unify our brand experience. ### Content - [Accordion](https://abyss.uhc.com/llms/web/ui/Accordion.md): A vertically stacked list of headers that reveal or hide associated sections of content. - [Calendar](https://abyss.uhc.com/llms/web/ui/Calendar.md): Displays a calendar for users to select a date or date range. - [Card](https://abyss.uhc.com/llms/web/ui/Card.md): A container used to display content related to a single subject. - [Carousel](https://abyss.uhc.com/llms/web/ui/Carousel.md): Displays information through a series of slides. - [DropdownMenu](https://abyss.uhc.com/llms/web/ui/DropdownMenu.md): Displays a menu triggered by a button, such as a set of actions or functions. - [EmphasisBanner](https://abyss.uhc.com/llms/web/ui/EmphasisBanner.md): Displays a banner to emphasize important information - [Footer](https://abyss.uhc.com/llms/web/ui/Footer.md): Used to create a page footer. - [Header](https://abyss.uhc.com/llms/web/ui/Header.md): Used to create a page header. - [PageBody](https://abyss.uhc.com/llms/web/ui/PageBody.md): Used to create a page body layout. - [PageBodyIntro](https://abyss.uhc.com/llms/web/ui/PageBodyIntro.md): Used to create a layout of introductory content at the top of your page body. - [SegmentedControls](https://abyss.uhc.com/llms/web/ui/SegmentedControls.md): Combines radio buttons and tabs to give multiple options as one element. - [SplitButton](https://abyss.uhc.com/llms/web/ui/SplitButton.md): Displays a menu triggered by a button, such as a set of actions or functions. - [StepTracker](https://abyss.uhc.com/llms/web/ui/StepTracker.md): Used to indicate a user's progress through a multistep process. Also referred to as a progress tracker or stepper. - [Tabs](https://abyss.uhc.com/llms/web/ui/Tabs.md): Used to view and switch between different sets of content. - [Timeline](https://abyss.uhc.com/llms/web/ui/Timeline.md): Displays a list of content in chronological order. ### Data Display - [Accumulator](https://abyss.uhc.com/llms/web/ui/Accumulator.md): Accumulates and displays multiple loading states. - [ActivityTracker](https://abyss.uhc.com/llms/web/ui/ActivityTracker.md): Non-interactive visual component that displays activity progress over time. - [Avatar](https://abyss.uhc.com/llms/web/ui/Avatar.md): The Avatar component is used to represent a user, and displays the profile picture or the user initials as content. - [Badge](https://abyss.uhc.com/llms/web/ui/Badge.md): Provides a small descriptor for UI elements. - [Chip](https://abyss.uhc.com/llms/web/ui/Chip.md): Chips are compact elements that represent an action, input, or attribute. - [CodeHighlighter](https://abyss.uhc.com/llms/web/ui/CodeHighlighter.md): Used to highlight segments of code. - [ExposedFilters](https://abyss.uhc.com/llms/web/ui/ExposedFilters.md): Analyzes a set of data items and presents outcomes that match selected criteria - [Indicator](https://abyss.uhc.com/llms/web/ui/Indicator.md): Adds an indicator to wrapped elements. - [Rating](https://abyss.uhc.com/llms/web/ui/Rating.md): Used to select and display a rating and reviews. - [V1DataGrid](https://abyss.uhc.com/llms/web/ui/DataGrid-V1.md): Edit a matrix of data with columns, rows, and information that can operate dynamically. - [V1Table](https://abyss.uhc.com/llms/web/ui/Table-V1.md): Used to create a static table of data to easily convey information. ### Data Visualization - [V1Bar](https://abyss.uhc.com/llms/web/ui/Bar-V1.md): A graphical representation of data in a bar-shaped graph. - [V1Donut](https://abyss.uhc.com/llms/web/ui/Donut-V1.md): A graphical representation of data in a circular-shaped graph with a cutout. - [V1Line](https://abyss.uhc.com/llms/web/ui/Line-V1.md): A graphical representation of data in a line-shaped graph. - [V1Pie](https://abyss.uhc.com/llms/web/ui/Pie-V1.md): A graphical representation of data in a circular-shaped graph. ### DataTable - [DataTable - Actions](https://abyss.uhc.com/llms/web/data-table/08-Actions.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Columns](https://abyss.uhc.com/llms/web/data-table/03-Columns.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Data](https://abyss.uhc.com/llms/web/data-table/02-Data.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Drag-and-Drop](https://abyss.uhc.com/llms/web/data-table/12-Drag-And-Drop.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Editable Data](https://abyss.uhc.com/llms/web/data-table/09-Editable-Data.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Examples](https://abyss.uhc.com/llms/web/data-table/14-Examples.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Expansion](https://abyss.uhc.com/llms/web/data-table/11-Expansion.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Filtering](https://abyss.uhc.com/llms/web/data-table/06-Filtering.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Migration Guide](https://abyss.uhc.com/llms/web/data-table/01-Migrating.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Miscellaneous](https://abyss.uhc.com/llms/web/data-table/13-Miscellaneous.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Overview](https://abyss.uhc.com/llms/web/data-table/00-Overview.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Pagination](https://abyss.uhc.com/llms/web/data-table/07-Pagination.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Row Operations](https://abyss.uhc.com/llms/web/data-table/04-Row-Operations.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Server-Side Operations](https://abyss.uhc.com/llms/web/data-table/10-Server-Side-Operations.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Sorting](https://abyss.uhc.com/llms/web/data-table/05-Sorting.md): Displays a matrix of information with columns, rows, and information that can operate dynamically. - [DataTable - Types](https://abyss.uhc.com/llms/web/data-table/15-Types.md): Types and state helpers for DataTable. ### Feedback - [Alert](https://abyss.uhc.com/llms/web/ui/Alert.md): Provides a brief application status message. - [ProgressBar](https://abyss.uhc.com/llms/web/ui/ProgressBar.md): Used to show users the status of loading an app, ongoing processes, saving changes/updates, and more. - [Toast](https://abyss.uhc.com/llms/web/ui/Toast.md): Notifications system ### Forms - [Checkbox](https://abyss.uhc.com/llms/web/ui/Checkbox.md): Used to mark an option as true/checked or false/not checked. - [CheckboxGroup](https://abyss.uhc.com/llms/web/ui/CheckboxGroup.md): Allows a user to select one or multiple items from a list. - [DateInput](https://abyss.uhc.com/llms/web/ui/DateInput.md): Capture date input from user. - [DateInputRange](https://abyss.uhc.com/llms/web/ui/DateInputRange.md): Capture date range input from user. - [FileUpload](https://abyss.uhc.com/llms/web/ui/FileUpload.md): An HTML5 file upload component with a drag-drop zone and file browser for selection. - [NumberInput](https://abyss.uhc.com/llms/web/ui/NumberInput.md): Allows users to enter a number into a UI. - [RadioGroup](https://abyss.uhc.com/llms/web/ui/RadioGroup.md): Provides a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. - [RichTextEditor](https://abyss.uhc.com/llms/web/ui/RichTextEditor.md): Component for generating rich text. - [SelectInput (Multi)](https://abyss.uhc.com/llms/web/ui/SelectInput-Multi.md): Allows users to select multiple values from a provided list of options. - [SelectInput (Single)](https://abyss.uhc.com/llms/web/ui/SelectInput-Single.md): Allows users to select one value from a provided list of options. - [Slider](https://abyss.uhc.com/llms/web/ui/Slider.md): Used to traverse through different values in a given range. - [TextInput](https://abyss.uhc.com/llms/web/ui/TextInput.md): Allows users to enter text into a UI. - [TextInputArea](https://abyss.uhc.com/llms/web/ui/TextInputArea.md): Allows users to enter multi-line text into a UI. - [TimeInput](https://abyss.uhc.com/llms/web/ui/TimeInput.md): Capture time input from user. - [Toggle](https://abyss.uhc.com/llms/web/ui/Toggle.md): Used to switch between on and off between 2 modes. - [V1ToggleGroup](https://abyss.uhc.com/llms/web/ui/ToggleGroup-V1.md): Combines checkboxes to give multiple options for selection. ### General - [Component Testing](https://abyss.uhc.com/llms/web/developers/testing/3-component-testing.md): Guide on how to facilitate testing of Abyss components. - [End User Specifications](https://abyss.uhc.com/llms/web/developers/testing/2-end-user-spec.md): Abyss Spec - [Migrating to Emotion-based Abyss Theming](https://abyss.uhc.com/llms/web/developers/migration-v2/3-emotion-migration.md): A guide to migrating from the previous theming system to the new Emotion-based implementation - [Quality Engineering](https://abyss.uhc.com/llms/web/developers/testing/1-quality-engineering.md): QE Testing Overview - [Testing Responsive Components](https://abyss.uhc.com/llms/web/developers/testing/6-responsive-testing.md): Best practices for testing components that use MediaQuery for responsive behavior ### I18n - [Translate](https://abyss.uhc.com/llms/web/ui/Translate.md): Used to retrieve translated strings from the Abyss i18n object. ### Layout - [Box](https://abyss.uhc.com/llms/web/ui/Box.md): Used as a blanket filler to surround just about any component(s) with color or create a box of predefined size. - [Divider](https://abyss.uhc.com/llms/web/ui/Divider.md): Used to add visual or semantic separation between content. - [Flex](https://abyss.uhc.com/llms/web/ui/Flex.md): Used to incorporate CSS Flexbox into UI layouts. - [Grid](https://abyss.uhc.com/llms/web/ui/Grid.md): Provides a brief message about the app processes. - [Layout](https://abyss.uhc.com/llms/web/ui/Layout.md): Used to layout UI elements horizontally or vertically - [MediaQuery](https://abyss.uhc.com/llms/web/ui/MediaQuery.md): Used to layout UI elements conditionally ### Media - [Icon](https://abyss.uhc.com/llms/web/ui/Icon.md): Used to implement icons and adapt their properties. - [IconSymbol](https://abyss.uhc.com/llms/web/ui/IconSymbol.md): Used to implement Material Symbol icons and adapt their properties. ### Navigation - [Breadcrumbs](https://abyss.uhc.com/llms/web/ui/Breadcrumbs.md): Used to separate nodes and assist navigation. - [Button](https://abyss.uhc.com/llms/web/ui/Button.md): Used to trigger an action or event, such as submitting a form, opening a dialog, cancelling an action, or performing a delete operation. - [Link](https://abyss.uhc.com/llms/web/ui/Link.md): Used to hyperlink text and other components. - [NavMenu](https://abyss.uhc.com/llms/web/ui/NavMenu.md): Used to display a navigation menu with links and dropdowns. - [Pagination](https://abyss.uhc.com/llms/web/ui/Pagination.md): Navigates between a set number of pages. - [Router](https://abyss.uhc.com/llms/web/ui/Router.md): Collection of navigational components that compose declaratively with your application. - [SkipLink](https://abyss.uhc.com/llms/web/ui/SkipLink.md): Provides a way to skip to specific sections of a page. - [V1Flyout](https://abyss.uhc.com/llms/web/ui/Flyout-V1.md): Static component with child elements that displays from the right or bottom side of the window and overlays all other content until it is closed. - [V1SubNavigationMenu](https://abyss.uhc.com/llms/web/ui/SubNavigationMenu-V1.md): Used to display a navigation menu with links and dropdowns. ### Overlay - [Coachmark](https://abyss.uhc.com/llms/web/ui/Coachmark.md): A temporary message that guides a user through a new or unfamiliar experience. - [Drawer](https://abyss.uhc.com/llms/web/ui/Drawer.md): Displays an overlay area at any side of the screen. - [LoadingOverlay](https://abyss.uhc.com/llms/web/ui/LoadingOverlay.md): Focuses the user's attention on one task or piece of information. - [LoadingSpinner](https://abyss.uhc.com/llms/web/ui/LoadingSpinner.md): Infinite loading spinner. - [ModalDialog](https://abyss.uhc.com/llms/web/ui/ModalDialog.md): Displays an overlay area at the center of the screen. - [Popover](https://abyss.uhc.com/llms/web/ui/Popover.md): Allows users to click an element to display a pop-up box. - [Skeleton](https://abyss.uhc.com/llms/web/ui/Skeleton.md): Placeholder for loading content. - [Tooltip](https://abyss.uhc.com/llms/web/ui/Tooltip.md): A contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus. ### Providers - [AbyssProvider](https://abyss.uhc.com/llms/web/ui/AbyssProvider.md): Convenience wrapper for I18nProvider, OverlayProvider, ThemeProvider, and RouterProvider. - [CollapseProvider](https://abyss.uhc.com/llms/web/ui/CollapseProvider.md): Collapse/expand all collapsible children within the provider. - [DefaultPropsProvider](https://abyss.uhc.com/llms/web/ui/DefaultPropsProvider.md): Used to provide default props to all child components. - [FormProvider](https://abyss.uhc.com/llms/web/ui/FormProvider.md): Adds form functionality to Abyss inputs. - [I18nProvider](https://abyss.uhc.com/llms/web/ui/I18nProvider.md): Used to provide i18n data to the application. - [NextStyleProvider](https://abyss.uhc.com/llms/web/ui/NextStyleProvider.md): A specialized provider for Next.js applications with server-side rendering support - [OverlayProvider](https://abyss.uhc.com/llms/web/ui/OverlayProvider.md): Adds a React Context to support overlay functionality to Abyss modals, drawers, etc. - [RouterProvider](https://abyss.uhc.com/llms/web/ui/RouterProvider.md): Used to render routes that match a location. - [StyleRootProvider](https://abyss.uhc.com/llms/web/ui/StyleRootProvider.md): An advanced provider for controlling Emotion cache and shadow DOM styling - [ThemeProvider](https://abyss.uhc.com/llms/web/ui/ThemeProvider.md): An Abyss component that passes the theme object down the component tree. ### Search - [SearchInput](https://abyss.uhc.com/llms/web/ui/SearchInput.md): Provides an input field for searching content within a site to find specific items. ### State Management - [useForm](https://abyss.uhc.com/llms/web/hooks/useForm.md): useForm is a hook for defining, validating and submitting forms. - [useFormFieldArray](https://abyss.uhc.com/llms/web/hooks/useFormFieldArray.md): The useFormFieldArray is custom hook for working with uncontrolled Field Arrays (dynamic inputs). This hook supplies you with functions for manipulating the array/list of fields. - [useOverlay](https://abyss.uhc.com/llms/web/hooks/useOverlay.md): A custom hook for managing overlays like Modal and Drawer with ease. - [usePagination](https://abyss.uhc.com/llms/web/hooks/usePagination.md): The usePagination is a custom hook for pagination capability. - [useQuery](https://abyss.uhc.com/llms/web/hooks/useQuery.md): Hook for making GraphQL queries. - [useRouter](https://abyss.uhc.com/llms/web/hooks/useRouter.md): Hook for using browser information and navigation. ### Styling - [Style Customization](https://abyss.uhc.com/llms/web/theme-customization/styling/style-customization.md): Guide to styling and customizing Abyss components. - [styled](https://abyss.uhc.com/llms/web/theme-customization/styling/styled-components.md): Tool to create styled components. - [styled](https://abyss.uhc.com/llms/web/tools/styled.md): Tool to style elements. ### Theme & Tokens - [createTheme](https://abyss.uhc.com/llms/web/theme-customization/tokens/05-create-theme.md): Tool to create and modify themes - [Dynamic Theme Loading](https://abyss.uhc.com/llms/web/theme-customization/tokens/06-dynamic-theme-loading.md): Loading Themes at Runtime - [flattenTokens](https://abyss.uhc.com/llms/web/theme-customization/tokens/07-flatten-tokens.md): Tool to combine tokens from multiple sources into a single object. - [Theme Guides](https://abyss.uhc.com/llms/web/theme-customization/tokens/04-theme-guides.md): A comprehensive guide to understanding and using themes in the Abyss Design System - [ThemeProvider](https://abyss.uhc.com/llms/web/theme-customization/tokens/08-ThemeProvider.md): An Abyss component that passes the theme object down the component tree. - [Tokens Overview](https://abyss.uhc.com/llms/web/theme-customization/tokens/01-tokens-intro.md): An introduction to design tokens in the Abyss Design System. - [Tokens Reference](https://abyss.uhc.com/llms/web/theme-customization/tokens/02-token-reference.md): A full reference of all core and semantic design tokens available in the Abyss Design System. - [useToken](https://abyss.uhc.com/llms/web/theme-customization/tokens/09-use-token.md): Used to get values mapped to tokens. - [White Labeling Guide](https://abyss.uhc.com/llms/web/theme-customization/tokens/03-white-labeling-guide.md): Guide to white labeling and customizing themes in the Abyss Design System. ### Typography - [Heading](https://abyss.uhc.com/llms/web/ui/Heading-optum.md): Creates appropriately sized and nested heading elements. - [Heading](https://abyss.uhc.com/llms/web/ui/Heading-uhc.md): Creates appropriately sized and nested heading elements. - [Text](https://abyss.uhc.com/llms/web/ui/Text.md): Used to apply Abyss typography styles to text elements ### UI & DOM - [useCollapse](https://abyss.uhc.com/llms/web/hooks/useCollapse.md): Show or hide associated section of content. - [useFuse](https://abyss.uhc.com/llms/web/hooks/useFuse.md): The useFuse hook is used to help with fuzzy search, also known as approximate string matching. - [useMediaQuery](https://abyss.uhc.com/llms/web/hooks/useMediaQuery.md): Subscribe to media queries with window.matchMedia - [useScrollTrigger](https://abyss.uhc.com/llms/web/hooks/useScrollTrigger.md): The useScrollTrigger is a custom hook for handling scroll behavior for any scrollable element. ### Util - [config](https://abyss.uhc.com/llms/web/tools/config.md): Tool to access environment variables. - [createScript](https://abyss.uhc.com/llms/web/tools/create-script.md): Tool for create and add scripts - [dayjs](https://abyss.uhc.com/llms/web/tools/day-js.md): Library for parsing, validation, and manipulation of Date objects. - [downloadCsv](https://abyss.uhc.com/llms/web/tools/download-csv.md): Lightweight utility for generating and downloading CSV files - [event](https://abyss.uhc.com/llms/web/tools/event.md): Tool for storing, retrieving and triggering events based on the event type. - [isValidAssetName](https://abyss.uhc.com/llms/web/tools/isValidAssetName.md): Tool to verify the validity of an asset name. ### Utilities - [useCountdown](https://abyss.uhc.com/llms/web/hooks/useCountdown.md): The useCountdown is a custom hook for countdown capability. - [useTranslate](https://abyss.uhc.com/llms/web/hooks/useTranslate.md): Used to retrieve translated strings from the Abyss i18n object and supply values to the placeholders. ## Full Documentation For complete web documentation in a single file: - [Web Full Documentation](https://abyss.uhc.com/llms/web/llms-full.txt) ## About Abyss Version: 2.3.0 Last Updated: 2026-04-14