# React UI Library

> A cross-platform React Native UI library — 100 components, 25 charts,
> and 18 hooks that render natively on iOS and Android and as real DOM on the web,
> from one themeable component model.

This index lists React UI Library documentation pages formatted for LLMs.
Each link points to a standalone Markdown file under the /llms path.

For a single consolidated file with all content, use:
- https://react-ui-library.com/llms-full.txt

Install: `npm install @platform-blocks/react-ui-library`
Website: https://react-ui-library.com • GitHub: https://github.com/platform-blocks/react-ui-library • npm: https://www.npmjs.com/package/@platform-blocks/react-ui-library

## Guides

- [Getting started](https://react-ui-library.com/llms/guides/getting-started.md): Install react-ui-library, wire up the provider, and render your first component
- [Accessibility](https://react-ui-library.com/llms/guides/accessibility.md): How React UI Library meets WCAG 2.1 AA for keyboard, screen reader, low-vision, and motion-sensitive users
- [Localization](https://react-ui-library.com/llms/guides/localization.md): React UI Library ships a lightweight i18n layer
- [Contributing](https://react-ui-library.com/llms/guides/contributing.md): How the repo is laid out, how to run it locally, and what it takes to land a component, a demo, or a docs page

## Components

- [Accordion](https://react-ui-library.com/llms/components/Accordion.md): The Accordion component groups related content into expandable sections
- [Alert](https://react-ui-library.com/llms/components/Alert.md): The Alert component displays important messages to users with different severity levels, variants, and optional actions like dismissal
- [AppShell](https://react-ui-library.com/llms/components/AppShell.md): High-level layout container orchestrating header, navigation rail/drawer, aside panel, footer, and optional mobile bottom navigation
- [AudioPlayer](https://react-ui-library.com/llms/components/AudioPlayer.md): AudioPlayer wraps expo-audio with a seekable Waveform, transport controls and progress callbacks
- [AutoComplete](https://react-ui-library.com/llms/components/AutoComplete.md): The AutoComplete component provides search functionality with suggestions, supporting single/multi-select, async data loading, and rich content display
- [Avatar](https://react-ui-library.com/llms/components/Avatar.md): The Avatar component displays user profile images, initials, or icons
- [Badge](https://react-ui-library.com/llms/components/Badge.md): The Badge component displays compact elements that represent an input, attribute, or action
- [Block](https://react-ui-library.com/llms/components/Block.md): A polymorphic building block component that serves as a foundational element to replace View components throughout the application
- [Blockquote](https://react-ui-library.com/llms/components/Blockquote.md): The Blockquote component is used to highlight and stylize quotations or important text within your content
- [BrandButton](https://react-ui-library.com/llms/components/BrandButton.md): The BrandButton component renders a branded pressable for any platform in the brand icon registry
- [BrandIcon](https://react-ui-library.com/llms/components/BrandIcon.md): Common brand logos rendered as SVG
- [Breadcrumbs](https://react-ui-library.com/llms/components/Breadcrumbs.md): The Breadcrumbs component displays hierarchical navigation links to help users understand their current location within the application
- [Button](https://react-ui-library.com/llms/components/Button.md): The Button component provides a flexible interactive element supporting variants, sizes, icons, loading state, and full-width layout
- [Calendar](https://react-ui-library.com/llms/components/Calendar.md): A versatile calendar component for selecting dates, months, and years with customizable styles and behaviors
- [Card](https://react-ui-library.com/llms/components/Card.md): The Card component provides a flexible container for displaying content
- [Carousel](https://react-ui-library.com/llms/components/Carousel.md): The Carousel component displays a series of content in a horizontal scrollable view with optional navigation dots and controls
- [Checkbox](https://react-ui-library.com/llms/components/Checkbox.md): The Checkbox component allows users to select one or more options from a set
- [Chip](https://react-ui-library.com/llms/components/Chip.md): The Chip component displays compact elements that represent an input, attribute, or action
- [CodeBlock](https://react-ui-library.com/llms/components/CodeBlock.md): The CodeBlock component renders source code with optional syntax highlighting, copy-to-clipboard, GitHub integration, line wrapping, and width controls (content-fit by default, with an opt-in full width mode)
- [Collapse](https://react-ui-library.com/llms/components/Collapse.md): Displays content that can be revealed or hidden with an animation
- [ColorInput](https://react-ui-library.com/llms/components/ColorInput.md): The ColorInput component provides an intuitive interface for selecting colors through various input methods including color wheel, hex input, and preset swatches
- [ColorPicker](https://react-ui-library.com/llms/components/ColorPicker.md): ColorPicker is a lightweight alternative to ColorInput for cases where a full hex input and dropdown chrome are unnecessary
- [ColorSwatch](https://react-ui-library.com/llms/components/ColorSwatch.md): A simple square component for displaying colors, designed as a building block for color pickers and palette interfaces
- [ContextMenu](https://react-ui-library.com/llms/components/ContextMenu.md): The ContextMenu component provides a context-sensitive menu that appears on right-click (web) or long-press (mobile) with customizable actions
- [ControlField](https://react-ui-library.com/llms/components/ControlField.md): ControlField combines a label, description, and a control (Switch, Checkbox, or Radio) into a single pressable row
- [CopyButton](https://react-ui-library.com/llms/components/CopyButton.md): Small utility component for copying text values to the clipboard with optional toast feedback
- [DataList](https://react-ui-library.com/llms/components/DataList.md): DataList displays a set of label/value pairs, such as user details or metadata, in a clean, aligned layout
- [DataTable](https://react-ui-library.com/llms/components/DataTable.md): The DataTable component provides a feature-rich interface for displaying tabular data with sorting, pagination, row selection, and customizable columns
- [DatePicker](https://react-ui-library.com/llms/components/DatePicker.md): DatePicker renders an inline calendar focused on keyboard-friendly, accessible selection flows
- [DatePickerInput](https://react-ui-library.com/llms/components/DatePickerInput.md): DatePickerInput wraps the inline DatePicker in an accessible input experience
- [Dialog](https://react-ui-library.com/llms/components/Dialog.md): The Dialog component presents content above the app, supporting focus trapping, scroll locking, and multiple presentation styles (modal, confirmation, bottom sheet)
- [Divider](https://react-ui-library.com/llms/components/Divider.md): The Divider component provides a visual separator between content sections
- [FileInput](https://react-ui-library.com/llms/components/FileInput.md): The FileInput component provides a user-friendly interface for file uploads with drag-and-drop functionality, file validation, and preview capabilities
- [Flex](https://react-ui-library.com/llms/components/Flex.md): Flex provides a powerful and intuitive way to create flexible layouts using CSS Flexbox principles
- [Form](https://react-ui-library.com/llms/components/Form.md): Form manages values, validation, and submission state for a group of inputs
- [Gallery](https://react-ui-library.com/llms/components/Gallery.md): The Gallery component displays a collection of images or media with thumbnail navigation, keyboard controls, and optional fullscreen/modal viewing
- [GradientText](https://react-ui-library.com/llms/components/GradientText.md): A text component that displays text with gradient colors
- [Grid](https://react-ui-library.com/llms/components/Grid.md): Responsive 12‑column layout primitive with span-based children
- [Highlight](https://react-ui-library.com/llms/components/Highlight.md): Highlight emphasizes matching fragments inside longer strings, reusing the Text component so typography settings stay consistent across platforms
- [Icon](https://react-ui-library.com/llms/components/Icon.md): The Icon component displays icons with optional captions and overlays, providing a flexible way to present visual content in your application
- [IconButton](https://react-ui-library.com/llms/components/IconButton.md): An IconButton is a clickable button that contains an icon and is used to perform actions or trigger events
- [Image](https://react-ui-library.com/llms/components/Image.md): The Image component displays images with optional captions and overlays, providing a flexible way to present visual content in your application
- [Indicator](https://react-ui-library.com/llms/components/Indicator.md): The Indicator component renders a small dot or pill-shaped badge in the corner of a parent container — perfect for online status, unread counts, or "new" markers
- [Input](https://react-ui-library.com/llms/components/Input.md): A versatile text input component that provides a consistent interface for text entry across different platforms
- [Joystick](https://react-ui-library.com/llms/components/Joystick.md): Joystick is a two-axis positional input. In its default circle shape it behaves like a physical stick — the handle rides the rim at full deflection and springs back to centre when released. As a square it becomes an XY pad: each axis clamps on its own so the corners are reachable, and the handle stays where it is left
- [KeyCap](https://react-ui-library.com/llms/components/KeyCap.md): A visual component for displaying keyboard keys, shortcuts, and key combinations with proper styling
- [Knob](https://react-ui-library.com/llms/components/Knob.md): The Knob component provides a rotary control for adjusting values with touch, mouse, and keyboard input
- [Link](https://react-ui-library.com/llms/components/Link.md): A versatile component for creating styled hyperlinks and navigation elements with hover states and accessibility features
- [ListGroup](https://react-ui-library.com/llms/components/ListGroup.md): The ListGroup component provides an organized list structure with items, dividers, and sections for displaying grouped content
- [Loader](https://react-ui-library.com/llms/components/Loader.md): A animated loading component for indicating ongoing processes and loading states with various sizes and styles
- [LoadingOverlay](https://react-ui-library.com/llms/components/LoadingOverlay.md): LoadingOverlay composits the core Overlay and Loader primitives to create a convenient helper for blocking interactions with a visual indicator during asynchronous operations
- [Markdown](https://react-ui-library.com/llms/components/Markdown.md): Markdown component provides a way to render Markdown content with custom styling and component mapping
- [Masonry](https://react-ui-library.com/llms/components/Masonry.md): Masonry provides an efficient way to create Pinterest-style layouts where items are arranged in columns with varying heights
- [Menu](https://react-ui-library.com/llms/components/Menu.md): The Menu component provides a dropdown interface for navigation links, actions, and contextual options
- [MenuItemButton](https://react-ui-library.com/llms/components/MenuItemButton.md): A row button used inside menus and command palettes
- [MiniCalendar](https://react-ui-library.com/llms/components/MiniCalendar.md): A compact calendar component for displaying a month view with selectable dates
- [MonthPicker](https://react-ui-library.com/llms/components/MonthPicker.md): Interactive grid for selecting a month within a given year
- [MonthPickerInput](https://react-ui-library.com/llms/components/MonthPickerInput.md): Form-friendly wrapper around MonthPicker that renders an input field and opens the picker in a modal dialog
- [NavTree](https://react-ui-library.com/llms/components/NavTree.md): A sidebar that nests itself
- [NumberInput](https://react-ui-library.com/llms/components/NumberInput.md): The NumberInput component is a numeric text input field that provides built-in step controls for incrementing and decrementing the value
- [Overlay](https://react-ui-library.com/llms/components/Overlay.md): The Overlay component provides a utility for dimming background content or drawing focus to foreground elements
- [Pagination](https://react-ui-library.com/llms/components/Pagination.md): A comprehensive pagination component that provides intuitive navigation through large datasets
- [PhoneInput](https://react-ui-library.com/llms/components/PhoneInput.md): The PhoneInput component provides a flexible way to capture telephone numbers with built-in masking and formatting
- [PinInput](https://react-ui-library.com/llms/components/PinInput.md): A specialized input component designed for entering PIN codes, one-time passwords (OTP), verification codes, and other sequential character inputs
- [Popover](https://react-ui-library.com/llms/components/Popover.md): Popover sits on the same overlay primitives as Menu and Tooltip, making it suitable for interactive content like forms, lists, and quick action menus while keeping focus management predictable
- [Progress](https://react-ui-library.com/llms/components/Progress.md): The Progress component displays the completion progress of a task or process
- [QRCode](https://react-ui-library.com/llms/components/QRCode.md): The QRCode component generates QR codes for encoding text, URLs, or other data
- [Radio](https://react-ui-library.com/llms/components/Radio.md): Radio buttons allow users to select a single option from a group of mutually exclusive choices
- [Rating](https://react-ui-library.com/llms/components/Rating.md): An interactive component for displaying star ratings and allowing users to provide ratings with customizable appearance
- [Ring](https://react-ui-library.com/llms/components/Ring.md): The Ring component displays progress or status using a radial indicator
- [RollingNumber](https://react-ui-library.com/llms/components/RollingNumber.md): RollingNumber displays a number and animates every digit that changes, rolling it to its new position
- [Search](https://react-ui-library.com/llms/components/Search.md): The Search component provides a search input with debouncing, loading states, and customizable clear functionality
- [SegmentedControl](https://react-ui-library.com/llms/components/SegmentedControl.md): Segmented controls present a small set of exclusive options
- [Select](https://react-ui-library.com/llms/components/Select.md): Select provides a dropdown interface for choosing from predefined options
- [ShimmerText](https://react-ui-library.com/llms/components/ShimmerText.md): Animated text highlight that sweeps a configurable gradient across the content
- [Skeleton](https://react-ui-library.com/llms/components/Skeleton.md): Skeleton components provide visual placeholders for text, avatars, and blocks to reduce perceived loading time
- [Slider](https://react-ui-library.com/llms/components/Slider.md): The Slider component allows users to select a value or range of values by moving a handle along a track
- [Space](https://react-ui-library.com/llms/components/Space.md): Use the Space component to insert fixed spacing between elements when margin props are not available or would make layouts harder to reason about
- [Spoiler](https://react-ui-library.com/llms/components/Spoiler.md): The Spoiler component automatically collapses content that exceeds a specified height, providing a show/hide toggle to reveal the full content
- [Spotlight](https://react-ui-library.com/llms/components/Spotlight.md): The Spotlight component provides a fast, keyboard-driven interface for searching commands, routes, and entities
- [Stepper](https://react-ui-library.com/llms/components/Stepper.md): The Stepper component provides a step-by-step navigation interface, perfect for multi-step forms, wizards, and progress tracking
- [Surface](https://react-ui-library.com/llms/components/Surface.md): The base container the rest of the library's elevated components are built from — what other libraries call "paper"
- [Switch](https://react-ui-library.com/llms/components/Switch.md): Switch components provide a way to toggle between two states, typically representing on/off or enabled/disabled states
- [Table](https://react-ui-library.com/llms/components/Table.md): The Table component offers a minimal semantic wrapper (thead, tbody, tr, th, td) useful for simple static tabular data when the full DataTable is unnecessary
- [TableOfContents](https://react-ui-library.com/llms/components/TableOfContents.md): The TableOfContents component automatically discovers headings on the page (h1–h6) and renders a navigable outline with active section tracking
- [Tabs](https://react-ui-library.com/llms/components/Tabs.md): Tabs organize content into multiple sections that users can navigate between
- [Text](https://react-ui-library.com/llms/components/Text.md): Text component provides consistent typography with various variants, colors, and styling options for displaying content
- [TextArea](https://react-ui-library.com/llms/components/TextArea.md): The TextArea component provides a multi-line text input with support for auto-resizing, character counting, validation states, and flexible sizing options
- [Timeline](https://react-ui-library.com/llms/components/Timeline.md): Timeline component displays a sequence of events or steps in chronological order with customizable styling and layout options
- [TimePicker](https://react-ui-library.com/llms/components/TimePicker.md): Inline panel for selecting a time with hour/minute (and optional seconds) precision, rendered directly in the page rather than in a dialog — the time counterpart to MonthPicker and YearPicker
- [TimePickerInput](https://react-ui-library.com/llms/components/TimePickerInput.md): Form field for selecting a time. Presents an input showing the formatted value and opens a TimePicker panel in a dialog, mirroring the behavior of DatePickerInput, MonthPickerInput and YearPickerInput. Adds the field concerns the inline panel has no notion of — label, validation, clearing, and manual text entry — and supports the full <Input> slot-prop API
- [Title](https://react-ui-library.com/llms/components/Title.md): Semantic heading component mapping order={1..6} to typography variants h1..h6 while offering decorative enhancements like underline, afterline, and prefix adornments
- [Toast](https://react-ui-library.com/llms/components/Toast.md): The Toast component provides non-blocking notification messages that appear temporarily to give feedback about an operation or event
- [Toggle](https://react-ui-library.com/llms/components/Toggle.md): Toggle provides an intuitive way to select between multiple options
- [Tooltip](https://react-ui-library.com/llms/components/Tooltip.md): Tooltip provides contextual information without disrupting the user's workflow
- [Tree](https://react-ui-library.com/llms/components/Tree.md): Tree component for displaying hierarchical data structures like file systems, navigation menus, or any nested content
- [Video](https://react-ui-library.com/llms/components/Video.md): A comprehensive video player component that supports YouTube videos, MP4 files, and file buffers with advanced timeline synchronization capabilities
- [Waveform](https://react-ui-library.com/llms/components/Waveform.md): Waveform component provides visualization and interaction capabilities for audio data, supporting various display modes and interactive features
- [YearPicker](https://react-ui-library.com/llms/components/YearPicker.md): Grid-based selector for choosing a year within a configurable range
- [YearPickerInput](https://react-ui-library.com/llms/components/YearPickerInput.md): Input component that opens YearPicker inside a modal dialog

## Charts

- [Area Chart](https://react-ui-library.com/llms/components/AreaChart.md): Area (filled) chart for visualizing cumulative or stacked trends
- [Bar Chart](https://react-ui-library.com/llms/components/BarChart.md): Discrete / categorical bar chart visualization component
- [Bubble Chart](https://react-ui-library.com/llms/components/BubbleChart.md): Scatter-style plot where point radius encodes a third quantitative dimension
- [Candlestick Chart](https://react-ui-library.com/llms/components/CandlestickChart.md): Visualizes financial OHLC price movements over time
- [Combo Chart](https://react-ui-library.com/llms/components/ComboChart.md): Combines multiple chart types (e.g., bars and line) for richer comparison
- [Donut Chart](https://react-ui-library.com/llms/components/DonutChart.md): Circular proportional chart with a hollow center (variant of pie chart)
- [Funnel Chart](https://react-ui-library.com/llms/components/FunnelChart.md): Shows progressive reduction of data through stages (conversion pipeline)
- [GaugeChart](https://react-ui-library.com/llms/components/GaugeChart.md): Visualises progress toward a bounded target using a semicircular gauge with configurable ranges, ticks, labels, and animated needle
- [Grouped Bar Chart](https://react-ui-library.com/llms/components/GroupedBarChart.md): Bar chart grouping multiple series side-by-side for comparison
- [Heatmap Chart](https://react-ui-library.com/llms/components/HeatmapChart.md): Color-coded matrix for intensity visualization across two dimensions
- [Histogram Chart](https://react-ui-library.com/llms/components/HistogramChart.md): Distribution of continuous data split into bins
- [Line Chart](https://react-ui-library.com/llms/components/LineChart.md): Basic line chart visualization component
- [Marimekko Chart](https://react-ui-library.com/llms/components/MarimekkoChart.md): Visualize categorical mix alongside overall weight with a mosaic-style variable-width column chart
- [Network Chart](https://react-ui-library.com/llms/components/NetworkChart.md): Graph structure visualization (nodes & links) for relationships
- [Pareto Chart](https://react-ui-library.com/llms/components/ParetoChart.md): Highlight the small number of categories that drive the majority of impact with a bar plus cumulative line visualization
- [Pie Chart](https://react-ui-library.com/llms/components/PieChart.md): Proportional slice chart for categorical part-to-whole representation
- [Radar Chart](https://react-ui-library.com/llms/components/RadarChart.md): Displays multivariate data across axes starting from the same origin
- [Radial Bar Chart](https://react-ui-library.com/llms/components/RadialBarChart.md): Circular bar segments representing values radially
- [Ridge Chart](https://react-ui-library.com/llms/components/RidgeChart.md): Layered density plots (joyplot) comparing distributions across categories
- [Sankey Chart](https://react-ui-library.com/llms/components/SankeyChart.md): Flow diagram showing volume between nodes
- [Scatter Chart](https://react-ui-library.com/llms/components/ScatterChart.md): Plots data points in two-dimensional space for correlation analysis
- [Sparkline Chart](https://react-ui-library.com/llms/components/SparklineChart.md): Compact inline trend indicator for dense data summaries
- [Stacked Area Chart](https://react-ui-library.com/llms/components/StackedAreaChart.md): Area chart with multiple series stacked to show cumulative contributions
- [Stacked Bar Chart](https://react-ui-library.com/llms/components/StackedBarChart.md): Bar chart with segments stacked to show part-to-whole by category
- [Violin Chart](https://react-ui-library.com/llms/components/ViolinChart.md): Distribution visualization combining box plot and kernel density

## Hooks

- [useClipboard](https://react-ui-library.com/llms/hooks/useClipboard.md): Copy values to the system clipboard with optimistic status updates and optional reset timers
- [useControllableState](https://react-ui-library.com/llms/hooks/useControllableState.md): Back a value-bearing component with either a controlled value prop or internal state, decided by one call
- [useDebouncedCallback](https://react-ui-library.com/llms/hooks/useDebouncedCallback.md): Wrap an imperative function in a stable debounced callback that exposes cancel and flush
- [useDebouncedValue](https://react-ui-library.com/llms/hooks/useDebouncedValue.md): Derive a debounced copy of a changing value so renders and effects react only once it settles
- [useDeviceInfo](https://react-ui-library.com/llms/hooks/useDeviceInfo.md): Gather a complete snapshot of runtime details, OS metadata, safe area insets, screen metrics, locale, input capabilities, and helper booleans
- [useDisclosure](https://react-ui-library.com/llms/hooks/useDisclosure.md): Manage boolean open/close state with open, close, and toggle handlers plus callbacks that fire only on real transitions
- [useEscapeKey](https://react-ui-library.com/llms/hooks/useEscapeKey.md): Listen for user to press the Escape key to dismiss transient UI like modals, drawers, or menus
- [useGlobalHotkeys](https://react-ui-library.com/llms/hooks/useGlobalHotkeys.md): Attach application-wide shortcuts that persist even when the originating component unmounts
- [useHaptics](https://react-ui-library.com/llms/hooks/useHaptics.md): Trigger platform-native vibration patterns with throttling and graceful fallbacks when haptics are unavailable
- [useHotkeys](https://react-ui-library.com/llms/hooks/useHotkeys.md): Register scoped keyboard shortcuts that only run while the component using them stays mounted
- [useHover](https://react-ui-library.com/llms/hooks/useHover.md): Track hover state and spread handlers that satisfy both React Native's hover props and the DOM's mouse events
- [useMaskedInput](https://react-ui-library.com/llms/hooks/useMaskedInput.md): Keep controlled inputs in sync with formatted masks while exposing the unmasked value and completion status
- [useMediaQuery](https://react-ui-library.com/llms/hooks/useMediaQuery.md): Evaluate a CSS media query on web and width/height queries on native, updating as the viewport changes
- [useOverlayMode](https://react-ui-library.com/llms/hooks/useOverlayMode.md): Return consistent booleans for deciding whether a component should render as a fullscreen modal or an anchored overlay/portal across web and native platforms
- [useScrollSpy](https://react-ui-library.com/llms/hooks/useScrollSpy.md): Collect headings from the DOM or title registry and track which section is currently visible
- [useSpotlightToggle](https://react-ui-library.com/llms/hooks/useSpotlightToggle.md): Provide a convenience wrapper for the global command palette shortcut so feature teams can open Spotlight without touching implementation details
- [useTitleRegistration](https://react-ui-library.com/llms/hooks/useTitleRegistration.md): Register headings with the shared title registry so sticky TOCs and scrollspy hooks stay in sync
- [useToggleColorScheme](https://react-ui-library.com/llms/hooks/useToggleColorScheme.md): Bind a keyboard shortcut to cycle through available color schemes provided by the theme mode context

## FAQ

- [What is React UI Library?](https://react-ui-library.com/llms/faq/what-is.md): React UI Library is a React Native UI component library designed for building cross-platform applications with a consistent look and feel
- [Is React UI Library compatible with Expo?](https://react-ui-library.com/llms/faq/expo-compatibility.md): Yes! React UI Library is fully compatible with Expo and works out of the box
- [Does React UI Library support React Native Web?](https://react-ui-library.com/llms/faq/does-support.md): Absolutely! React UI Library is built with React Native Web compatibility in mind
- [Can I customize the theme?](https://react-ui-library.com/llms/faq/can-customize.md): Yes, React UI Library has a comprehensive theming system
- [Can I use custom fonts?](https://react-ui-library.com/llms/faq/can-use-custom-fonts.md): Yes, you can configure custom fonts through the theme system
- [How do I report bugs or request features?](https://react-ui-library.com/llms/faq/how-report-bugs.md): You can report bugs and request features on our GitHub repository