Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

React Native now has its own shadcn/ui equivalent — introducing 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜. If you love the flexibility of copying customisable components directly into your project (avoiding heavy, dependency-laden packages), NativeUI is designed for you. 𝗡𝗮𝘁𝗶𝘃𝗲𝗨𝗜 offers beautifully crafted, accessible components tailored for React Native, following the same copy-paste philosophy as... shadcn/ui. Built with 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 for fast, declarative, and flexible styling optimised for React Native. ➡️ 𝗖𝗼𝗽𝘆 𝗰𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗰𝗼𝗱𝗲 𝗱𝗶𝗿𝗲𝗰𝘁𝗹𝘆 𝗶𝗻𝘁𝗼 𝘆𝗼𝘂𝗿 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 — no black-box dependencies required. ➡️ 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗿𝗲 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝗯𝘆 𝗱𝗲𝗳𝗮𝘂𝗹𝘁, supporting screen readers and keyboard navigation, and designed to align with native iOS and Android UX patterns. ➡️ 𝗙𝘂𝗹𝗹 𝗰𝗼𝗻𝘁𝗿𝗼𝗹 𝗼𝘃𝗲𝗿 𝘆𝗼𝘂𝗿 𝗨𝗜 without rebuilding common elements like buttons, inputs, or sliders from scratch. ➡️ 𝗖𝗼𝗺𝗽𝗮𝘁𝗶𝗯𝗹𝗲 𝘄𝗶𝘁𝗵 𝗘𝘅𝗽𝗼 𝗮𝗻𝗱 𝘃𝗮𝗻𝗶𝗹𝗹𝗮 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗽𝗿𝗼𝗷𝗲𝗰𝘁𝘀, but not yet integrated with Tamagui’s styling system (future support may be planned). ➡️ 𝗦𝘂𝗽𝗽𝗼𝗿𝘁𝘀 𝘁𝗵𝗲𝗺𝗶𝗻𝗴 𝘃𝗶𝗮 𝗡𝗮𝘁𝗶𝘃𝗲𝗪𝗶𝗻𝗱 — though you’ll need to wire it up manually using Tailwind variables, context providers, and config files. Note: The term “install” in the documentation refers to using the shadcn CLI (e.g., npx shadcn@latest add component) to fetch and copy component code into your project, not adding a package to your dependencies. NativeUI isn’t a plug-and-play library; it’s a lightweight toolbox that empowers you to shape your UI with precision and control. 𝗪𝗵𝗮𝘁’𝘀 𝘆𝗼𝘂𝗿 𝗽𝗿𝗲𝗳𝗲𝗿𝗲𝗻𝗰𝗲: npm install a pre-built UI kit for speed, or copy/paste NativeUI components for ultimate customisation? #ReactNative #KeyboardUX #MobileDev #OpenSource #JSDev #Performance #iOSDev #KeyboardExtensions #ReactNativeKeyboard #UIUX #shadcn #nativeuishow more

The React Native Rewind

2,414 subscribers

118,157 views • 10 months ago •via X (Twitter)

Arts Education Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Here is an awesome shadcn alternative Coss UI (previously Origin UI) by coss.com. beautiful, slick, accessible React components, built on Base UI, and maintained by top frontend engineers like Colm Tuite Still, if you want to stick with Radix UI, nothing really matches what shadcn offers

Here is an awesome shadcn alternative Coss UI (previously Origin UI) by coss.com. beautiful, slick, accessible React components, built on Base UI, and maintained by top frontend engineers like Colm Tuite Still, if you want to stick with Radix UI, nothing really matches what shadcn offers

Ali Bey

18,613 views • 7 months ago

Introducing Kibo UI Blocks — a new series of shadcn inspired blocks for building interfaces with Kibo components! Copy and paste into your app. As always, open source and free forever. Here's a list of blocks we're launching with 👇🧵

Introducing Kibo UI Blocks — a new series of shadcn inspired blocks for building interfaces with Kibo components! Copy and paste into your app. As always, open source and free forever. Here's a list of blocks we're launching with 👇🧵

Hayden Bleasel

90,765 views • 1 year ago

Introducing Prefab 🎨 A generative UI framework for building MCP Apps, data dashboards, or whatever you (or your agent) want. In Python. (Really.) 100+ shadcn components. Real React. No JavaScript required. And built right into FastMCP 3.2.

Introducing Prefab 🎨 A generative UI framework for building MCP Apps, data dashboards, or whatever you (or your agent) want. In Python. (Really.) 100+ shadcn components. Real React. No JavaScript required. And built right into FastMCP 3.2.

Jeremiah Lowin

10,273 views • 1 month ago

Made a file-uploader component with shadcn ui, react-dropzone, and Theo uploadthing.

Made a file-uploader component with shadcn ui, react-dropzone, and Theo uploadthing.

sadman

85,446 views • 2 years ago

Slide to Submit + Shimmering Text for Expo Now on GitHub ➤ Copy-paste component, not a library ➤ Built with Software Mansion Reanimated + RNGH ➤ Runs on UI thread (60fps smooth) ➤ Uses react-native-masked-view

Slide to Submit + Shimmering Text for Expo Now on GitHub ➤ Copy-paste component, not a library ➤ Built with Software Mansion Reanimated + RNGH ➤ Runs on UI thread (60fps smooth) ➤ Uses react-native-masked-view

Solarin

32,485 views • 1 year ago

This week, we're going to rethink how copy and paste works for Tailwind templates. One click of a button and you'll be able to "lift" components from a template. Copy & paste or Edit in v0. Shipping soon.

This week, we're going to rethink how copy and paste works for Tailwind templates. One click of a button and you'll be able to "lift" components from a template. Copy & paste or Edit in v0. Shipping soon.

shadcn

171,095 views • 2 years ago

Super excited to announce react-native-godot: A seamless integration of the Godot Engine with React Native for iOS and Android! Now you can create games with native UI components, giving them a polished, platform-native feel. Plus, you'll have full access to the engine and all GDScript functions directly within React Native, fully typed for an enhanced development experience. Since it's a standalone library, simply import a .pck file, and you're good to go. Open-sourcing in the coming weeks!

Super excited to announce react-native-godot: A seamless integration of the Godot Engine with React Native for iOS and Android! Now you can create games with native UI components, giving them a polished, platform-native feel. Plus, you'll have full access to the engine and all GDScript functions directly within React Native, fully typed for an enhanced development experience. Since it's a standalone library, simply import a .pck file, and you're good to go. Open-sourcing in the coming weeks!

Jannis Ringwald

58,957 views • 1 year ago

✨ Introducing Mobile A beautiful landing page template for your mobile app Built using Next.js, Tailwind CSS, shadcn and Magic UI

✨ Introducing Mobile A beautiful landing page template for your mobile app Built using Next.js, Tailwind CSS, shadcn and Magic UI

Dillion

74,079 views • 1 year ago

If you’ve ever managed custom icons in React Native, you know the frustration of choosing between performance and developer experience. Libraries like 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝘀𝘃𝗴 are flexible but heavy. Every icon creates its own React subtree. The alternative? Manual icon fonts that force you into a constant back-and-forth of using web tools like IcoMoon and syncing font assets every time a design changes. 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 𝗟𝗮𝗯𝘀 just released 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗮𝗻𝗼-𝗶𝗰𝗼𝗻𝘀 to solve exactly this. It’s a build-time icon font generator that gives you the performance of native fonts with the flexibility of simple SVG files. 𝗪𝗵𝗮𝘁’𝘀 𝗵𝗮𝗽𝗽𝗲𝗻𝗶𝗻𝗴? Instead of rendering complex vector paths at runtime, this library automatically converts your folder of SVGs into an optimized icon font during the build process. It essentially teaches your app to treat icons like standard text characters, which allows it to bypass React’s component tree and layout engine entirely. ➡️ 𝗕𝘂𝗶𝗹𝗱-𝘁𝗶𝗺𝗲 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗼𝗻: It handles the entire pipeline—watching your icon folder, converting SVGs to .ttf files, and linking them to your native project automatically. ➡️ 𝗡𝗮𝘁𝗶𝘃𝗲 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲: Because icons render as native text glyphs, it is significantly faster than traditional SVG rendering, making it the ideal choice for long, scrollable lists or icon-heavy dashboards. ➡️ 𝗘𝘅𝗽𝗼 𝗖𝗼𝗻𝗳𝗶𝗴 𝗣𝗹𝘂𝗴𝗶𝗻: It features first-class support for Expo, automating the native plumbing like Info.plist updates and asset linking during the prebuild phase. ➡️ 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗰 𝗧𝘆𝗽𝗲 𝗦𝗮𝗳𝗲𝘁𝘆: The library generates TypeScript definitions for your icon set, providing full IDE autocomplete and ensuring you never break the UI with a misspelled icon name. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? In high-performance applications, small overheads add up. By shifting the heavy lifting from the mobile device to your build machine, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗮𝗻𝗼-𝗶𝗰𝗼𝗻𝘀 ensures your UI stays buttery smooth while keeping your developer workflow modern. It’s another great example of how 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 continues to solve the "last mile" of performance friction in the ecosystem. Before you migrate your entire library, keep in mind: this is designed for the 𝗡𝗲𝘄 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 (Fabric) and requires React Native 0.74 or higher. #ReactNative #Expo #SoftwareMansion #Icons #MobileDev #Performance #DeveloperExperience #OpenSource #JavaScript #TypeScript #SVG #Fabric

If you’ve ever managed custom icons in React Native, you know the frustration of choosing between performance and developer experience. Libraries like 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝘀𝘃𝗴 are flexible but heavy. Every icon creates its own React subtree. The alternative? Manual icon fonts that force you into a constant back-and-forth of using web tools like IcoMoon and syncing font assets every time a design changes. 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 𝗟𝗮𝗯𝘀 just released 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗮𝗻𝗼-𝗶𝗰𝗼𝗻𝘀 to solve exactly this. It’s a build-time icon font generator that gives you the performance of native fonts with the flexibility of simple SVG files. 𝗪𝗵𝗮𝘁’𝘀 𝗵𝗮𝗽𝗽𝗲𝗻𝗶𝗻𝗴? Instead of rendering complex vector paths at runtime, this library automatically converts your folder of SVGs into an optimized icon font during the build process. It essentially teaches your app to treat icons like standard text characters, which allows it to bypass React’s component tree and layout engine entirely. ➡️ 𝗕𝘂𝗶𝗹𝗱-𝘁𝗶𝗺𝗲 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗼𝗻: It handles the entire pipeline—watching your icon folder, converting SVGs to .ttf files, and linking them to your native project automatically. ➡️ 𝗡𝗮𝘁𝗶𝘃𝗲 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲: Because icons render as native text glyphs, it is significantly faster than traditional SVG rendering, making it the ideal choice for long, scrollable lists or icon-heavy dashboards. ➡️ 𝗘𝘅𝗽𝗼 𝗖𝗼𝗻𝗳𝗶𝗴 𝗣𝗹𝘂𝗴𝗶𝗻: It features first-class support for Expo, automating the native plumbing like Info.plist updates and asset linking during the prebuild phase. ➡️ 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗰 𝗧𝘆𝗽𝗲 𝗦𝗮𝗳𝗲𝘁𝘆: The library generates TypeScript definitions for your icon set, providing full IDE autocomplete and ensuring you never break the UI with a misspelled icon name. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? In high-performance applications, small overheads add up. By shifting the heavy lifting from the mobile device to your build machine, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗮𝗻𝗼-𝗶𝗰𝗼𝗻𝘀 ensures your UI stays buttery smooth while keeping your developer workflow modern. It’s another great example of how 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 continues to solve the "last mile" of performance friction in the ecosystem. Before you migrate your entire library, keep in mind: this is designed for the 𝗡𝗲𝘄 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 (Fabric) and requires React Native 0.74 or higher. #ReactNative #Expo #SoftwareMansion #Icons #MobileDev #Performance #DeveloperExperience #OpenSource #JavaScript #TypeScript #SVG #Fabric

The React Native Rewind

24,855 views • 29 days ago

finally shadcn combobox with creatable support built with Base UI I have been waiting for this for too long npx shadcn add @flowkit-ui/creatable-combobox

finally shadcn combobox with creatable support built with Base UI I have been waiting for this for too long npx shadcn add @flowkit-ui/creatable-combobox

Ali Bey

25,771 views • 2 months ago

The 𝚎𝚡𝚙𝚘-𝚠𝚒𝚍𝚐𝚎𝚝𝚜 alpha is here! Now you can build iOS home screen widgets and Live Activities as React components. No separate Xcode target. No manual App Groups. No SwiftUI layout code. Write your widget in @expo/ui, and Continuous Native Generation handles the rest. ◆ Interactive buttons and toggles on the home screen ◆ Live Activities for the Lock Screen and Dynamic Island ◆ One React component, native rendering under the hood Details and code to get started in the blog below ↓

The 𝚎𝚡𝚙𝚘-𝚠𝚒𝚍𝚐𝚎𝚝𝚜 alpha is here! Now you can build iOS home screen widgets and Live Activities as React components. No separate Xcode target. No manual App Groups. No SwiftUI layout code. Write your widget in @expo/ui, and Continuous Native Generation handles the rest. ◆ Interactive buttons and toggles on the home screen ◆ Live Activities for the Lock Screen and Dynamic Island ◆ One React component, native rendering under the hood Details and code to get started in the blog below ↓

Expo

108,543 views • 3 months ago

Introducing Spell UI Highly refined UI components. Copy, paste, and ship. Crafted for modern interfaces. Link ↓

Introducing Spell UI Highly refined UI components. Copy, paste, and ship. Crafted for modern interfaces. Link ↓

tom

156,058 views • 3 months ago

Introducing prompt-kit A set of high-quality, customizable components for building AI interfaces. Built on top of shadcn/ui, starting with PromptInput, a flexible input field for chatting with AI models. New components coming soon!

Introducing prompt-kit A set of high-quality, customizable components for building AI interfaces. Built on top of shadcn/ui, starting with PromptInput, a flexible input field for chatting with AI models. New components coming soon!

Ibelick

104,121 views • 1 year ago

We've added 4 new animated Base UI components to Animate UI: 🔹 Progress 🔹 Accordion 🔹 Toggle Group 🔹 Preview Card Fully animated with Motion and built with shadcn styling. Check it out 👇

We've added 4 new animated Base UI components to Animate UI: 🔹 Progress 🔹 Accordion 🔹 Toggle Group 🔹 Preview Card Fully animated with Motion and built with shadcn styling. Check it out 👇

Animate UI

28,403 views • 1 year ago

Generative UI agents can now render real shadcn/ui components. shadcn /ui support is now live in OpenUI.

Generative UI agents can now render real shadcn/ui components. shadcn /ui support is now live in OpenUI.

Rabi Shanker Guha

55,119 views • 2 months ago

Working on a new Command Menu to surface more context where you need it: - Colors in all formats. Enter to copy oklch or cmd+c for other format - Shortcut to copy cli command for components - Remembers your color format & package manager Small UX wins. Huge impact for docs.

Working on a new Command Menu to surface more context where you need it: - Colors in all formats. Enter to copy oklch or cmd+c for other format - Shortcut to copy cli command for components - Remembers your color format & package manager Small UX wins. Huge impact for docs.

shadcn

53,924 views • 1 year ago

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.

Dillion

324,567 views • 2 years ago

Introducing Themes. Hand-picked colors that you can copy and paste into your apps. This builds on top of the Styles API. Pick a style with some sane defaults, add your colors and make it yours.

Introducing Themes. Hand-picked colors that you can copy and paste into your apps. This builds on top of the Styles API. Pick a style with some sane defaults, add your colors and make it yours.

shadcn

182,635 views • 2 years ago

We just shipped vision for v0 — generate React, Tailwind, and Shadcn UI from an image! If you’re still waitlisted, reply here with a use case for v0 vision.

We just shipped vision for v0 — generate React, Tailwind, and Shadcn UI from an image! If you’re still waitlisted, reply here with a use case for v0 vision.

Max Leiter

130,692 views • 2 years ago

Supabase now provides shadcn-based UI libraries to add features like sign-in/up, file uploads, real-time cursor sharing, and many more! You can also bulk-pull the Supabase Cursor rules so that you don't have to manually copy and paste them!

Supabase now provides shadcn-based UI libraries to add features like sign-in/up, file uploads, real-time cursor sharing, and many more! You can also bulk-pull the Supabase Cursor rules so that you don't have to manually copy and paste them!

Tyler Shukert

48,164 views • 1 year ago