@codecollab.co/neopop-rn

NeoPop design system for React Native — every feature from CRED's iOS, Android, Web, and Flutter libraries unified into one Expo-compatible TypeScript package.

v1.0 — stable API. This release marks the first semver-guaranteed, production-ready version of neopop-rn. See the Migration Guide if upgrading from v0.x.

What is NeoPop?

NeoPop is CRED's "next generation of beautiful, affirmative design" — a 3D visual language built around multi-surface rendering, depth effects, shimmer animations, and tactile interactions. This library brings the complete NeoPop system to React Native and Expo, covering every component from all four original CRED repos.

Features

• 27 components — buttons, form controls, navigation, feedback, display, and more
• 3D surfaces — five-face model via Skia Canvas, crisp at any pixel density
• Fluid animations — Reanimated 3 on the UI thread, zero JS-thread jank
• Shimmer effects — standalone wrapper or built into any button
• Full dark / light mode — global provider + per-component override
• Complete token system — exported color palettes, spacing, typography scale
• Web support — same codebase works on iOS, Android, and web via Expo
• Haptics — opt-in per component via expo-haptics
• Strict TypeScript — every prop interface exported
• WCAG 2.1 AA — full accessibilityRole, accessibilityState, accessibilityValue coverage

Installation

npm install @codecollab.co/neopop-rn

Peer Dependencies

npx expo install \
  react-native-reanimated \
  react-native-gesture-handler \
  @shopify/react-native-skia \
  expo-haptics

| Peer Dependency | Version | Required | |---|---|---| | react-native-reanimated | >=3.0.0 | Yes | | react-native-gesture-handler | >=2.0.0 | Yes | | @shopify/react-native-skia | >=1.0.0 | Yes | | expo-haptics | >=13.0.0 | Optional |

Babel Plugin (Required)

Add the Reanimated plugin to your babel.config.js — it must be last:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin', // must be last
    ],
  };
};

Setup

Wrap your app with NeoPopProvider and GestureHandlerRootView:

// App.tsx
import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { NeoPopProvider } from '@codecollab.co/neopop-rn';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NeoPopProvider colorMode="dark">
        <RootNavigator />
      </NeoPopProvider>
    </GestureHandlerRootView>
  );
}

Quick Start

import {
  NeoPopButton, NeoPopTypography,
  FontType, FontWeight,
  ToastProvider, useToast,
} from '@codecollab.co/neopop-rn';

// 3D Button
<NeoPopButton
  variant="elevated"
  size="big"
  fullWidth
  colorConfig={{ color: '#ffffff' }}
  onPress={() => console.log('pressed')}
  enableHaptics
>
  <NeoPopTypography fontType={FontType.CAPS} fontWeight={FontWeight.BOLD} fontSize={14} color="#0d0d0d">
    PAY NOW
  </NeoPopTypography>
</NeoPopButton>

// Toast
const { addToast } = useToast();
addToast({ content: 'Payment successful!', type: 'success', autoCloseTime: 3000 });

Components

Buttons

| Component | Description | Docs | |---|---|---| | NeoPopButton | 3D extruded button with shimmer, adjacency, press animation | NeoPopButton.md | | NeoPopTiltedButton | Skewed parallelogram button with optional floating animation | NeoPopTiltedButton.md | | NeoPopFloatingButton | Levitating button with imperative ref API | NeoPopFloatingButton.md | | NeoPopCard | Pressable 3D surface container | NeoPopCard.md |

Form Controls

| Component | Description | Docs | |---|---|---| | NeoPopCheckbox | 3D checkbox with spring checkmark animation | NeoPopCheckbox.md | | NeoPopRadio | Radio button with spring dot animation | NeoPopRadio.md | | NeoPopToggle | Animated pill toggle with haptics | NeoPopToggle.md | | NeoPopInputField | Animated border text input with label, error, char count | NeoPopInputField.md | | NeoPopDropdown | Pressable dropdown trigger with chevron rotation | NeoPopDropdown.md | | NeoPopSlider | Pan-gesture slider with step snapping and haptics | NeoPopSlider.md | | NeoPopStepper | Increment/decrement control with spring label animation | NeoPopStepper.md | | NeoPopOTPInput | Multi-box OTP/PIN entry with auto-advance | NeoPopOTPInput.md | | NeoPopDatePicker | Three-column FlatList scroll wheels (Day/Month/Year) | NeoPopDatePicker.md |

Navigation & Layout

| Component | Description | Docs | |---|---|---| | NeoPopBottomSheet | Gesture-driven bottom sheet with imperative ref API | NeoPopBottomSheet.md | | NeoPopHeader | Page header with back arrow, title, description | NeoPopHeader.md | | NeoPopBack | Back navigation row with westward Chevron | NeoPopBack.md | | Row / Column / PageContainer | Flexbox layout helpers | Row.md |

Feedback & Display

| Component | Description | Docs | |---|---|---| | NeoPopToast | Spring-animated toast with swipe-to-dismiss | NeoPopToast.md | | NeoPopTags | Semantic pill/badge with type colors | NeoPopTags.md | | NeoPopProgressBar | Horizontal and circular Skia arc variants | NeoPopProgressBar.md | | NeoPopAccordion | Spring expand/collapse with animated chevron | NeoPopAccordion.md | | NeoPopCarousel | Pan-gesture carousel with imperative ref API | NeoPopCarousel.md | | NeoPopSwipeRow | Swipeable list row with left/right action panels | NeoPopSwipeRow.md |

Primitives

| Component | Description | Docs | |---|---|---| | NeoPopShimmer | Diagonal sweep shimmer wrapper | NeoPopShimmer.md | | NeoPopTypography | Full font system with FontType × FontWeight | NeoPopTypography.md | | Chevron / Cross / Pointer | Skia-rendered icon primitives | Chevron.md |

Documentation

Full documentation is available at codecollab-co.github.io/neopop-rn.

| Guide | Description | |---|---| | Getting Started | Installation, setup, quick examples | | THEMING.md | NeoPopProvider, mergeDeep system, dark/light themes, colorConfig deep-dive | | TOKENS.md | All color, spacing, typography, opacity, and button tokens | | CONTRIBUTING.md | Dev setup, commit conventions, PR checklist, how to add a component | | MIGRATION.md | v0.x → v1.0 migration guide, deprecated props, removed exports |

Design Token Exports

Tokens from src/primitives/ are exported in four platform formats via Style Dictionary:

| Format | Output file | |---|---| | CSS custom properties | tokens/css/variables.css | | Figma Tokens JSON | tokens/figma/tokens.json | | Android resources | tokens/android/colors.xml, tokens/android/dimens.xml | | iOS Swift constants | tokens/ios/NeoPopTokens.swift |

Regenerate with npm run tokens (requires cd token-build && npm install once).

Theming

<NeoPopProvider
  colorMode="dark"
  theme={{
    button: {
      color: '#06C270',
      edgeColors: { bottom: '#04A05C', right: '#059E5A' },
    },
  }}
>
  <App />
</NeoPopProvider>

See docs/THEMING.md for the full guide.

Design Tokens

import {
  POP_BLACK, POP_WHITE,
  SEMANTIC_SUCCESS, SEMANTIC_ERROR,
  SPACING_MD, SPACING_LG,
  FontType, FontWeight,
  DISABLED_OPACITY,
} from '@codecollab.co/neopop-rn';

See docs/TOKENS.md for the complete token reference.

Platform Support

| Platform | Support | Notes | |---|---|---| | iOS | ✅ Full | All 27 components | | Android | ✅ Full | All 27 components | | Web (Expo) | ✅ Full | Skia via WASM |

Performance

All animated components run on the UI thread via Reanimated 3 worklets — zero JS bridge calls during animations, even at 60 FPS.

| Metric | Value | |--------|-------| | Animated components | 18 / 27 use Reanimated worklets | | Skia canvas components | 8 (NeoPop3DSurface, TiltedButton, ScoreMeter, ProgressBar circular, Chevron, Cross, Pointer) | | JS thread work per frame | < 1 ms | | Full library size (ESM, gzip) | < 50 KB (peer deps excluded) | | sideEffects | false — fully tree-shakeable |

See perf/BENCHMARKS.md for the full benchmark report.

Contributing

See docs/CONTRIBUTING.md for the full contributor guide.

Quick start:

git clone https://github.com/codecollab-co/neopop-rn.git
cd neopop-rn
npm install --legacy-peer-deps
npm run typecheck && npm run lint && npm test

License

Apache 2.0

Acknowledgements

Built on top of CRED's original NeoPop design system:

• neopop-ios
• neopop-android
• neopop-web
• neopop-flutter