# plocks

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

This index lists plocks documentation pages formatted for LLMs.
Each link points to a standalone Markdown file under the /llms path; any docs URL
with `.md` appended (https://plocks.dev/ui/Button.md) serves the same file.

Whole-library files:
- https://plocks.dev/llms-small.txt (~180k tokens) — every component, chart and hook: imports, own props, one example each. Loads the whole API at once.
- https://plocks.dev/llms-full.txt (~445k tokens) — every page in full, nothing truncated. Larger than most context windows; suited to search and embedding.

Agent skills for Claude Code, Cursor and others: https://github.com/platform-blocks/skills (`npx skills add https://github.com/platform-blocks/skills --skill plocks-setup`)

Install: `npm install @plocks/ui` — separate packages, installed alongside it: `@plocks/brands`, `@plocks/carousel`, `@plocks/charts`, `@plocks/code`, `@plocks/dates`, `@plocks/emoji-picker`, `@plocks/media`, `@plocks/qrcode`, `@plocks/spotlight`. A component page's Import line names the package it comes from.
Version: generated from the `main` branch — `@plocks/ui` 0.2.0, `@plocks/brands` 0.2.0, `@plocks/carousel` 0.2.0, `@plocks/charts` 0.2.0, `@plocks/code` 0.2.0, `@plocks/dates` 0.2.0, `@plocks/emoji-picker` 0.2.0, `@plocks/media` 0.2.0, `@plocks/qrcode` 0.2.0, `@plocks/spotlight` 0.2.0. The branch can be ahead of the latest npm release; if an API here is missing from your installed version, check the changelog: https://github.com/platform-blocks/plocks/tree/main/changelog
Website: https://plocks.dev • GitHub: https://github.com/platform-blocks/plocks • npm: https://www.npmjs.com/package/@plocks/ui

**Conventions**

- Import from the package root: `import { Button, Row, useToast } from '@plocks/ui'`. Some components live in their own package — `@plocks/dates`, `@plocks/charts`, `@plocks/code`, `@plocks/media`, `@plocks/carousel`, `@plocks/spotlight`, `@plocks/brands`, `@plocks/qrcode`, `@plocks/emoji-picker` — installed alongside `@plocks/ui`; each page's Import line names the package.
- Wrap the app once in `<PlocksProvider>` (theme, color scheme, overlays, i18n). `useToast()` and `useDialog()` render through `<ToastProvider>` / `<DialogProvider>` — mount those inside it before calling them. Theming: https://plocks.dev/llms/guides/theming.md
- Lay out with `Block` in place of `View`, `Row` / `Column` for flex stacks (`gap`, `align`, `justify`, `wrap`), and `Grid` + `GridItem` for columns. `Row` and `Column` are documented on the Flex page.
- Most components take the shared style props — spacing (`m`, `p`, `mx`, `py`, …), sizing (`w`, `h`, `fullWidth`, …), `radius`, `shadow` — form inputs share the field props (`label`, `description`, `error`, `helperText`, `required`, …) and charts the chart props. Component pages list their own props and name the shared groups they accept; the groups are defined once here: https://plocks.dev/llms/guides/shared-props.md
- `size`, spacing, `radius` and `shadow` take the tokens `xs` `sm` `md` `lg` `xl` `2xl` `3xl` (default `md`) or a number. `color` takes a palette name (`primary`, `secondary`, `tertiary`, `success`, `warning`, `error`, `gray`), a shade (`'primary.6'`), or any CSS color.
- `Button` is neutral by default — use `variant="filled"` for the primary action. Events use React Native names: `onPress`, `onChange`, never `onClick`.
- `<Icon name="…">` accepts only names in the built-in Tabler registry — do not guess one: https://plocks.dev/llms/guides/icons.md
- Every example is a complete module: real imports from the published packages and an exported `Demo` component. Fixtures it imports (`./data`) are shown beneath it.

**Choosing between similar components**

- On/off or pick-one input: `Switch` for a setting that applies immediately; `Checkbox` for a choice submitted with a form; `ControlField` wraps either (or `Radio`) in a labelled, pressable row; `SegmentedControl` for 2–5 exclusive options shown inline; `RadioGroup` for a vertical list; `Select` for a long list in a dropdown; `AutoComplete` when the list is searched or loaded async; `ToggleGroup` for toolbar-style single or multi selection.
- Tabular data: `Table` for static semantic markup; `DataTable` for sorting, filtering, pagination and row selection; `DataList` for label/value pairs.
- Dates and times: `DatePickerInput` / `TimePickerInput` for a form field that opens a picker; `DatePicker` / `TimePicker` for an inline panel; `Calendar` for a full month grid; `MiniCalendar` for a compact month view; `MonthPicker` / `YearPicker` for coarser choices.
- Colors: `ColorInput` for a hex field plus palette; `ColorPicker` for a swatch button that opens a palette, with no text field; `ColorSwatch` to display a color.
- Floating and transient UI: `Tooltip` for a non-interactive hint; `Popover` for interactive content anchored to a trigger; `Menu` for a list of actions; `ContextMenu` for right-click / long-press; `Dialog` for modal, confirmation or bottom-sheet content; `Toast` (via `useToast()`) for a transient notice; `Alert` for a message that stays inline.
- Loading states: `Loader` for a spinner; `Skeleton` for placeholders shaped like the content; `Progress` (linear) or `Ring` (radial) for measurable progress; `LoadingOverlay` to block a region while work runs.
- Labels and markers: `Badge` for a status, category or count; `Chip` for a tag the user selects, presses or removes; `Indicator` for a dot or count pinned to the corner of another element.
- Containers: `Block` for plain layout; `Card` for a content card (six variants); `Surface` for an elevation level without card chrome; `Space` for a fixed gap where margins do not fit.
- Text: `Text` for body copy and inline variants; `Title` for semantic headings (`order={1..6}`); `Highlight` to mark matches in a string; `GradientText` / `ShimmerText` for decorative emphasis.
- Actions and navigation: `Button` for actions; `IconButton` for icon-only actions (needs `accessibilityLabel`); `Link` for navigation; `Menu` for several related actions behind one trigger; `Tabs`, `Stepper`, `Pagination`, `Breadcrumbs` and `NavTree` for moving between views.

## Guides

- [Getting started](https://plocks.dev/llms/guides/getting-started.md): Install plocks, wire up the provider, and render your first component
- [Theming](https://plocks.dev/llms/guides/theming.md): Color schemes, custom palettes, and reading theme tokens in your own components
- [Shared props and tokens](https://plocks.dev/llms/guides/shared-props.md): The style, field and chart props many components accept — spacing, sizing, radius, shadow, label/error/helperText, chart options — and the size and color tokens their values use
- [Icons](https://plocks.dev/llms/guides/icons.md): The 216 built-in icon names `<Icon name>` and `IconButton` accept, and how to use any other icon
- [Accessibility](https://plocks.dev/llms/guides/accessibility.md): How plocks meets WCAG 2.1 AA for keyboard, screen reader, low-vision, and motion-sensitive users
- [Localization](https://plocks.dev/llms/guides/localization.md): plocks ships a lightweight i18n layer. Provide locale resource objects, wrap your app with I18nProvider, then translate via the tx prop or the useI18n hook

## Components

- [Accordion](https://plocks.dev/llms/components/Accordion.md): Groups related content into expandable sections
- [ActionBar](https://plocks.dev/llms/components/ActionBar.md): Use ActionBar for actions that apply to selected content. Also: `ActionBarDivider`, `ActionBarCloseButton`, `ActionBar.CloseButton`, `ActionBar.Divider`
- [Alert](https://plocks.dev/llms/components/Alert.md): Alert displays prominent messages with severity styles and optional actions
- [AppShell](https://plocks.dev/llms/components/AppShell.md): AppShell arranges an app’s header, navigation, aside, footer, and mobile navigation in a responsive frame. Also: `AppShellHeader`, `AppShellNavbar`, `AppShellAside`, `AppShellFooter`, `AppShellBottomNav`, `useAppShell`, `useAppShellApi`, `useAppShellLayout`, …
- [AudioPlayer](https://plocks.dev/llms/components/AudioPlayer.md): `@plocks/media` — AudioPlayer combines audio playback controls with a seekable waveform
- [AutoComplete](https://plocks.dev/llms/components/AutoComplete.md): Provide search functionality with suggestions, supporting single/multi-select, async data loading, and rich content display
- [Avatar](https://plocks.dev/llms/components/Avatar.md): Displays user profile images, initials, or icons. Also: `AvatarGroup`
- [BackgroundImage](https://plocks.dev/llms/components/BackgroundImage.md): BackgroundImage places content over an image-filled container
- [Badge](https://plocks.dev/llms/components/Badge.md): Compact label for a status, category or count, optionally pressable or removable — use Chip for tags the user selects and Indicator for a dot or count pinned to another element
- [Block](https://plocks.dev/llms/components/Block.md): Block is a layout primitive for building styled views
- [Blockquote](https://plocks.dev/llms/components/Blockquote.md): Blockquote highlights a quotation or important passage
- [BrandButton](https://plocks.dev/llms/components/BrandButton.md): `@plocks/brands` — Renders a branded pressable for any platform in the brand icon registry
- [BrandIcon](https://plocks.dev/llms/components/BrandIcon.md): `@plocks/brands` — Common brand logos rendered as SVG
- [Breadcrumbs](https://plocks.dev/llms/components/Breadcrumbs.md): Breadcrumbs displays the path to the current page as navigation links
- [Button](https://plocks.dev/llms/components/Button.md): A flexible interactive button element supporting variants, sizes, icons, loading state, and full-width layout
- [Calendar](https://plocks.dev/llms/components/Calendar.md): `@plocks/dates` — Calendar displays a month grid for choosing dates
- [Card](https://plocks.dev/llms/components/Card.md): Provides a flexible container for displaying content
- [Carousel](https://plocks.dev/llms/components/Carousel.md): `@plocks/carousel` — Displays a series of content in a horizontal scrollable view with optional navigation dots and controls
- [Cascader](https://plocks.dev/llms/components/Cascader.md): Only leaves are selected by default. Set changeOnSelect to allow intermediate levels
- [Checkbox](https://plocks.dev/llms/components/Checkbox.md): Checkbox lets users select options individually or in a group
- [Chip](https://plocks.dev/llms/components/Chip.md): Compact tag the user can select (`checked` / `onChange`), press or remove — for filters and input tokens; use Badge for static status labels
- [CodeBlock](https://plocks.dev/llms/components/CodeBlock.md): `@plocks/code` — CodeBlock displays source code with syntax highlighting and optional copy controls
- [Collapse](https://plocks.dev/llms/components/Collapse.md): Displays content that can be revealed or hidden with an animation
- [ColorInput](https://plocks.dev/llms/components/ColorInput.md): ColorInput combines a hex field with a palette of preset colors
- [ColorPicker](https://plocks.dev/llms/components/ColorPicker.md): ColorPicker opens a compact palette for choosing a preset color
- [ColorSwatch](https://plocks.dev/llms/components/ColorSwatch.md): A simple square component for displaying colors, designed as a building block for color pickers and palette interfaces
- [ComboboxPopover](https://plocks.dev/llms/components/ComboboxPopover.md): Use a ref-forwarding child inside Target. On phones the list opens in a centered dialog. Also: `ComboboxPopoverTarget`, `ComboboxPopover.Target`
- [ContextMenu](https://plocks.dev/llms/components/ContextMenu.md): ContextMenu shows actions for a target on right-click or long-press
- [ControlField](https://plocks.dev/llms/components/ControlField.md): ControlField combines a label, description, and a control (Switch, Checkbox, or Radio) into a single pressable row. Also: `ControlFieldGroup`, `ControlField.Description`, `ControlField.Group`, `ControlField.Indicator`, `ControlField.Label`, `useControlField`, `useControlFieldContext`, `useControlFieldGroup`
- [CopyButton](https://plocks.dev/llms/components/CopyButton.md): Small utility component for copying text values to the clipboard with optional toast feedback
- [DataList](https://plocks.dev/llms/components/DataList.md): DataList displays label and value pairs in an aligned list. Also: `DataList.Item`, `DataList.ItemLabel`, `DataList.ItemValue`
- [DataTable](https://plocks.dev/llms/components/DataTable.md): DataTable displays tabular data with sorting, pagination, selection, and editable cells
- [DatePicker](https://plocks.dev/llms/components/DatePicker.md): `@plocks/dates` — DatePicker renders an inline calendar focused on keyboard-friendly, accessible selection flows. Also: `Month`, `Day`
- [DatePickerInput](https://plocks.dev/llms/components/DatePickerInput.md): `@plocks/dates` — DatePickerInput opens a calendar from a form field to select a date
- [Dialog](https://plocks.dev/llms/components/Dialog.md): Presents content above the app, supporting focus trapping, scroll locking, and multiple presentation styles (modal, confirmation, bottom sheet). Also: `DialogProvider`, `DialogRenderer`, `useDialog`, `useDialogApi`, `useDialogs`, …
- [Divider](https://plocks.dev/llms/components/Divider.md): Divider separates content with a line or optional label
- [EmojiPicker](https://plocks.dev/llms/components/EmojiPicker.md): `@plocks/emoji-picker` — EmojiPicker lets users browse and select Unicode emoji
- [EmojiPickerInput](https://plocks.dev/llms/components/EmojiPickerInput.md): `@plocks/emoji-picker` — EmojiPickerInput opens an emoji picker from a form field and stores the selected Unicode emoji
- [EmptyState](https://plocks.dev/llms/components/EmptyState.md): Use shorthand content for a simple placeholder, or compound members for custom layout and actions. Also: `EmptyStateIndicator`, `EmptyStateTitle`, `EmptyStateDescription`, `EmptyStateActions`, `EmptyState.Actions`, …
- [FileInput](https://plocks.dev/llms/components/FileInput.md): Provides a user-friendly interface for file uploads with drag-and-drop functionality, file validation, and preview capabilities
- [Flex](https://plocks.dev/llms/components/Flex.md): Flex provides a powerful and intuitive way to create flexible layouts using CSS Flexbox principles. Also: `Row`, `Column`
- [FloatingActions](https://plocks.dev/llms/components/FloatingActions.md): FloatingActions places related commands above a trigger or fans them out in a flower layout
- [FloatingIndicator](https://plocks.dev/llms/components/FloatingIndicator.md): Give the parent position: 'relative'. On native, placement updates when the target or parent changes or the screen dimensions change
- [FloatingWindow](https://plocks.dev/llms/components/FloatingWindow.md): Use DragHandle when controls inside the window need their own pointer interactions. Also: `FloatingWindowDragHandle`, `FloatingWindowResizeHandle`, `FloatingWindow.DragHandle`, `FloatingWindow.ResizeHandle`, `useFloatingWindow`
- [Form](https://plocks.dev/llms/components/Form.md): Form manages values, validation, and submission state for a group of inputs. Also: `Form.Field`, `Form.Input`, `Form.Submit`, `useFormContext`, `useOptionalFormContext`
- [FormLayout](https://plocks.dev/llms/components/FormLayout.md): FormLayout arranges fields in spaced form sections. Also: `FormSection`, `FormGroup`
- [Gauge](https://plocks.dev/llms/components/Gauge.md): Use Gauge for a value within a known range. Also: `Gauge.Center`, `Gauge.Labels`, `Gauge.Needle`, `Gauge.Range`, `Gauge.Ticks`, …
- [Gradient](https://plocks.dev/llms/components/Gradient.md): Gradient fills a layout container with a color transition
- [GradientText](https://plocks.dev/llms/components/GradientText.md): A text component that displays text with gradient colors
- [Grid](https://plocks.dev/llms/components/Grid.md): Grid arranges items in responsive columns and spans. Also: `GridItem`
- [Highlight](https://plocks.dev/llms/components/Highlight.md): Highlight emphasizes matching fragments inside longer strings, reusing the Text component so typography settings stay consistent across platforms
- [HoverCard](https://plocks.dev/llms/components/HoverCard.md): HoverCard shows supplementary content beside a target on hover or focus
- [Icon](https://plocks.dev/llms/components/Icon.md): Renders an icon from the built-in Tabler registry by `name`, or any icon component or element passed as `icon`
- [IconButton](https://plocks.dev/llms/components/IconButton.md): IconButton triggers an action with an icon instead of a text label
- [Image](https://plocks.dev/llms/components/Image.md): Displays images with optional captions and overlays, providing a flexible way to present visual content in your application
- [Indicator](https://plocks.dev/llms/components/Indicator.md): Indicator places a status dot or count on a parent element
- [Input](https://plocks.dev/llms/components/Input.md): Input provides a styled text field with labels, validation states, and helper text. Also: `PasswordInput`, `TextInputBase`
- [Joystick](https://plocks.dev/llms/components/Joystick.md): Joystick captures two-axis input as a spring-return stick or persistent XY pad
- [KeyboardAvoidingArea](https://plocks.dev/llms/components/KeyboardAvoidingArea.md): KeyboardAvoidingArea moves content clear of the mobile keyboard
- [KeyboardAwareLayout](https://plocks.dev/llms/components/KeyboardAwareLayout.md): KeyboardAwareLayout adjusts screen content when the on-screen keyboard appears
- [KeyCap](https://plocks.dev/llms/components/KeyCap.md): A visual component for displaying keyboard keys, shortcuts, and key combinations with proper styling. Also: `useKeyCapStyles`
- [Knob](https://plocks.dev/llms/components/Knob.md): Knob provides a rotary control for selecting a value within a range. Also: `Knob.Fill`, `Knob.Pointer`, `Knob.Progress`, `Knob.Ring`, `Knob.RingSegment`, …
- [Layout](https://plocks.dev/llms/components/Layout.md): Row and Column arrange content horizontally and vertically with Flex alignment, spacing, and sizing props
- [Lightbox](https://plocks.dev/llms/components/Lightbox.md): Lightbox displays images in a full-screen viewer with navigation and optional metadata
- [Link](https://plocks.dev/llms/components/Link.md): A versatile component for creating styled hyperlinks and navigation elements with hover states and accessibility features. Also: `LinkBox`
- [ListGroup](https://plocks.dev/llms/components/ListGroup.md): Provides an organized list structure with items, dividers, and sections for displaying grouped content. Also: `ListGroupItem`, `ListGroupDivider`, `ListGroupBody`
- [Loader](https://plocks.dev/llms/components/Loader.md): A animated loading component for indicating ongoing processes and loading states with various sizes and styles
- [LoadingOverlay](https://plocks.dev/llms/components/LoadingOverlay.md): LoadingOverlay covers content with a loading indicator while work is in progress
- [Markdown](https://plocks.dev/llms/components/Markdown.md): `@plocks/code` — Provides a way to render Markdown content with custom styling and component mapping
- [Marquee](https://plocks.dev/llms/components/Marquee.md): Use Marquee for decorative rows such as logos or short badges
- [Masonry](https://plocks.dev/llms/components/Masonry.md): Masonry arranges items of varying heights in responsive columns
- [Menu](https://plocks.dev/llms/components/Menu.md): Provides a dropdown interface for navigation links, actions, and contextual options. Also: `MenuItem`, `MenuLabel`, `MenuDivider`, `MenuDropdown`, `MenuSub`, `useMenuContext`, `useMenuStyles`, …
- [Menubar](https://plocks.dev/llms/components/Menubar.md): Menubar wraps the existing Menu dropdowns and keeps only one menu open at a time. Also: `MenubarMenu`, `MenubarTarget`, `MenubarDropdown`, `Menubar.Dropdown`, `Menubar.Menu`, …
- [MenuItemButton](https://plocks.dev/llms/components/MenuItemButton.md): A row button used inside menus and command palettes
- [MiniCalendar](https://plocks.dev/llms/components/MiniCalendar.md): `@plocks/dates` — A compact calendar component for displaying a month view with selectable dates
- [MonthPicker](https://plocks.dev/llms/components/MonthPicker.md): `@plocks/dates` — Interactive grid for selecting a month within a given year
- [MonthPickerInput](https://plocks.dev/llms/components/MonthPickerInput.md): `@plocks/dates` — MonthPickerInput opens a month picker from a form field
- [MotionBlock](https://plocks.dev/llms/components/MotionBlock.md): MotionBlock animates a layout container using React Native animated values
- [NavTree](https://plocks.dev/llms/components/NavTree.md): Sidebar navigation that groups a flat list of routes into a collapsible tree, opening and marking the current page
- [NumberInput](https://plocks.dev/llms/components/NumberInput.md): NumberInput provides a numeric field with step controls and optional formatting
- [OverflowList](https://plocks.dev/llms/components/OverflowList.md): Items are measured offscreen before the list is shown
- [Overlay](https://plocks.dev/llms/components/Overlay.md): Overlay dims or blurs content behind a foreground element
- [Pagination](https://plocks.dev/llms/components/Pagination.md): Pagination provides controls for moving through pages of content
- [PhoneInput](https://plocks.dev/llms/components/PhoneInput.md): Provides a flexible way to capture telephone numbers with built-in masking and formatting
- [PinInput](https://plocks.dev/llms/components/PinInput.md): PinInput provides a sequence of fields for entering a PIN or verification code
- [Popover](https://plocks.dev/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. Also: `Popover.Dropdown`, `Popover.Target`
- [Progress](https://plocks.dev/llms/components/Progress.md): Displays the completion progress of a task or process. Also: `ProgressRoot`, `ProgressSection`, `ProgressLabel`, `Progress.Label`, `Progress.Root`, …
- [QRCode](https://plocks.dev/llms/components/QRCode.md): `@plocks/qrcode` — Generates QR codes for encoding text, URLs, or other data. Also: `QRCodeSVG`
- [Radio](https://plocks.dev/llms/components/Radio.md): Radio lets users select one option from a group of choices. Also: `RadioGroup`
- [Rating](https://plocks.dev/llms/components/Rating.md): An interactive component for displaying star ratings and allowing users to provide ratings with customizable appearance
- [ReorderableList](https://plocks.dev/llms/components/ReorderableList.md): ReorderableList accepts an ordered data array and calls onReorder({ data, from, to }) after a move
- [Ring](https://plocks.dev/llms/components/Ring.md): Ring displays progress or status in a circular indicator
- [RollingNumber](https://plocks.dev/llms/components/RollingNumber.md): RollingNumber animates changing digits in a numeric readout
- [SafeArea](https://plocks.dev/llms/components/SafeArea.md): SafeArea extends a layout container through the device safe area
- [ScrollArea](https://plocks.dev/llms/components/ScrollArea.md): ScrollArea provides a scrollable container with named layout and spacing props
- [Scroller](https://plocks.dev/llms/components/Scroller.md): Use Scroller for horizontal content that should preserve native scrolling and expose visible navigation controls. Also: `useScroller`
- [Search](https://plocks.dev/llms/components/Search.md): Search provides a text field with debouncing, loading feedback, and a clear control
- [SegmentedControl](https://plocks.dev/llms/components/SegmentedControl.md): SegmentedControl lets users choose one option from a small set of segments
- [Select](https://plocks.dev/llms/components/Select.md): Select provides a dropdown interface for choosing from predefined options. Also: `PickerTrigger`
- [ShimmerText](https://plocks.dev/llms/components/ShimmerText.md): Animated text highlight that sweeps a configurable gradient across the content
- [Skeleton](https://plocks.dev/llms/components/Skeleton.md): Skeleton components provide visual placeholders for text, avatars, and blocks to reduce perceived loading time
- [Slider](https://plocks.dev/llms/components/Slider.md): Slider lets users select a value or range by moving handles along a track. Also: `RangeSlider`
- [SoundButton](https://plocks.dev/llms/components/SoundButton.md): `@plocks/media` — SoundButton adds sound and haptic feedback to a button
- [Space](https://plocks.dev/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
- [Splitter](https://plocks.dev/llms/components/Splitter.md): A number or percent size is flexible; a px or rem size stays fixed as the container changes. Also: `SplitterPane`, `Splitter.Pane`, `useSplitter`
- [Spoiler](https://plocks.dev/llms/components/Spoiler.md): Collapses content taller than `mah` behind a show more / show less toggle
- [Spotlight](https://plocks.dev/llms/components/Spotlight.md): `@plocks/spotlight` — Spotlight provides a searchable command palette for actions, routes, and other items. Also: `SpotlightProvider`, `useSpotlightStore`, `useSpotlightStoreInstance`, `useDirectSpotlightState`
- [Stepper](https://plocks.dev/llms/components/Stepper.md): Step-by-step navigation interface, perfect for multi-step forms, wizards, and progress tracking. Also: `Stepper.Completed`, `Stepper.Step`
- [StickyNote](https://plocks.dev/llms/components/StickyNote.md): StickyNote displays reminders and annotations on a colorful paper-like surface
- [Surface](https://plocks.dev/llms/components/Surface.md): Surface provides the base container for the library's elevated components. Also: `useSurfaceLevel`
- [SwipeableRow](https://plocks.dev/llms/components/SwipeableRow.md): SwipeableRow reveals actions when swiped and provides an action button for keyboard and touch discovery
- [Switch](https://plocks.dev/llms/components/Switch.md): Switch components provide a way to toggle between two states, typically representing on/off or enabled/disabled states
- [Table](https://plocks.dev/llms/components/Table.md): Table provides semantic rows, columns, and cells for simple tabular content. Also: `TableTh`, `TableTd`, `TableTr`, `TableThead`, `TableTbody`, …
- [TableOfContents](https://plocks.dev/llms/components/TableOfContents.md): TableOfContents builds a navigable outline from page headings
- [Tabs](https://plocks.dev/llms/components/Tabs.md): Tabs organize content into multiple sections that users can navigate between
- [Text](https://plocks.dev/llms/components/Text.md): Render typography with various variants, colors, and styling options for displaying content. Also: `Small`, `Strong`, `Bold`, `Italic`, `Emphasis`, …
- [TextArea](https://plocks.dev/llms/components/TextArea.md): Provides a multi-line text input with support for auto-resizing, character counting, validation states, and flexible sizing options
- [Timeline](https://plocks.dev/llms/components/Timeline.md): Displays a sequence of events or steps in chronological order with customizable styling and layout options. Also: `Timeline.Item`
- [TimePicker](https://plocks.dev/llms/components/TimePicker.md): `@plocks/dates` — TimePicker provides an inline panel for choosing hours, minutes, and optional seconds
- [TimePickerInput](https://plocks.dev/llms/components/TimePickerInput.md): `@plocks/dates` — TimePickerInput opens a time picker from a form field and displays the selected time
- [Title](https://plocks.dev/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. Also: `Heading1`, `Heading2`, `Heading3`, `Heading4`, `Heading5`, …
- [Toast](https://plocks.dev/llms/components/Toast.md): Toast displays a temporary notification about an action or event. Also: `ToastProvider`, `useToast`, `useToastApi`, `useToastViewportOffset`, …
- [Toggle](https://plocks.dev/llms/components/Toggle.md): Toggle provides an intuitive way to select between multiple options. Also: `ToggleButton`, `ToggleGroup`, `ToggleBar`
- [Tooltip](https://plocks.dev/llms/components/Tooltip.md): Tooltip provides contextual information without disrupting the user's workflow
- [Tree](https://plocks.dev/llms/components/Tree.md): Tree displays hierarchical data with expandable branches. Also: `useTreeState`
- [TreeSelect](https://plocks.dev/llms/components/TreeSelect.md): Branches open within the dropdown; in single and multiple mode, leaves are selectable
- [Video](https://plocks.dev/llms/components/Video.md): `@plocks/media` — Video plays video sources with playback controls and a seekable timeline
- [Waveform](https://plocks.dev/llms/components/Waveform.md): Waveform visualizes audio data and can provide a seek control. Also: `WaveformSkeleton`
- [Wheel](https://plocks.dev/llms/components/Wheel.md): Use one Wheel for a single choice or place columns together for related values
- [YearPicker](https://plocks.dev/llms/components/YearPicker.md): `@plocks/dates` — Grid-based selector for choosing a year within a configurable range
- [YearPickerInput](https://plocks.dev/llms/components/YearPickerInput.md): `@plocks/dates` — YearPickerInput opens a year picker from a form field

## Charts (@plocks/charts)

- [AreaChart](https://plocks.dev/llms/components/AreaChart.md): Area (filled) chart for visualizing cumulative or stacked trends
- [BarChart](https://plocks.dev/llms/components/BarChart.md): Discrete / categorical bar chart visualization component
- [BubbleChart](https://plocks.dev/llms/components/BubbleChart.md): Scatter-style plot where point radius encodes a third quantitative dimension
- [CandlestickChart](https://plocks.dev/llms/components/CandlestickChart.md): Visualizes financial OHLC price movements over time
- [ComboChart](https://plocks.dev/llms/components/ComboChart.md): Combines multiple chart types (e.g., bars and line) for richer comparison
- [DonutChart](https://plocks.dev/llms/components/DonutChart.md): Circular proportional chart with a hollow center (variant of pie chart)
- [FunnelChart](https://plocks.dev/llms/components/FunnelChart.md): Shows progressive reduction of data through stages (conversion pipeline)
- [GroupedBarChart](https://plocks.dev/llms/components/GroupedBarChart.md): Bar chart grouping multiple series side-by-side for comparison
- [HeatmapChart](https://plocks.dev/llms/components/HeatmapChart.md): HeatmapChart shows values in a color-coded grid to reveal patterns across two dimensions
- [HistogramChart](https://plocks.dev/llms/components/HistogramChart.md): HistogramChart groups continuous values into bins to show their distribution
- [LineChart](https://plocks.dev/llms/components/LineChart.md): Basic line chart visualization component
- [MarimekkoChart](https://plocks.dev/llms/components/MarimekkoChart.md): Visualize categorical mix alongside overall weight with a mosaic-style variable-width column chart
- [NetworkChart](https://plocks.dev/llms/components/NetworkChart.md): NetworkChart visualizes relationships among nodes and links
- [ParetoChart](https://plocks.dev/llms/components/ParetoChart.md): Highlight the small number of categories that drive the majority of impact with a bar plus cumulative line visualization
- [PieChart](https://plocks.dev/llms/components/PieChart.md): Proportional slice chart for categorical part-to-whole representation
- [RadarChart](https://plocks.dev/llms/components/RadarChart.md): Displays multivariate data across axes starting from the same origin
- [RadialBarChart](https://plocks.dev/llms/components/RadialBarChart.md): Circular bar segments representing values radially
- [RidgeChart](https://plocks.dev/llms/components/RidgeChart.md): Layered density plots (joyplot) comparing distributions across categories
- [SankeyChart](https://plocks.dev/llms/components/SankeyChart.md): Flow diagram showing volume between nodes
- [ScatterChart](https://plocks.dev/llms/components/ScatterChart.md): Plots data points in two-dimensional space for correlation analysis
- [SparklineChart](https://plocks.dev/llms/components/SparklineChart.md): Compact inline trend indicator for dense data summaries
- [StackedAreaChart](https://plocks.dev/llms/components/StackedAreaChart.md): Area chart with multiple series stacked to show cumulative contributions
- [StackedBarChart](https://plocks.dev/llms/components/StackedBarChart.md): Bar chart with segments stacked to show part-to-whole by category
- [ViolinChart](https://plocks.dev/llms/components/ViolinChart.md): ViolinChart shows a data distribution with a mirrored density shape and summary statistics

## Hooks

- [useA11yId](https://plocks.dev/llms/hooks/useA11yId.md): A stable, SSR-safe element id for ARIA references like aria-controls and aria-labelledby
- [useAccessibility](https://plocks.dev/llms/hooks/useAccessibility.md): Read the whole AccessibilityProvider context at once: announce(), the announcement log, focus tracking, and screen reader and reduced-motion state
- [useAdjustable](https://plocks.dev/llms/hooks/useAdjustable.md): Make a custom value control (a slider, knob or meter) adjustable
- [useBreakpoint](https://plocks.dev/llms/hooks/useBreakpoint.md): Get the current breakpoint name (base, xs, sm, md, lg or xl) from the theme's breakpoint table, re-rendering only when the viewport crosses a breakpoint rather than on every resize
- [useClipboard](https://plocks.dev/llms/hooks/useClipboard.md): Copy values to the system clipboard with optimistic status updates and optional reset timers
- [useColorScheme](https://plocks.dev/llms/hooks/useColorScheme.md): Read the operating system's light/dark preference and re-render when it changes (prefers-color-scheme on web, Appearance on native)
- [useControllableState](https://plocks.dev/llms/hooks/useControllableState.md): Back a value-bearing component with either a controlled value prop or internal state, decided by one call
- [useDebouncedCallback](https://plocks.dev/llms/hooks/useDebouncedCallback.md): Wrap an imperative function in a stable debounced callback that exposes cancel and flush
- [useDebouncedValue](https://plocks.dev/llms/hooks/useDebouncedValue.md): Derive a debounced copy of a changing value so renders and effects react only once it settles
- [useDeviceInfo](https://plocks.dev/llms/hooks/useDeviceInfo.md): Gather a complete snapshot of runtime details, OS metadata, safe area insets, screen metrics, locale, input capabilities, and helper booleans
- [useDirection](https://plocks.dev/llms/hooks/useDirection.md): Read the text direction (dir, isRTL) and switch it with setDirection or toggleDirection, for logic that has to know which way the layout runs
- [useDisclosure](https://plocks.dev/llms/hooks/useDisclosure.md): Manage boolean open/close state with open, close, and toggle handlers plus callbacks that fire only on real transitions
- [useDragGesture](https://plocks.dev/llms/hooks/useDragGesture.md): The drag gesture behind Slider, RangeSlider, Joystick and Rating: spread its handlers, ref and style onto a View to get pointer samples in that View's own coordinates, which keep tracking after the finger leaves it, without the page or a ScrollView stealing the drag
- [useElementSize](https://plocks.dev/llms/hooks/useElementSize.md): Track an element's rendered width and height through onLayout, on web and native, to size children or switch layouts by the space a component actually has rather than the window
- [useEscapeKey](https://plocks.dev/llms/hooks/useEscapeKey.md): Listen for user to press the Escape key to dismiss transient UI like modals, drawers, or menus
- [useFieldA11y](https://plocks.dev/llms/hooks/useFieldA11y.md): Wire a custom form control to its label, description, error and helper text, using the same contract as every plocks field
- [useFloating](https://plocks.dev/llms/hooks/useFloating.md): Anchor a floating element such as a popover, menu or tooltip to a trigger: it places it with flip and shift, renders it through the app's overlay host, registers it in the layer stack for Escape, back, outside press and focus, and returns the ARIA props for both ends
- [useGlobalHotkeys](https://plocks.dev/llms/hooks/useGlobalHotkeys.md): Attach application-wide shortcuts that persist even when the originating component unmounts
- [useHaptics](https://plocks.dev/llms/hooks/useHaptics.md): Trigger platform-native vibration patterns with throttling and graceful fallbacks when haptics are unavailable
- [useHapticsSettings](https://plocks.dev/llms/hooks/useHapticsSettings.md): Read and flip the app-wide haptics switch that useHaptics, and every component built on it such as Button, Toast and Wheel, obeys: enabled, setEnabled(on) and temporarilyDisable(ms)
- [useHotkeys](https://plocks.dev/llms/hooks/useHotkeys.md): Register scoped keyboard shortcuts that only run while the component using them stays mounted
- [useHover](https://plocks.dev/llms/hooks/useHover.md): Track hover state and spread handlers that satisfy both React Native's hover props and the DOM's mouse events
- [useI18n](https://plocks.dev/llms/hooks/useI18n.md): Translate keys with t, switch the active locale with setLocale, and format numbers, dates and relative times for that locale
- [useKeyboardHeight](https://plocks.dev/llms/hooks/useKeyboardHeight.md): The height of the on-screen keyboard currently covering the app, or 0 when it's hidden, for keeping footers, floating buttons and sheets above the keyboard on native and mobile browsers
- [useKeyboardManager](https://plocks.dev/llms/hooks/useKeyboardManager.md): Read the on-screen keyboard's visibility, height and animation timing from KeyboardManagerProvider, dismiss it, or hand focus to an input by id; for layout that only needs the height, useKeyboardHeight is simpler
- [useLatestCallback](https://plocks.dev/llms/hooks/useLatestCallback.md): Wrap a callback in a function whose identity never changes but always calls the latest version, so effects, timers and subscriptions that call it don't restart when an inline handler changes
- [useLayer](https://plocks.dev/llms/hooks/useLayer.md): Register a custom overlay in the app-wide layer stack (no provider needed), so Escape and Android back close only the topmost layer, a press inside a nested layer doesn't close its parent, and focus moves in on open, can be trapped, and returns on close
- [useListNavigation](https://plocks.dev/llms/hooks/useListNavigation.md): Keyboard navigation for a combobox or listbox with virtual focus
- [useMaskedInput](https://plocks.dev/llms/hooks/useMaskedInput.md): Keep controlled inputs in sync with formatted masks while exposing the unmasked value and completion status
- [useMediaQuery](https://plocks.dev/llms/hooks/useMediaQuery.md): Evaluate a CSS media query on web and width/height queries on native, updating as the viewport changes
- [useMergedRef](https://plocks.dev/llms/hooks/useMergedRef.md): Combine any number of object or callback refs into one stable callback ref, so a component can keep its own ref to a node and still honor the ref its parent forwarded
- [useOverlayApi](https://plocks.dev/llms/hooks/useOverlayApi.md): Open, update and close overlays imperatively in the nearest OverlayProvider (PlocksProvider mounts one along with its renderer): openOverlay(config) returns an id for updateOverlay and closeOverlay, and closeAllOverlays clears them all
- [useOverlayMode](https://plocks.dev/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
- [usePagination](https://plocks.dev/llms/hooks/usePagination.md): Headless pagination: the current page, the page numbers to render with ellipses for the gaps, and handlers to move between pages
- [usePersistedState](https://plocks.dev/llms/hooks/usePersistedState.md): useState that survives reloads: the value is saved under a key in localStorage on the web (AsyncStorage on native when installed, or any storage you pass) and shared by every component using that key
- [usePopoverPositioning](https://plocks.dev/llms/hooks/usePopoverPositioning.md): The measure-and-place engine under useFloating: attach anchorRef (and popoverRef) and it returns where the popover fits in the viewport — coordinates, the side it landed on after flipping, and the space available
- [useReducedMotion](https://plocks.dev/llms/hooks/useReducedMotion.md): Whether animations should be reduced: the OS preference (prefers-reduced-motion on web, AccessibilityInfo on native), or the override set by the nearest ReducedMotionProvider
- [useRovingFocus](https://plocks.dev/llms/hooks/useRovingFocus.md): Give a composite widget (toolbar, tab list, radio group, grid) a single tab stop
- [useScrollSpy](https://plocks.dev/llms/hooks/useScrollSpy.md): Collect headings from the DOM or title registry and track which section is currently visible
- [useSpotlightToggle](https://plocks.dev/llms/hooks/useSpotlightToggle.md): Provide a convenience wrapper for the global command palette shortcut so feature teams can open Spotlight without touching implementation details
- [useStyleProps](https://plocks.dev/llms/hooks/useStyleProps.md): Turn the library's style props (m, p, w, h, bg, opacity, …) into a React Native style resolved against the current theme, so your own components can accept them like the built-in ones do
- [useTheme](https://plocks.dev/llms/hooks/useTheme.md): Read the active PlocksTheme (color ramps, text and background roles, spacing, radii, font sizes) to style your own primitives; outside a provider it returns DEFAULT_THEME
- [useThemedStyles](https://plocks.dev/llms/hooks/useThemedStyles.md): Build a style table from the theme once per theme and dependency list instead of on every render
- [useThemeMode](https://plocks.dev/llms/hooks/useThemeMode.md): Read and change the user's color-scheme choice ('light', 'dark' or 'auto') along with the scheme it resolves to, for building a theme switcher
- [useTitleRegistration](https://plocks.dev/llms/hooks/useTitleRegistration.md): Register headings with the shared title registry so sticky TOCs and scrollspy hooks stay in sync
- [useToggleColorScheme](https://plocks.dev/llms/hooks/useToggleColorScheme.md): Bind a keyboard shortcut to cycle through available color schemes provided by the theme mode context
- [useViewport](https://plocks.dev/llms/hooks/useViewport.md): Read the current viewport { width, height, breakpoint } from one shared, hydration-safe store, re-rendering on every resize
- [useVisibility](https://plocks.dev/llms/hooks/useVisibility.md): Decide whether your own component should render from the visibility props every library component accepts: hiddenFrom and visibleFrom (breakpoints) and lightHidden and darkHidden (color scheme)

## Optional

- [Contributing](https://plocks.dev/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
- [What is plocks?](https://plocks.dev/llms/faq/what-is.md): plocks is a React Native UI component library designed for building cross-platform applications with a consistent look and feel
- [Is plocks compatible with Expo?](https://plocks.dev/llms/faq/expo-compatibility.md): Yes! plocks is fully compatible with Expo and works out of the box
- [Does plocks support React Native Web?](https://plocks.dev/llms/faq/does-support.md): Absolutely! plocks is built with React Native Web compatibility in mind
- [Can I customize the theme?](https://plocks.dev/llms/faq/can-customize.md): Yes, plocks has a comprehensive theming system
- [Can I use custom fonts?](https://plocks.dev/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://plocks.dev/llms/faq/how-report-bugs.md): You can report bugs and request features on our GitHub repository