{"id":45671163,"url":"https://github.com/codecollab-co/neopop-rn","last_synced_at":"2026-03-06T09:02:18.580Z","repository":{"id":340212191,"uuid":"1165059403","full_name":"codecollab-co/neopop-rn","owner":"codecollab-co","description":"NeoPop design system for React Native — unified iOS, Android, Web \u0026 Flutter features in one Expo-compatible TypeScript package","archived":false,"fork":false,"pushed_at":"2026-03-04T13:21:02.000Z","size":716,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-04T20:54:05.572Z","etag":null,"topics":["3d","animation","component-library","cred-neopop","dark-mode","design-system","expo","gesture-handler","haptics","neopop","react-native","reanimated","skia","typescript","ui-components"],"latest_commit_sha":null,"homepage":"https://github.com/codecollab-co/neopop-rn","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codecollab-co.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-23T19:29:22.000Z","updated_at":"2026-03-04T13:21:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/codecollab-co/neopop-rn","commit_stats":null,"previous_names":["codecollab-co/neopop-rn"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/codecollab-co/neopop-rn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecollab-co%2Fneopop-rn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecollab-co%2Fneopop-rn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecollab-co%2Fneopop-rn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecollab-co%2Fneopop-rn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codecollab-co","download_url":"https://codeload.github.com/codecollab-co/neopop-rn/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecollab-co%2Fneopop-rn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30164990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T04:43:31.446Z","status":"ssl_error","status_checked_at":"2026-03-06T04:40:30.133Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","animation","component-library","cred-neopop","dark-mode","design-system","expo","gesture-handler","haptics","neopop","react-native","reanimated","skia","typescript","ui-components"],"created_at":"2026-02-24T11:12:31.756Z","updated_at":"2026-03-06T09:02:18.571Z","avatar_url":"https://github.com/codecollab-co.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @codecollab.co/neopop-rn\n\n\u003e NeoPop design system for React Native — every feature from CRED's iOS, Android, Web, and Flutter libraries unified into one Expo-compatible TypeScript package.\n\n[![npm version](https://img.shields.io/npm/v/@codecollab.co/neopop-rn.svg)](https://www.npmjs.com/package/@codecollab.co/neopop-rn)\n[![license](https://img.shields.io/npm/l/@codecollab.co/neopop-rn.svg)](./LICENSE)\n[![CI](https://github.com/codecollab-co/neopop-rn/actions/workflows/ci.yml/badge.svg)](https://github.com/codecollab-co/neopop-rn/actions)\n[![docs](https://img.shields.io/badge/docs-live-EDD514?labelColor=0D0D0D)](https://codecollab-co.github.io/neopop-rn/)\n\n\u003e **v1.0 — stable API.** This release marks the first semver-guaranteed, production-ready version of neopop-rn. See the [Migration Guide](./docs/MIGRATION.md) if upgrading from v0.x.\n\n---\n\n## What is NeoPop?\n\nNeoPop 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.\n\n---\n\n## Features\n\n- **27 components** — buttons, form controls, navigation, feedback, display, and more\n- **3D surfaces** — five-face model via Skia Canvas, crisp at any pixel density\n- **Fluid animations** — Reanimated 3 on the UI thread, zero JS-thread jank\n- **Shimmer effects** — standalone wrapper or built into any button\n- **Full dark / light mode** — global provider + per-component override\n- **Complete token system** — exported color palettes, spacing, typography scale\n- **Web support** — same codebase works on iOS, Android, and web via Expo\n- **Haptics** — opt-in per component via `expo-haptics`\n- **Strict TypeScript** — every prop interface exported\n- **WCAG 2.1 AA** — full accessibilityRole, accessibilityState, accessibilityValue coverage\n\n---\n\n## Installation\n\n```bash\nnpm install @codecollab.co/neopop-rn\n```\n\n### Peer Dependencies\n\n```bash\nnpx expo install \\\n  react-native-reanimated \\\n  react-native-gesture-handler \\\n  @shopify/react-native-skia \\\n  expo-haptics\n```\n\n| Peer Dependency | Version | Required |\n|---|---|---|\n| `react-native-reanimated` | `\u003e=3.0.0` | Yes |\n| `react-native-gesture-handler` | `\u003e=2.0.0` | Yes |\n| `@shopify/react-native-skia` | `\u003e=1.0.0` | Yes |\n| `expo-haptics` | `\u003e=13.0.0` | Optional |\n\n### Babel Plugin (Required)\n\nAdd the Reanimated plugin to your `babel.config.js` — it must be last:\n\n```js\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: ['babel-preset-expo'],\n    plugins: [\n      'react-native-reanimated/plugin', // must be last\n    ],\n  };\n};\n```\n\n---\n\n## Setup\n\nWrap your app with `NeoPopProvider` and `GestureHandlerRootView`:\n\n```tsx\n// App.tsx\nimport React from 'react';\nimport { GestureHandlerRootView } from 'react-native-gesture-handler';\nimport { NeoPopProvider } from '@codecollab.co/neopop-rn';\n\nexport default function App() {\n  return (\n    \u003cGestureHandlerRootView style={{ flex: 1 }}\u003e\n      \u003cNeoPopProvider colorMode=\"dark\"\u003e\n        \u003cRootNavigator /\u003e\n      \u003c/NeoPopProvider\u003e\n    \u003c/GestureHandlerRootView\u003e\n  );\n}\n```\n\n---\n\n## Quick Start\n\n```tsx\nimport {\n  NeoPopButton, NeoPopTypography,\n  FontType, FontWeight,\n  ToastProvider, useToast,\n} from '@codecollab.co/neopop-rn';\n\n// 3D Button\n\u003cNeoPopButton\n  variant=\"elevated\"\n  size=\"big\"\n  fullWidth\n  colorConfig={{ color: '#ffffff' }}\n  onPress={() =\u003e console.log('pressed')}\n  enableHaptics\n\u003e\n  \u003cNeoPopTypography fontType={FontType.CAPS} fontWeight={FontWeight.BOLD} fontSize={14} color=\"#0d0d0d\"\u003e\n    PAY NOW\n  \u003c/NeoPopTypography\u003e\n\u003c/NeoPopButton\u003e\n\n// Toast\nconst { addToast } = useToast();\naddToast({ content: 'Payment successful!', type: 'success', autoCloseTime: 3000 });\n```\n\n---\n\n## Components\n\n### Buttons\n\n| Component | Description | Docs |\n|---|---|---|\n| `NeoPopButton` | 3D extruded button with shimmer, adjacency, press animation | [NeoPopButton.md](./docs/components/NeoPopButton.md) |\n| `NeoPopTiltedButton` | Skewed parallelogram button with optional floating animation | [NeoPopTiltedButton.md](./docs/components/NeoPopTiltedButton.md) |\n| `NeoPopFloatingButton` | Levitating button with imperative ref API | [NeoPopFloatingButton.md](./docs/components/NeoPopFloatingButton.md) |\n| `NeoPopCard` | Pressable 3D surface container | [NeoPopCard.md](./docs/components/NeoPopCard.md) |\n\n### Form Controls\n\n| Component | Description | Docs |\n|---|---|---|\n| `NeoPopCheckbox` | 3D checkbox with spring checkmark animation | [NeoPopCheckbox.md](./docs/components/NeoPopCheckbox.md) |\n| `NeoPopRadio` | Radio button with spring dot animation | [NeoPopRadio.md](./docs/components/NeoPopRadio.md) |\n| `NeoPopToggle` | Animated pill toggle with haptics | [NeoPopToggle.md](./docs/components/NeoPopToggle.md) |\n| `NeoPopInputField` | Animated border text input with label, error, char count | [NeoPopInputField.md](./docs/components/NeoPopInputField.md) |\n| `NeoPopDropdown` | Pressable dropdown trigger with chevron rotation | [NeoPopDropdown.md](./docs/components/NeoPopDropdown.md) |\n| `NeoPopSlider` | Pan-gesture slider with step snapping and haptics | [NeoPopSlider.md](./docs/components/NeoPopSlider.md) |\n| `NeoPopStepper` | Increment/decrement control with spring label animation | [NeoPopStepper.md](./docs/components/NeoPopStepper.md) |\n| `NeoPopOTPInput` | Multi-box OTP/PIN entry with auto-advance | [NeoPopOTPInput.md](./docs/components/NeoPopOTPInput.md) |\n| `NeoPopDatePicker` | Three-column FlatList scroll wheels (Day/Month/Year) | [NeoPopDatePicker.md](./docs/components/NeoPopDatePicker.md) |\n\n### Navigation \u0026 Layout\n\n| Component | Description | Docs |\n|---|---|---|\n| `NeoPopBottomSheet` | Gesture-driven bottom sheet with imperative ref API | [NeoPopBottomSheet.md](./docs/components/NeoPopBottomSheet.md) |\n| `NeoPopHeader` | Page header with back arrow, title, description | [NeoPopHeader.md](./docs/components/NeoPopHeader.md) |\n| `NeoPopBack` | Back navigation row with westward Chevron | [NeoPopBack.md](./docs/components/NeoPopBack.md) |\n| `Row` / `Column` / `PageContainer` | Flexbox layout helpers | [Row.md](./docs/components/Row.md) |\n\n### Feedback \u0026 Display\n\n| Component | Description | Docs |\n|---|---|---|\n| `NeoPopToast` | Spring-animated toast with swipe-to-dismiss | [NeoPopToast.md](./docs/components/NeoPopToast.md) |\n| `NeoPopTags` | Semantic pill/badge with type colors | [NeoPopTags.md](./docs/components/NeoPopTags.md) |\n| `NeoPopProgressBar` | Horizontal and circular Skia arc variants | [NeoPopProgressBar.md](./docs/components/NeoPopProgressBar.md) |\n| `NeoPopAccordion` | Spring expand/collapse with animated chevron | [NeoPopAccordion.md](./docs/components/NeoPopAccordion.md) |\n| `NeoPopCarousel` | Pan-gesture carousel with imperative ref API | [NeoPopCarousel.md](./docs/components/NeoPopCarousel.md) |\n| `NeoPopSwipeRow` | Swipeable list row with left/right action panels | [NeoPopSwipeRow.md](./docs/components/NeoPopSwipeRow.md) |\n\n### Primitives\n\n| Component | Description | Docs |\n|---|---|---|\n| `NeoPopShimmer` | Diagonal sweep shimmer wrapper | [NeoPopShimmer.md](./docs/components/NeoPopShimmer.md) |\n| `NeoPopTypography` | Full font system with FontType × FontWeight | [NeoPopTypography.md](./docs/components/NeoPopTypography.md) |\n| `Chevron` / `Cross` / `Pointer` | Skia-rendered icon primitives | [Chevron.md](./docs/components/Chevron.md) |\n\n---\n\n## Documentation\n\nFull documentation is available at **[codecollab-co.github.io/neopop-rn](https://codecollab-co.github.io/neopop-rn/)**.\n\n| Guide | Description |\n|---|---|\n| [Getting Started](https://codecollab-co.github.io/neopop-rn/docs/getting-started) | Installation, setup, quick examples |\n| [THEMING.md](./docs/THEMING.md) | NeoPopProvider, mergeDeep system, dark/light themes, colorConfig deep-dive |\n| [TOKENS.md](./docs/TOKENS.md) | All color, spacing, typography, opacity, and button tokens |\n| [CONTRIBUTING.md](./docs/CONTRIBUTING.md) | Dev setup, commit conventions, PR checklist, how to add a component |\n| [MIGRATION.md](./docs/MIGRATION.md) | v0.x → v1.0 migration guide, deprecated props, removed exports |\n\n### Design Token Exports\n\nTokens from `src/primitives/` are exported in four platform formats via [Style Dictionary](./token-build/):\n\n| Format | Output file |\n|---|---|\n| CSS custom properties | `tokens/css/variables.css` |\n| Figma Tokens JSON | `tokens/figma/tokens.json` |\n| Android resources | `tokens/android/colors.xml`, `tokens/android/dimens.xml` |\n| iOS Swift constants | `tokens/ios/NeoPopTokens.swift` |\n\nRegenerate with `npm run tokens` (requires `cd token-build \u0026\u0026 npm install` once).\n\n---\n\n## Theming\n\n```tsx\n\u003cNeoPopProvider\n  colorMode=\"dark\"\n  theme={{\n    button: {\n      color: '#06C270',\n      edgeColors: { bottom: '#04A05C', right: '#059E5A' },\n    },\n  }}\n\u003e\n  \u003cApp /\u003e\n\u003c/NeoPopProvider\u003e\n```\n\nSee [docs/THEMING.md](./docs/THEMING.md) for the full guide.\n\n---\n\n## Design Tokens\n\n```tsx\nimport {\n  POP_BLACK, POP_WHITE,\n  SEMANTIC_SUCCESS, SEMANTIC_ERROR,\n  SPACING_MD, SPACING_LG,\n  FontType, FontWeight,\n  DISABLED_OPACITY,\n} from '@codecollab.co/neopop-rn';\n```\n\nSee [docs/TOKENS.md](./docs/TOKENS.md) for the complete token reference.\n\n---\n\n## Platform Support\n\n| Platform | Support | Notes |\n|---|---|---|\n| iOS | ✅ Full | All 27 components |\n| Android | ✅ Full | All 27 components |\n| Web (Expo) | ✅ Full | Skia via WASM |\n\n---\n\n## Performance\n\nAll animated components run on the **UI thread** via Reanimated 3 worklets — zero JS bridge calls during animations, even at 60 FPS.\n\n| Metric | Value |\n|--------|-------|\n| Animated components | 18 / 27 use Reanimated worklets |\n| Skia canvas components | 8 (NeoPop3DSurface, TiltedButton, ScoreMeter, ProgressBar circular, Chevron, Cross, Pointer) |\n| JS thread work per frame | \u003c 1 ms |\n| Full library size (ESM, gzip) | \u003c 50 KB (peer deps excluded) |\n| `sideEffects` | `false` — fully tree-shakeable |\n\nSee [`perf/BENCHMARKS.md`](./perf/BENCHMARKS.md) for the full benchmark report.\n\n---\n\n## Contributing\n\nSee [docs/CONTRIBUTING.md](./docs/CONTRIBUTING.md) for the full contributor guide.\n\nQuick start:\n```bash\ngit clone https://github.com/codecollab-co/neopop-rn.git\ncd neopop-rn\nnpm install --legacy-peer-deps\nnpm run typecheck \u0026\u0026 npm run lint \u0026\u0026 npm test\n```\n\n---\n\n## License\n\n[Apache 2.0](./LICENSE)\n\n---\n\n## Acknowledgements\n\nBuilt on top of CRED's original NeoPop design system:\n- [neopop-ios](https://github.com/CRED-CLUB/neopop-ios)\n- [neopop-android](https://github.com/CRED-CLUB/neopop-android)\n- [neopop-web](https://github.com/CRED-CLUB/neopop-web)\n- [neopop-flutter](https://github.com/CRED-CLUB/neopop-flutter)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodecollab-co%2Fneopop-rn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodecollab-co%2Fneopop-rn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodecollab-co%2Fneopop-rn/lists"}