This product was not featured by Product Hunt yet. It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).
cp-design-system is an open-source UI kit for React and React Native. Write a screen once and it renders natively on the web, iOS, Android and Expo with the same API. 41 accessible components, from buttons and forms to toasts, modals, bottom sheets and carousels, built on Atlassian’s design tokens. Pass one brand color to re-theme everything in light and dark mode. Smooth springs and gestures run on the UI thread, and respect reduced motion. TypeScript, MIT, free on npm.
Hey Product Hunt 👋
I’m Roshan, and I built cp-design-system.
The problem: if your product has a web app and a mobile app, you usually build the UI twice. Two component libraries drift apart, the buttons stop matching, and every theme change happens in two places.
What it does: you write a screen once with one set of components, and it renders natively everywhere:
🌐 Web: real DOM elements, animated with Motion
📱 iOS and Android (including Expo): native views, with animations and gestures on the UI thread (Reanimated)
What’s inside (v0.6):
41 components: buttons, forms, toasts with swipe to dismiss, modals, bottom sheets, dropdowns, tooltips, tabs, carousel, avatars and more
Brand theming from one color: createTheme({ brand: '#E5484D' }) re-themes every component in light and dark mode, and keeps text and icons WCAG-compliant
Built on Atlassian’s design tokens, so spacing, type and color are consistent from the start
Motion that respects “reduce motion”
Accessible: proper roles, keyboard support and focus management on web, screen-reader labels on native
TypeScript, MIT, and no react-native-web needed
Try it:
yarn add cp-design-system
Live demos: https://roshanpatil2000.github.i...
GitHub: https://github.com/roshanpatil20...
It’s free and open source, and I’m actively building it. I’d love your feedback: which component should come next, and what would stop you from using it in production? A GitHub ⭐ also really helps if you find it useful.
Thanks for checking it out! 🙏
No comment highlights available yet. Please check back later!
About cp-design-system on Product Hunt
“Animated UI components for React and React Native”
cp-design-system was submitted on Product Hunt and earned 2 upvotes and 1 comments, placing #157 on the daily leaderboard. cp-design-system is an open-source UI kit for React and React Native. Write a screen once and it renders natively on the web, iOS, Android and Expo with the same API. 41 accessible components, from buttons and forms to toasts, modals, bottom sheets and carousels, built on Atlassian’s design tokens. Pass one brand color to re-theme everything in light and dark mode. Smooth springs and gestures run on the UI thread, and respect reduced motion. TypeScript, MIT, free on npm.
cp-design-system was featured in Android (57.7k followers), iOS (111k followers), Web App (124.3k followers) and GitHub (41.4k followers) on Product Hunt. Together, these topics include over 161.5k products, making this a competitive space to launch in.
Who hunted cp-design-system?
cp-design-system was hunted by Roshan Patil. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how cp-design-system stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Roshan Patil