A comprehensive React Native UI component library for building accessible, themeable, and cross-platform mobile and web applications. Part of the plocks ecosystem.

Features

• 100+ components — Inputs, navigation, data display, overlays, layout, and more
• Cross-platform — iOS, Android, and Web from a single codebase
• Themeable — Built-in light and dark themes with full customization via createTheme
• Accessible — Screen reader, keyboard navigation, and RTL support out of the box
• Animated — Smooth interactions powered by react-native-reanimated
• Haptics — Optional feedback via expo-haptics
• i18n ready — Built-in internationalization with I18nProvider
• Tree-shakeable — ESM and CJS builds with no side effects

More packages

Install these alongside @plocks/ui for more:

| Package | Contents | | --- | --- | | @plocks/dates | Calendar and date, month, year and time pickers | | @plocks/charts | Charts that size themselves to their container | | @plocks/code | CodeBlock with syntax highlighting, and Markdown | | @plocks/media | AudioPlayer, Video, and sound feedback | | @plocks/carousel | Carousel | | @plocks/spotlight | A ⌘K command palette |

Installation

npm install @plocks/ui

On Expo, install the peers with npx expo install so the versions match your SDK:

npx expo install react-native-reanimated react-native-safe-area-context react-native-svg

Peer dependencies

The built-in Icon glyphs are included in @plocks/ui; Tabler is only needed if you choose to use additional Tabler icons yourself.

| Package | Version | | --- | --- | | react | >=18.0.0 <20.0.0 | | react-native | >=0.79.0 | | react-native-reanimated | >=3.5.0 | | react-native-safe-area-context | >=4.5.0 | | react-native-svg | >=13.0.0 |

@plocks/ui is ESM-only. Use import or a React Native/Expo bundler; CommonJS require('@plocks/ui') is no longer supported.

Optional integrations

These are lazily required and only needed when you use features that depend on them:

expo-clipboard · expo-document-picker · expo-haptics · expo-linear-gradient · expo-navigation-bar · expo-status-bar · react-native-gesture-handler · react-native-worklets · @react-native-masked-view/masked-view · @shopify/flash-list

They are declared as optional peer dependencies (see peerDependenciesMeta in package.json) with the minimum versions that work.

Quick start

import { PlocksProvider, Button } from '@plocks/ui';

export function App() {
  return (
    <PlocksProvider>
      <Button title="Hello" />
    </PlocksProvider>
  );
}

Components

Every name below links to its documentation page, with live examples and a full prop table.

Layout

AppShell · Block · Surface · Flex · Grid · Masonry · Space · Row · Column · KeyboardAwareLayout · BottomAppBar

Typography

Text · Title · Highlight · GradientText · ShimmerText · Blockquote · Markdown · KeyCap

Text also ships semantic aliases: H1–H6, P, Small, Strong, Bold, Italic, Underline, Code, Kbd, Mark, Cite, Sub, Sup.

Forms & inputs

Button · BrandButton · Input · TextArea · NumberInput · PinInput · PhoneInput · Search · Select · AutoComplete · Checkbox · Radio · Switch · Toggle · SegmentedControl · Slider · Knob · Joystick · Rating · FileInput · ColorInput · ColorPicker · ColorSwatch · ControlField · Form

PasswordInput (from Input), RangeSlider (from Slider), and ToggleButton / ToggleGroup / ToggleBar (from Toggle) are exported alongside their base components.

Dates & time

Calendar · MiniCalendar · DatePicker · DatePickerInput · MonthPicker · MonthPickerInput · YearPicker · YearPickerInput · TimePicker · TimePickerInput

Navigation

Tabs · Menu · MenuItemButton · Breadcrumbs · Pagination · Stepper · Link · TableOfContents

Data display

DataTable · Table · DataList · ListGroup · Card · Avatar · Badge · Indicator · Chip · Timeline · Tree · RollingNumber · Accordion

Feedback

Alert · Toast · Progress · Ring · Skeleton · Loader · LoadingOverlay · Gauge · Notice

Overlays

Dialog · Tooltip · Popover · ContextMenu · Overlay · Spotlight · FloatingActions

Media

Icon · IconButton · BrandIcon · Image · Carousel · Lightbox · Video · AudioPlayer · Waveform

Utilities

Collapse · Divider · CodeBlock · CopyButton · QRCode · Spoiler

App store & marketplace badges

Ready-made buttons and badges for App Store, Google Play, Microsoft Store, Amazon, Spotify, Apple Music, YouTube, Discord, GitHub, and 20+ more — see BrandButton and BrandIcon.

Charts

24 chart types (line, bar, area, pie, donut, candlestick, sankey, heatmap, and more) ship in the companion @plocks/charts package — browse them at plocks.dev/charts.

Hooks

| Hook | Description | | --- | --- | | useClipboard | Copy text to clipboard | | useControllableState | Controlled / uncontrolled value state | | useDebouncedCallback | Debounced function wrapper with cancel / flush | | useDebouncedValue | Debounced copy of a changing value | | useDeviceInfo | Device and platform information | | useDisclosure | Boolean open / close / toggle state | | useEscapeKey | Escape key handler | | useGlobalHotkeys | Global keyboard shortcuts | | useHotkeys | Scoped keyboard shortcuts | | useHaptics | Haptic feedback control | | useHapticsSettings | Haptics configuration | | useHover | Cross-platform hover state and handlers | | useMaskedInput | Input masking | | useMediaQuery | Media queries on web, dimension queries on native | | useOverlayMode | Overlay UI state | | useScrollSpy | Scroll position tracking | | useSoundHaptics | Sound system's triggerHaptic wrapper | | useSpotlightToggle | Spotlight tutorial control | | useTitleRegistration | Register headings with the title registry | | useToggleColorScheme | Dark / light mode toggle |

Theming

Create custom themes or extend the defaults:

import { PlocksProvider, createTheme } from '@plocks/ui';

const theme = createTheme({
  colors: { primary: '#6366f1' },
});

export function App() {
  return (
    <PlocksProvider theme={theme}>
      {/* ... */}
    </PlocksProvider>
  );
}

A partial theme is merged onto the built-in theme of the current color scheme, so it keeps light/dark switching. For different overrides per scheme, pass a pair: <PlocksProvider theme={{ light: lightOverrides, dark: darkOverrides }}>.

Titles and group labels

Text that labels a group of items, like a sheet title above options or a menu section header, steps back from the items it labels, so it never reads as one more option. Two text roles control it:

| Role | Used by | Default | | --- | --- | --- | | panelTitle | Select / AutoComplete mobile sheet, DrawerNavigator, DataTable filter popover | secondary, sm, 600 | | sectionLabel | Menu.Label, AutoComplete and Spotlight groups, ControlField.Group, nested Tree headings | secondary, sm, 600, uppercase, 0.5 tracking |

Change a role for every component at once through textRoles, field by field. For example, to restore primary-colored md sheet titles and turn off the caps on section labels:

const theme = createTheme({
  textRoles: {
    panelTitle: { color: 'primary', fontSize: 'md' },
    sectionLabel: { uppercase: false },
  },
});

color takes a theme.text role, a palette token, or any CSS color. Use a role in your own UI with <Text textRole="sectionLabel">, or with resolveTextRole(theme, 'sectionLabel') for a raw React Native Text. To restyle a single instance, use the component's slot prop (groupLabelProps, titleProps, textProps).

No-flash color scheme for static / server rendering

Put the scheme variables and the color-scheme script in the document head, so a prerendered page is in the reader's scheme at first paint (before hydration):

import { BUILT_IN_DARK_THEME, DEFAULT_THEME, createThemeColorVariablesCss, getColorSchemeScript } from '@plocks/ui';

<head>
  <style dangerouslySetInnerHTML={{ __html: createThemeColorVariablesCss(DEFAULT_THEME, BUILT_IN_DARK_THEME) }} />
  <script dangerouslySetInnerHTML={{ __html: getColorSchemeScript() }} />
</head>

getColorSchemeScript() reads the mode PlocksProvider persists with themeModeConfig (localStorage plocks-theme-mode, falling back to prefers-color-scheme) and stamps <html data-plocks-color-scheme="light|dark"> plus the plocks-light|dark class for an explicit choice — the same marker the providers set after hydration. Pair it with colorsAsCssVariables on PlocksProvider.

Documentation

Full documentation, interactive examples, and component playground are available at plocks.dev.

• Getting started
• Component gallery
• Charts
• Hooks
• Accessibility
• Localization
• FAQ
• llms.txt — Full API reference for LLMs and AI assistants

Contributing

See the contributing guide for setup instructions.

License

MIT © Josh Stovall