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
- Our conversations are scattered across apps
- Answers are wall of text. You only care about 1-2 lines
- Copy-pasting useful parts is tedious
- And good luck finding where you ask what
Coppermind is a small...(continues in thread).
Coppermind is a small app you open & forget. It runs in background.
Find something useful? Select. Tap Shift twice. Instantly added to a note.
(Demo showing ChatGPT on the left and Coppermind on the right)
It works everywhere: browser, Mac app, your code editor, terminal, anywhere.
You can keep adding from any app and Coppermind will stitch everything together.
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