# PanelUI

> An accessible React Native component library for Expo. 74 typed components, styled with Tailwind CSS, animated on the UI thread, and running in Expo Go.

## Sections

- [Introduction](https://panelui.dev/docs): PanelUI is an accessible, high-performance React Native component library for Expo, styled with Tailwind CSS and animated on the UI thread.
- [Installation](https://panelui.dev/docs/installation): Install PanelUI in an Expo app, step by step — packages, Metro config, CSS entry and the provider, with a fix for every error you might hit.
- [CLI](https://panelui.dev/docs/cli): Copy a single component's source into your project instead of installing the package.
- [Theming](https://panelui.dev/docs/theming): Six built-in themes across three families, the token set, how to switch at runtime, and how to override tokens.
- [Native rendering](https://panelui.dev/docs/native): Hand a component to the platform's own UI toolkit with the native prop.
- [Performance](https://panelui.dev/docs/performance): The rules every component follows, and how to measure whether they held.

## AI (beta)

- [AI](https://panelui.dev/docs/ai): Building AI chat interfaces in React Native with PanelUI.
- [Setup](https://panelui.dev/docs/ai/setup): Dependencies, polyfills and getting the API URL right on a device.
- [API route](https://panelui.dev/docs/ai/api-route): The server handler that streams from the model.
- [Chat UI](https://panelui.dev/docs/ai/chat-ui): A transcript and composer built from PanelUI components.
- [Voice](https://panelui.dev/docs/ai/voice): A level from the microphone, an assistant that talks back, and voice notes in a transcript.
- [Streaming performance](https://panelui.dev/docs/ai/streaming-performance): Why token-by-token rendering drops frames on native, and what to do.
- [Tools](https://panelui.dev/docs/ai/tools): Letting the model call your code, and showing it in the conversation.

## Components

- [Accordion](https://panelui.dev/docs/components/accordion): Collapsible sections with single or multiple selection.
- [Alert](https://panelui.dev/docs/components/alert): Status message with a built-in icon.
- [AreaChart](https://panelui.dev/docs/components/area-chart): Filled bands over time, stacked or overlaid.
- [Attachment](https://panelui.dev/docs/components/attachment): File row with upload states, built on Item.
- [Avatar](https://panelui.dev/docs/components/avatar): User image with an initials fallback and an optional badge overlay.
- [Badge](https://panelui.dev/docs/components/badge): Compact status label, dot, or notification count.
- [BarChart](https://panelui.dev/docs/components/bar-chart): Categories compared by length, grouped or stacked.
- [BottomSheet](https://panelui.dev/docs/components/bottom-sheet): Draggable sheet anchored to the bottom of the screen.
- [Breadcrumb](https://panelui.dev/docs/components/breadcrumb): The trail of links back up the hierarchy to the current page.
- [Button](https://panelui.dev/docs/components/button): Pressable action with variants, sizes, loading state and icon slots.
- [Card](https://panelui.dev/docs/components/card): Content surface with header, body and footer.
- [Calendar](https://panelui.dev/docs/components/calendar): A month of days, for picking one, several, or a range.
- [Carousel](https://panelui.dev/docs/components/carousel): A run of slides, one at a time, dragged with a finger.
- [Checkbox](https://panelui.dev/docs/components/checkbox): Animated checkbox, as a row or a selectable card.
- [Chip](https://panelui.dev/docs/components/chip): Interactive pill — a filter, a tag, or a removable token.
- [DatePicker](https://panelui.dev/docs/components/date-picker): A calendar behind a button.
- [Dialog](https://panelui.dev/docs/components/dialog): Modal dialog with a backdrop and footer actions.
- [Direction](https://panelui.dev/docs/components/direction): Reading direction for everything below it.
- [Drawer](https://panelui.dev/docs/components/drawer): A panel that comes in from an edge of the screen and covers the app until dismissed.
- [EmptyState](https://panelui.dev/docs/components/empty-state): Placeholder for a list or screen with no content.
- [Field](https://panelui.dev/docs/components/field): Layout and validation-state kit a form control composes into.
- [Flow](https://panelui.dev/docs/components/flow): Pan-and-zoom canvas of draggable nodes joined by animated edges.
- [Frame](https://panelui.dev/docs/components/frame): Widget shell — a card of rows sitting in a titled tray.
- [HeatmapChart](https://panelui.dev/docs/components/heatmap-chart): Contribution grid with a themed colour ramp and a readout.
- [Input](https://panelui.dev/docs/components/input): Text field with label, description and error message.
- [InputGroup](https://panelui.dev/docs/components/input-group): Input with leading and trailing decorators.
- [NumberInput](https://panelui.dev/docs/components/number-input): Numeric field stepped by buttons or typed by hand.
- [OtpInput](https://panelui.dev/docs/components/otp-input): One-time-code field drawn as a row of separate cells.
- [Item](https://panelui.dev/docs/components/item): Row of media, text and actions for lists and settings.
- [Label](https://panelui.dev/docs/components/label): Form field label with required, invalid and disabled states.
- [LineChart](https://panelui.dev/docs/components/line-chart): Animated time series, drawn on the UI thread.
- [Loader](https://panelui.dev/docs/components/loader): Nine loading animations behind one variant prop.
- [Map](https://panelui.dev/docs/components/map): Vector map whose basemap is drawn from your theme tokens.
- [Menu](https://panelui.dev/docs/components/menu): The list of things you can do to something.
- [Marker](https://panelui.dev/docs/components/marker): Inline note between conversation turns.
- [Message](https://panelui.dev/docs/components/message): Chat turn with avatar, bubble, header and footer.
- [MessageScroller](https://panelui.dev/docs/components/message-scroller): Scroll behaviour a chat transcript needs.
- [Popover](https://panelui.dev/docs/components/popover): Panel anchored to the element that opened it.
- [Progress](https://panelui.dev/docs/components/progress): Determinate and indeterminate progress bar.
- [RadioGroup](https://panelui.dev/docs/components/radio-group): Single-select list of options.
- [Rating](https://panelui.dev/docs/components/rating): A row of stars to read or set a score.
- [RingChart](https://panelui.dev/docs/components/ring-chart): Concentric arcs, each measured against its own target.
- [ScrollCanvas](https://panelui.dev/docs/components/scroll-canvas): Image frame whose contents move as you scroll.
- [ScrollFade](https://panelui.dev/docs/components/scroll-fade): Fades the edges of a scroll container.
- [ScrollText](https://panelui.dev/docs/components/scroll-text): Text that resolves word by word as you scroll.
- [SectionRail](https://panelui.dev/docs/components/section-rail): Floating section navigator for a long screen.
- [Select](https://panelui.dev/docs/components/select): Picker shown in a bottom sheet, expanded in place, or floating over the page.
- [Separator](https://panelui.dev/docs/components/separator): Horizontal or vertical rule between content, optionally labelled.
- [Signature](https://panelui.dev/docs/components/signature): Sign with a finger, and get the result back out as SVG or PNG.
- [Skeleton](https://panelui.dev/docs/components/skeleton): Shimmer placeholder for loading content.
- [Slider](https://panelui.dev/docs/components/slider): Pick a value by dragging a thumb along a track.
- [Spinner](https://panelui.dev/docs/components/spinner): Indeterminate loading indicator.
- [Steps](https://panelui.dev/docs/components/steps): Stepper for multi-step flows.
- [Surface](https://panelui.dev/docs/components/surface): Elevated container with a variant ladder.
- [Switch](https://panelui.dev/docs/components/switch): Animated on/off toggle.
- [Table](https://panelui.dev/docs/components/table): Rows and columns that stay lined up, with sortable headers.
- [Tabs](https://panelui.dev/docs/components/tabs): Segmented navigation with an animated indicator.
- [Textarea](https://panelui.dev/docs/components/textarea): Text field that runs to several lines, sized in rows.
- [Timeline](https://panelui.dev/docs/components/timeline): Vertical sequence of events.
- [Toast](https://panelui.dev/docs/components/toast): Transient notification queue with swipe to dismiss.
- [ToggleButton](https://panelui.dev/docs/components/toggle-button): A button that stays down, on its own or in a group.
- [Tooltip](https://panelui.dev/docs/components/tooltip): A small label that names the control under your finger.
- [Typography](https://panelui.dev/docs/components/typography): Semantic text presets.
- [Post](https://panelui.dev/docs/components/post): A social card — author, body, media and the counts underneath, with the votes animated.

## AI Components

- [Shimmer](https://panelui.dev/docs/ai-components/shimmer): Animated highlight sweeping across content.
- [ThinkingOrb](https://panelui.dev/docs/ai-components/thinking-orb): Dotted orb saying which kind of busy an agent is.
- [Soundwave](https://panelui.dev/docs/ai-components/soundwave): What a voice looks like while an app listens.
- [Reasoning](https://panelui.dev/docs/ai-components/reasoning): The model's working, shown while it happens and folded away after.
- [Sources](https://panelui.dev/docs/ai-components/sources): Where an answer came from, folded under a count.
- [Task](https://panelui.dev/docs/ai-components/task): One step an agent took, and what it did while it was there.
- [CodeBlock](https://panelui.dev/docs/ai-components/code-block): A fenced snippet, syntax-coloured and scrolled sideways.
- [Plan](https://panelui.dev/docs/ai-components/plan): What an agent intends to do, before it does it.
- [Response](https://panelui.dev/docs/ai-components/response): A model's answer, rendered as markdown while it is still arriving.

## Form

- [Form](https://panelui.dev/docs/form/form): Form state — values, validation and submission — with no form library underneath.

## Hooks

- [useCopyToClipboard](https://panelui.dev/docs/hooks/use-copy-to-clipboard): Copy text to the clipboard with a temporary copied state.
- [useDisclosure](https://panelui.dev/docs/hooks/use-disclosure): Open and closed state for an overlay.
- [useBreakpoint](https://panelui.dev/docs/hooks/use-breakpoint): Responsive state derived from the window size.
- [useKeyboard](https://panelui.dev/docs/hooks/use-keyboard): Keyboard height and visibility.
- [useKeyboardAvoidance](https://panelui.dev/docs/hooks/use-keyboard-avoidance): Keep an element clear of the software keyboard.
- [useScrollSections](https://panelui.dev/docs/hooks/use-scroll-sections): Track which section of a scroll view is being read.
- [useDebouncedValue](https://panelui.dev/docs/hooks/use-debounced-value): A copy of a value that settles after changes stop.
- [usePrevious](https://panelui.dev/docs/hooks/use-previous): The value from the previous render.
- [useBackHandler](https://panelui.dev/docs/hooks/use-back-handler): Run a handler when the Android hardware back button is pressed.
- [useTheme and useThemeMode](https://panelui.dev/docs/hooks/use-theme): Read and change the active theme.

## Utilities

- [cn](https://panelui.dev/docs/utilities/cn): Merge Tailwind classes with conflicts resolved.