Install Explore

Mobile UI Toolkit

Build premium mobile UI with React Native + Flutter

Complete redesign with cleaner spacing, stronger readability, and a richer set of reusable components and motion patterns for both ecosystems.

Browse Components Explore Animations

Phone-first spacingAccessible contrastCross-platform snippets

12+

Components

12+

Animations

RN + Flutter

Dual API

60fps ready

Performance

Preview

Mobile Dashboard

Live

Weekly active users

184,320

+12.3%

Crash free

99.94%

Frame time

16.2ms

Explore

Everything you need in one workflow

Build layouts, apply motion, and ship with platform-specific snippets from the same source of truth.

Components

Production-ready UI building blocks for dashboards, forms, chat, and navigation.

Animations

Touch-friendly transitions, list staggering, counters, and gesture-driven effects.

Documentation

Install commands, props tables, and direct source snippets for each item.

Cross platform

React Native and Flutter stay aligned

Every showcased element includes equivalent snippets and usage patterns for both frameworks.

React Native

Reusable native UI patterns

Expo compatible

Reanimated examples

Type-safe props

import SegmentedControl from './native-bits/segmented-control';

<SegmentedControl
  options={['Today', 'Week', 'Month']}
  value={range}
  onChange={setRange}
/>

Flutter

Equivalent widgets and motion

Material and Cupertino

Null-safe Dart API

Matching behavior presets

import 'package:native_bits/native_bits.dart';

SegmentedControl(
  options: const ['Today', 'Week', 'Month'],
  value: range,
  onChanged: setRange,
)

Components

Production-ready mobile components

Expanded set of reusable blocks with matching React Native and Flutter snippets.

Animated Button

Actions

Primary CTA button with spring press feedback and gradient fill.

CTASpringAccessible

Glass Card

Surfaces

Frosted surface card for profile and payment summaries.

BlurCardDashboard

Input Field

Forms

Floating label field with validation and icon support.

FormsLabelValidation

Toggle Switch

Controls

Animated state toggle for settings and preferences screens.

SettingsStateCompact

Notification Toast

Feedback

Top or bottom swipeable toast with success and error states.

ToastStatusDismiss

Floating Action Button

Actions

Contextual floating action with drag resistance and bounce.

FABNavigationFloating

Why this rebuild

A complete UI foundation for mobile products

This rebuild focuses on practical quality: cleaner structure, stronger readability, and faster implementation paths.

Reusable architecture

Compose screens quickly with cards, toggles, inputs, and list primitives.

Smooth interactions

Motion defaults are tuned for touch devices and low-jank transitions.

Gesture-aware

Swipe, drag, and dismiss patterns are included and production-safe.

High readability

Visual hierarchy and spacing prioritize clarity on small screens.

Performance targets

Examples are designed to hold 60fps on modern mobile hardware.

Shipping guardrails

Patterns include defaults for status states and accessibility basics.

Motion

Animation presets for real products

Includes entrance, interactive, and gesture-driven effects mapped to both mobile frameworks.

Fade In Up

Entrance

Gentle entrance motion for text blocks and cards.

OnboardingCardsHero

Scale Pop

Entrance

Elastic scale-in effect ideal for badges and icons.

BadgesIconsRewards

Rotate In

Entrance

Spin-in motion for action icons and playful alerts.

IconsAlertsPlayful

Slide In Right

Entrance

Horizontal reveal for drawers and panel content.

DrawerPanelsNavigation

Bounce

Loop

Looping bounce for callouts, pointers, and hints.

HintsPointersLoop

Flip

Transition

3D flip transition for cards, deals, and coupons.

Cards3DOffer

Ship faster

Build once, deliver for both mobile stacks

Use the rebuilt UI system, copy snippets, and ship consistent product experiences on React Native and Flutter.

Open docs Try sandbox