Introducing the registry mcp. One command to make any component registry mcp-compatible.
Your Design System. Now with AI. Zero config.
We've got a lot to cover. Let's get started. ⬇️
1/10 - Here’s a custom registry I built for testing. It has custom components, color tokens, fonts, everything you'd expect in a design system.
2/10 - The registry also has a registry:style. This is where we’ve list the custom tokens & css vars to be set up when you init a project.
We’ve also added a @cursor_ai rule. The rules instruct the llm how to setup providers, fonts and even next.config.ts.
3/10 - shadcn now ships with a registry:mcp command. One command to make any registry mcp-compatible.
Let’s start a new next project and setup shadcn mcp with @cursor_ai
4/10 - This project is a vanilla Next.js project. No shadcn no registry configured.
We’ll now use the registry mcp to setup our project. It will connect to the registry, figure out the style to use, init shadcn, install the custom tokens…everything.
5/10 - Our custom Alpine Design System comes with a set of rules. One of them is how to install the custom DM_Sans font. Let’s ask it to do this.
6/10 - The project is now ready. We can start using components from the registry right away.
7/10 - Let’s keep going. More components, more design primitives.
8/10 - So far we’ve only used components from the Alpine registry.
Since all shadcn registries share one schema, we can go even further and pull components from anywhere. Here's one from Tailark.
The cli will take care of adapting the code to fit our style.
9/10 - Pretty cool right? But there’s more.
If a component is updated on the remote registry, say a dev pushes a fix or a style update...just ask the llm and it will take care of pulling, merging and applying the changes.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
shadcn is the top comment here. Thank you. Here's why I call it a way to build your component library and NOT a component library.
"If you start a React project without shadcn/ui today, you will end up with shadcn/ui or something that looks like shadcn/ui"
Let's take a look ⬇️
We'll start a new project with React and Tailwind. Every React project has a button. Let's add one.
Next, we need a dropdown menu. HTML does not come with a customizable dropdown menu. So we do what we've all done: look for a component library that has one, install it and wrap it.
Introducing the Form component. Build accessible forms using react-hook-form and Radix UI.
◆ Composable & Accessible
◆ Validation using Zod
◆ Full control over markup
◆ Styled using Tailwind CSS
◆ Complete code examples
◆ Copy/Paste into your apps