shadcn Profile picture
Apr 30 10 tweets 4 min read Read on X
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. ⬇️ Image
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
 

Keep Current with shadcn

shadcn Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @shadcn

Apr 17
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 ⬇️ Image
We'll start a new project with React and Tailwind. Every React project has a button. Let's add one. Image
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.

Let's add the x-ui component library. Image
Read 8 tweets
Aug 30, 2024
Introducing the new CLI.

Install anything from anywhere—add components, themes, hooks, functions, animations, and generated code to your apps.

This marks a major step forward in distributing code that both you and your LLMs can access and use.

Let’s take a look.Image
First up, the CLI now has support for all major React frameworks out of the box: Next.js, Remix, Vite, and Laravel.

And when you initialize a new app, we update your existing Tailwind files instead of overriding them.
A component now ships its own dependencies. Take the accordion, for example—it can define its own Tailwind keyframes.

When you add it to your project, we’ll update your tailwind.config.ts file accordingly.

If a component needs recharts, new theme colors, and a hook, we can scaffold everything into your app.
Read 6 tweets
May 19, 2023
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

ui.shadcn.com/examples/forms Image
The Form components use Radix's composable API under the hood.

It works with Input, Checkbox, Radio Group, Select, Switch, Combobox…everything.

Give it a Zod schema and it will automatically handle validation and error message rendering using the <FormMessage /> component. Image
The FormItem component takes care of generating unique ids for labels and inputs.

It sets the correct aria attributes such as aria-describedby and aria-invalid during validation.

You can also provide your own htmlFor and id if you want full control. No magic. Image
Read 6 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(