--- title: "#shadcn articles | Hashnode" description: "Explore 195 articles tagged #shadcn on Hashnode. Tutorials, guides, and how-tos from the community." url: "https://hashnode.com/tag/shadcn" --- Tag # #shadcn 195 posts · 18 followers [Ajay Patel](https://hashnode.com/@ajaypatel9016) · [6d 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) [Faizal Sukaimi](https://hashnode.com/@faizalsukaimi) · [6d ago](https://hashnode.com/posts/how-to-use-the-reui-shadcn-registry-and-mcp-with-claude-code/6aec1a9bd5ce19042789687c) ### [How to Use the ReUI shadcn Registry and MCP with Claude Code](https://faizalsukaimi.hashnode.dev/how-to-use-the-reui-shadcn-registry-and-mcp-with-claude-code?utm_source=hashnode&utm_medium=feed) The ReUI MCP server connects your coding agent to the live ReUI registry. 5 min read · [faizalsukaimi.hashnode.dev](https://faizalsukaimi.hashnode.dev/how-to-use-the-reui-shadcn-registry-and-mcp-with-claude-code?utm_source=hashnode&utm_medium=feed) [1](https://hashnode.com/posts/how-to-use-the-reui-shadcn-registry-and-mcp-with-claude-code/6aec1a9bd5ce19042789687c) [Faizal Sukaimi](https://hashnode.com/@faizalsukaimi) · [Nov 2](https://hashnode.com/posts/tanstack-table-vs-reui-picking-a-react-data-grid-for-a-shadcn-app/6ae8c529c47f96bc0c5cea1c) ### [TanStack Table vs ReUI: picking a React data grid for a shadcn app](https://faizalsukaimi.hashnode.dev/tanstack-table-vs-reui-picking-a-react-data-grid-for-a-shadcn-app?utm_source=hashnode&utm_medium=feed) TanStack Table or ReUI? What each React data grid gives a shadcn app, and when to pick it. 4 min read · [faizalsukaimi.hashnode.dev](https://faizalsukaimi.hashnode.dev/tanstack-table-vs-reui-picking-a-react-data-grid-for-a-shadcn-app?utm_source=hashnode&utm_medium=feed) [3](https://hashnode.com/posts/tanstack-table-vs-reui-picking-a-react-data-grid-for-a-shadcn-app/6ae8c529c47f96bc0c5cea1c) [Cuelark](https://hashnode.com/@cuelark) · [Oct 31](https://hashnode.com/posts/think-act-ask-one-agent-run-through-cuelark-s-29-agent-components/6ae5e00de201478f5611ca80) ### [Think, act, ask: one agent run through Cuelark's 29 agent components](https://cuelark.hashnode.dev/think-act-ask-one-agent-run-through-cuelark-s-29-agent-components?utm_source=hashnode&utm_medium=feed) One coding agent run, moment by moment, with Cuelark UI's open-source shadcn agent components: reasoning, tools, approvals, citations, traces. 11 min read · [cuelark.hashnode.dev](https://cuelark.hashnode.dev/think-act-ask-one-agent-run-through-cuelark-s-29-agent-components?utm_source=hashnode&utm_medium=feed) [Faizal Sukaimi](https://hashnode.com/@faizalsukaimi) · [Oct 28](https://hashnode.com/posts/making-a-component-library-agent-ready-the-reui-mcp-server/6ae1b3788baa7b575f3e52d4) ### [Making a component library agent-ready: the ReUI MCP server](https://faizalsukaimi.hashnode.dev/making-a-component-library-agent-ready-the-reui-mcp-server?utm_source=hashnode&utm_medium=feed) Coding agents invent props. The ReUI MCP server gives them the real shadcn/ui registry: search, real APIs, page plans and prop checks. 4 min read · [faizalsukaimi.hashnode.dev](https://faizalsukaimi.hashnode.dev/making-a-component-library-agent-ready-the-reui-mcp-server?utm_source=hashnode&utm_medium=feed) [Wade Thomas](https://hashnode.com/@wadethomastt) · [Oct 18](https://hashnode.com/posts/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4/6ad5164de19175d0ba8cb174) ### [Build a Slide-In Mobile Menu in TanStack Start with Tailwind v4](https://blog.northernrangedigital.com/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4?utm_source=hashnode&utm_medium=feed) Turn a pop-in mobile menu into a sliding drawer with a fading backdrop, using only Tailwind classes, and keep it accessible. 9 min read · [blog.northernrangedigital.com](https://blog.northernrangedigital.com/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4?utm_source=hashnode&utm_medium=feed) [3](https://hashnode.com/posts/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4/6ad5164de19175d0ba8cb174) [Wade Thomas](https://hashnode.com/@wadethomastt) · [Oct 16](https://hashnode.com/posts/responsive-navigation-in-tanstack-start-hamburger-menu-and-desktop-navbar/6ad189c36de38f788a4a6827) ### [Responsive Navigation in TanStack Start: Hamburger Menu and Desktop Navbar](https://blog.northernrangedigital.com/responsive-navigation-in-tanstack-start-hamburger-menu-and-desktop-navbar?utm_source=hashnode&utm_medium=feed) Build a mobile-first header with Tailwind CSS and TanStack Router, with a hamburger menu, active links, and accessibility basics. 5 min read · [blog.northernrangedigital.com](https://blog.northernrangedigital.com/responsive-navigation-in-tanstack-start-hamburger-menu-and-desktop-navbar?utm_source=hashnode&utm_medium=feed) [Ash](https://hashnode.com/@ashvinui) · [Oct 2](https://hashnode.com/posts/how-to-add-shadcn-ui-charts-to-nextjs/6abf4b9d63317980cdaece08) ### [How to Add shadcn Charts to a Next.js App Without Writing Recharts Boilerplate](https://freecodecamp.org/news/how-to-add-shadcn-ui-charts-to-nextjs?utm_source=hashnode&utm_medium=feed) Charts look like a small task on a ticket. Then you open the Recharts docs and remember how much setup every chart needs: a config object for labels and colors, axes, a tooltip, a legend, colors that 10 min read · [freecodecamp.org](https://freecodecamp.org/news/how-to-add-shadcn-ui-charts-to-nextjs?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) [Jack Li](https://hashnode.com/@linb) · [Sep 21](https://hashnode.com/posts/shadcn-ui-says-the-code-is-yours-so-why-can-t-anything-edit-it/6ab0aad6cb94cc88682b695a) ### [shadcn/ui says the code is yours. So why can't anything edit it?](https://crossui.hashnode.dev/shadcn-ui-says-the-code-is-yours-so-why-can-t-anything-edit-it?utm_source=hashnode&utm_medium=feed) Visual React editors assume a package with a stable prop table. shadcn is your own source, styled by class names — which makes it the best candidate for structured editing, and explains what stands in the way: running Tailwind's engine against a shadow root with no build step. 12 min read · [crossui.hashnode.dev](https://crossui.hashnode.dev/shadcn-ui-says-the-code-is-yours-so-why-can-t-anything-edit-it?utm_source=hashnode&utm_medium=feed)