--- title: "#shadcn-ui articles | Hashnode" description: "Explore 103 articles tagged #shadcn-ui on Hashnode. Tutorials, guides, and how-tos from the community." url: "https://hashnode.com/tag/shadcn-ui" --- Tag # #shadcn-ui 103 posts · 24 followers [Ajay Patel](https://hashnode.com/@ajaypatel9016) · [5d ago](https://hashnode.com/posts/how-to-use-shadcn-ui-in-react-native-applications-full-handbook/6aecb9efa7a2ab6fb8e3fe94) ### [How to Use shadcn/ui in React Native Applications \[Full Handbook\]](https://freecodecamp.org/news/how-to-use-shadcn-ui-in-react-native-applications-full-handbook?utm_source=hashnode&utm_medium=feed) If you've built a couple of React Native apps, the following probably feels familiar. You start with a colors.ts file and a simple Button component. Everything looks fine at first. Then the design cha 54 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-use-shadcn-ui-in-react-native-applications-full-handbook?utm_source=hashnode&utm_medium=feed) [Oussama Chahidi](https://hashnode.com/@Exo2Dev) · [Sep 26](https://hashnode.com/posts/the-component-registry-model/6ab80a2bee8a3b8301a8c1b9) ### [The Component Registry Model](https://wevdevblog.hashnode.dev/the-component-registry-model?utm_source=hashnode&utm_medium=feed) How component registries differ from npm copying source instead of installing packages. 6 min read · [wevdevblog.hashnode.dev](https://wevdevblog.hashnode.dev/the-component-registry-model?utm_source=hashnode&utm_medium=feed) [Vaibhav Gupta](https://hashnode.com/@vaibhavg) · [Sep 11](https://hashnode.com/posts/how-to-build-an-ai-chat-app-interface-with-the-ai-sdk/6aa42a894ba1a9c008082580) ### [How to Build an AI Chat App Interface With the Vercel AI SDK and Shadcn/ui](https://freecodecamp.org/news/how-to-build-an-ai-chat-app-interface-with-the-ai-sdk?utm_source=hashnode&utm_medium=feed) Every other AI product you open today has the same screen: a message list, a text box at the bottom, and words that stream in one token at a time. It looks simple, but it's not simple to build well. Y 16 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-build-an-ai-chat-app-interface-with-the-ai-sdk?utm_source=hashnode&utm_medium=feed) [Vaibhav Gupta](https://hashnode.com/@vaibhavg) · [Jul 22](https://hashnode.com/posts/build-a-reusable-date-time-picker-in-react-with-shadcn-ui/6a60f42cb1ecbbb606535a7b) ### [How to Build a Reusable Date-Time Picker in React with shadcn/ui](https://freecodecamp.org/news/build-a-reusable-date-time-picker-in-react-with-shadcn-ui?utm_source=hashnode&utm_medium=feed) A date and time picker is one of those components that looks small in a design file and turns into a real time sink once you start building it. You need a calendar, a time selector, a state that keeps 11 min read · [freecodecamp.org](https://freecodecamp.org/news/build-a-reusable-date-time-picker-in-react-with-shadcn-ui?utm_source=hashnode&utm_medium=feed) [ShadcnSpace](https://hashnode.com/@shadcn) · [Jul 21](https://hashnode.com/posts/how-to-use-shadcn-checkbox-in-react-and-next-js-projects/6a5f6e7f7ce8d5599d03be86) ### [How to Use Shadcn Checkbox in React and Next.js Projects](https://shadcn.hashnode.dev/how-to-use-shadcn-checkbox-in-react-and-next-js-projects?utm_source=hashnode&utm_medium=feed) In this guide, you'll learn how to create a simple Shadcn Checkbox component using React, Next.js, and Tailwind CSS. 4 min read · [shadcn.hashnode.dev](https://shadcn.hashnode.dev/how-to-use-shadcn-checkbox-in-react-and-next-js-projects?utm_source=hashnode&utm_medium=feed) [SANJAY JOSHI](https://hashnode.com/@sanjayjoshi) · [Jul 9](https://hashnode.com/posts/15-shadcn-checkbox-examples-for-better-forms-dashboards/6a4f7598842a0c1133bffe70) ### [15+ Shadcn Checkbox Examples for Better Forms & Dashboards](https://webtemplates.hashnode.dev/15-shadcn-checkbox-examples-for-better-forms-dashboards?utm_source=hashnode&utm_medium=feed) Stop Building Checkboxes from Scratch. Try These 16 Shadcn Components 12 min read · [webtemplates.hashnode.dev](https://webtemplates.hashnode.dev/15-shadcn-checkbox-examples-for-better-forms-dashboards?utm_source=hashnode&utm_medium=feed) [Abhijeet Dave](https://hashnode.com/@Abhidave) · [Jun 22](https://hashnode.com/posts/awesome-shadcn-ui-blocks-libraries-to-check/6a38cc954455da169675e768) ### [Awesome 10 shadcn/ui Blocks Libraries To Check in 2026.](https://abhidave.hashnode.dev/awesome-shadcn-ui-blocks-libraries-to-check?utm_source=hashnode&utm_medium=feed) Best shadcn/ui blocks libraries compared. 17 min read · [abhidave.hashnode.dev](https://abhidave.hashnode.dev/awesome-shadcn-ui-blocks-libraries-to-check?utm_source=hashnode&utm_medium=feed) [Shubham Kumar Singh](https://hashnode.com/@shubhamsinghbundela) · [Jun 4](https://hashnode.com/posts/building-a-paytm-style-payments-frontend-with-react-tanstack-router-react-query-and-shadcn-ui/6a21b99df27c616755057bf5) ### [Building a Paytm-Style Payments Frontend with React, TanStack Router, React Query, and Shadcn UI](https://shubhamsinghbundela.hashnode.dev/building-a-paytm-style-payments-frontend-with-react-tanstack-router-react-query-and-shadcn-ui?utm_source=hashnode&utm_medium=feed) Learn how to build a Paytm-style payments frontend using React, TypeScript, TanStack Router, React Query, Shadcn UI, Axios, and Bun. 39 min read · [shubhamsinghbundela.hashnode.dev](https://shubhamsinghbundela.hashnode.dev/building-a-paytm-style-payments-frontend-with-react-tanstack-router-react-query-and-shadcn-ui?utm_source=hashnode&utm_medium=feed) [Sunil Joshi](https://hashnode.com/@suniljoshi19) · [Mar 16](https://hashnode.com/posts/best-shadcn-components/69b7cac91cf26228b3d48c46) ### [30+ Best Shadcn Components for 2026](https://sunil.hashnode.dev/best-shadcn-components?utm_source=hashnode&utm_medium=feed) Discover a curated list of 30+ Shadcn components for React and Next.js developers. Create modern dashboards, UI elements, and responsive apps faster. 4 min read · [sunil.hashnode.dev](https://sunil.hashnode.dev/best-shadcn-components?utm_source=hashnode&utm_medium=feed) [Sunil Joshi](https://hashnode.com/@suniljoshi19) · [Mar 3](https://hashnode.com/posts/top-shadcn-sidebar-examples/69a69198d4dc9b424348dce8) ### [Top Shadcn sidebar examples for modern dashboards](https://sunil.hashnode.dev/top-shadcn-sidebar-examples?utm_source=hashnode&utm_medium=feed) Explore 7+ Shadcn sidebar UI blocks for modern dashboards. Copy responsive navigation components built with shadcn/ui, React, and Next.js. 4 min read · [sunil.hashnode.dev](https://sunil.hashnode.dev/top-shadcn-sidebar-examples?utm_source=hashnode&utm_medium=feed)