shadcn Profile picture
i own a computer / @vercel / https://t.co/gqiqsQ0MgD
4 subscribers
Apr 30 10 tweets 4 min read
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.
Apr 17 8 tweets 3 min read
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
Aug 30, 2024 6 tweets 3 min read
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.
May 19, 2023 6 tweets 3 min read
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