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

Features

• 95+ components — Inputs, dates, navigation, data display, overlays, media, 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 & sound — Optional feedback via expo-haptics and expo-audio
• i18n ready — Built-in internationalization with I18nProvider
• Tree-shakeable — ESM and CJS builds with no side effects

Installation

npm install @platform-blocks/ui @tabler/icons-react-native

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 @tabler/icons-react-native

Peer dependencies

All of these are required. @tabler/icons-react-native backs the Icon registry, which is imported from the package root — without it, Icon (and every component that renders one) fails to resolve.

| Package | Version | | --- | --- | | react | >=18.0.0 <20.0.0 | | react-native | >=0.73.0 | | react-native-reanimated | >=3.4.0 | | react-native-safe-area-context | >=4.5.0 | | react-native-svg | >=13.0.0 | | @tabler/icons-react-native | >=3.0.0 |

Optional integrations

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

expo-audio · expo-document-picker · expo-haptics · expo-linear-gradient · expo-status-bar · react-native-worklets · react-syntax-highlighter · @react-native-masked-view/masked-view · @shopify/flash-list · react-native-reanimated-carousel

Quick start

import { PlatformBlocksProvider, Button } from '@platform-blocks/ui';

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

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 · Gallery · 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

25 chart types (line, bar, area, pie, donut, candlestick, sankey, heatmap, and more) ship in the companion @platform-blocks/charts package — browse them at platform-blocks.com/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 { PlatformBlocksProvider, createTheme } from '@platform-blocks/ui';

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

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

Documentation

Full documentation, interactive examples, and component playground are available at platform-blocks.com.

• 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