shadcn
@shadcn
Followers
163K
Following
32K
Media
761
Statuses
5K
I own a computer / @vercel / https://t.co/gqiqsQ1k6b
Joined April 2009
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 ⬇️
44
58
2K
Introducing Charts. A collection of chart components that you can copy and paste into your apps. Built on top of Recharts. Beautifully designed. Open Source.
459
1K
12K
Introducing sidebar.tsx—25 components to help you build all kinds of sidebars. I don't like building sidebars. So I built 30+ of them. All types. Then simplified the core into sidebar.tsx—a strong foundation to build on top of. It works with Next.js, Remix, Vite & Laravel.
516
1K
11K
I was taught, early in my career, to be cautious with criticism. Someone worked really hard on the thing you’re criticizing. That said, I’m gonna break the rule. Siri is ridiculously awfully bad. It’s been 14 years. Apple has no idea what they’re doing.
237
213
7K
Just open-sourced the app I built to test Tailwind v4. • Tailwind v4 + React 19.• Custom themes, colors & scaling.• Data Table with filters.• Draggable & editable rows. Code’s yours. Link below.
149
410
7K
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.
170
585
6K
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. ⬇️
173
580
6K
For chatbot builders: Enter = new line. Cmd/Ctrl + Enter = submit. Please.
318
320
6K
I wanted to share the following 10 Tailwind techniques. These will come in handy next week. For those who don’t use Tailwind, here be dragons!. 1/10 - Let’s start simple. Set a CSS variable (width) based on state and use an arbitrary className.
96
607
6K
Introducing v0 by @vercel - v0 generates custom components on the fly that you can copy and paste into your existing codebase. Need a component? Just Ask - @jaredpalmer @shuding_ @max_leiter @mrncst @rauchg @cramforce @almonk and the team at Vercel
193
732
5K
Tailwind v4 is coming. I’m not just upgrading—I’m refining everything: React 19 support, trying new patterns enabled by v4 and checking every community feedback on GitHub. I'm fully locked in. Lose Yourself & Till I Collapse on repeat. It's coming soon.
167
186
5K
The Tweet that changed everything.
I just built a *functioning* React app by describing what I wanted to GPT-3. I'm still in awe.
43
170
5K
Tailwind is such a joy to use. If you learn one utility class, you know all utility classes. If you implement something on one project, it works on all projects. And it never breaks. It works exactly as it worked since v0.3 and keeps getting better and faster.
135
294
4K
One of the joys of life is making an API request and getting JSON back. I dunno how to explain it.
164
494
4K
🏆 shadcn/ui wins project of the year. Two years in a row. Thanks, everyone.
183
155
4K
shadcn/ui turns 2! 🎉 What started as a side project has grown into a new standard for writing and distributing code—and now the go-to component library for AI. To the community improving and supporting it every day, thank you.
137
171
4K
It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.
146
423
4K
I highly recommend this course by @emilkowalski_ for web animations. If you’re a student learning web dev, send me a dm with your GitHub. I’ll buy the course for you.
The registration for my animation course is open for the next 10 days. Now, with a new CSS Animations module!. We'll build all of these components and more, source code included.
146
180
4K
🎉 shadcn/ui is now fully compatible with React 19 (and Next.js 15).
An update on Next.js 15 and React 19. 1/5 - I published a guide on how to use shadcn/ui with React 19: - it covers the peer deps issue & how to resolve. - how to use recharts with React 19.- upgrade status of dependencies.- and more ⬇️.
89
184
3K
Shipping more chart examples this week - including advanced tooltips, custom radial bars, reference lines, label list, data shapes and more.
130
153
3K
Introducing Table and Data Table components. Powered by TanStack Table ✨. Built using Radix UI and Tailwind CSS. With Pagination, Row Selection, Sorting, Filters, Row Actions and Keyboard Navigation.
129
307
3K
Do all shadcn/ui apps look the same? No. They don't have to. Think of shadcn/ui as a coloring template - it provides the outlines & structure. Black & white. A starting point. You get to fill it with your own unique colors and styles. And it's really easy. Here's an example:
101
178
3K
Adding 15 new blocks so that you can build all kinds of sidebars. One-click install with the cli or copy paste.
132
100
3K
What if you had docs that is personalized for you. What if you could customize components before you copy and paste. 😁
181
265
3K
🏆 Project of the Year. Thanks everyone!.
The 2023 Rising Stars are out! 🌟 .Check if you missed anything from last year! .Congratulations to @shadcn for his outstanding UI components, the project of the year. Special thanks to guest writers @li_hbr , @Baconbrix and @sebastienlorber.
135
159
3K
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.
94
312
3K
✨We've added new components to shadcn/ui and made improvements to the CLI. ◆ Drawer, Carousel, Pagination, Sonner & Resizable.◆ Support for custom Tailwind prefix.◆ Shipping early next year: A new style with framer motion animations. 👇
173
324
3K
Building sidebars takes a lot of work but it’s looking good: figured out a simple api for composing the elements of a sidebar and got themes working. Will ship this soon.
101
85
3K
We’re launching Blocks. One of the most requested features since launch. Blocks are ready-made components that you can copy and paste into your projects. Responsive, accessible and composable. Fits right in your current stack.
98
174
3K
1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this?. Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️
66
232
3K
Built to be smarter than us. Ended up just like us. - outdated knowledge, inflated confidence.- pretends to think, gets it wrong.- says sorry, ignores instructions.- believes everything it read online.- cheaper, faster asian version.- promised a messiah (agi) to fix everything
66
290
3K
LLMs are getting really good at shadcn/ui. If you're planning to have your UI (or parts of it) be generated in the future, shadcn/ui is a solid base to bet on now.
78
114
3K
Shipped. We’ve added 3 new e-commerce dashboards to Blocks. More to come soon.
103
124
3K
The name I copied from the GitHub repo breadcrumb. The logo is the default textarea resize handle. 😎
shadcn is proof that you’re spending too much time on naming ideas.
61
68
2K
Alright, check this out!. I'm going to build a custom dashboard with supabase auth and a custom theme by "piecing together blocks from the Web". 1/n - Let's start by adding the dashboard block from shadcn/ui:
72
161
2K
Shipped the new chart blocks. I’ve also added more examples on how to build advanced tooltips with custom label, icons and formatters. Next up: dashboards and cli updates.
91
125
2K
Not a component library. A component distribution system. Pull components from anywhere. Add code that looks like your own.
66
88
2K
We've added two new components: the most-requested breadcrumb and a new Input OTP.
82
129
2K
Making focus rings look great, consistent, and fully themable across all components.
60
50
2K
Been waiting for this to drop. New calendar/date picker component coming soon. 📅.
🎀 little-date: A tiny library that makes date ranges short and sweet. Originally built as part of a Vercel hackathon to make our date picker more compact. Now open-source on GitHub. 👇.
57
94
2K
We’re the last generation of programmers of our kind. The magic of writing code is quietly slipping away.
154
109
2K
Need: an iOS app that pulls links from my Twitter bookmarks, Safari Reading List, etc., and puts one on my home screen (as a widget) every day.
103
47
2K
Shipped a little something to make working with colors easier. Tailwind colors in every format: hsl, hex, rgb, and className. Click to copy!
84
116
2K
But seriously, where’s Apple in all of this? Apple Intelligence is clearly not working. Somehow Siri got worse….
203
70
2K
Introducing Themes. Hand-picked colors that you can copy and paste into your apps. This builds on top of the Styles API. Pick a style with some sane defaults, add your colors and make it yours.
80
221
2K
I stand by this: Design Systems are guidelines. Not Rules. A design system should be open for adjustments by the teams consuming it. Merge those classes.
52
101
2K
We're opening up the Blocks library for community contributions. Share your components and blocks with other developers to help build a library of high-quality, reusable components. Add into your codebase with a single command. (link below)
52
105
2K
Uses shadcn/ui for components 😎.
With Canvas in Gemini, you can:. ⌨️ Write, iterate & preview React/HTML code.📝 Draft & edit comprehensive documents.🎨 Build interactive prototypes, games & visualization.…and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with
62
54
2K
Achievement Unlocked.
50
43
2K
I always wake up with the best ideas. Today’s: What if the “No Tip” button played a sound? 😈
216
26
2K
Working on new components, need real-world designs to test! . If you’ve got a design (your own) you’d love to see in code, drop it here. I’ll pick a few and implement.
143
35
2K
I'm using fumadocs by @fuma_nama. It's excellent. You know how you end up rebuilding a full docs site every time you start a new project? . Fumadocs fixes this by giving you all the right blocks that you compose together. Like headless docs to build exactly what you need.
28
79
2K
We are introducing a new mode for Blocks called Lift Mode. Enable Lift Mode to "lift" components from a block template for copy and paste i.e you will be able to copy the smaller parts that make up a block template like cards, forms. etc. Visit the Blocks page to try it out.
81
133
2K
It’s here. Shipping the biggest update for the components. ◆ Theming with CSS variables. ◆ A CLI for installing components. ◆ New components: Card, Skeleton, Date pickers. ◆ Updated docs. Check it out: Free and Open Source.
80
150
2K
An update on Next.js 15 and React 19. 1/5 - I published a guide on how to use shadcn/ui with React 19: - it covers the peer deps issue & how to resolve. - how to use recharts with React 19.- upgrade status of dependencies.- and more ⬇️.
36
122
2K
Can’t wait to show you what I’ve been working on. We go live next week.
77
39
2K
Thanks to Tailwind’s use of CSS variables, you can easily adjust the size and spacing of your components. This is all Tailwind. All CSS. No additional props to learn. One --spacing var. Works everywhere.
23
58
2K
A key advantage of @resend's react-email is that emails are just components, which means we can add them just like any other. Imagine running a single command to set up a full dashboard, auth & emails:. npx shadcn init dash-01 auth-02 email-welcome. This is where we're going.
62
89
2K
We’ve been over this. Button vs Link. Pointer vs Default. Affordance, etc. I get it. But we design links to look like buttons all the time. And a tiny mismatch like the one attached? Kills me. I'm team cursor: pointer.
109
46
2K
The new CLI and registry unlock advanced theming, including custom colors, animations, icons, dependencies, and even components. With remote registry support, you can now give your apps a completely different look by running a simple command. Demo 📺
48
97
2K
My most successful project. ◆ is a side project of a side project.◆ no domain.◆ logo is just two lines.◆ doesn't even have a proper name. (shower thought this morning)
46
53
2K
🔥 Almost done with the registry schema. It’s unbelievably powerful for code generation and distribution. Define code as a flat JSON file and distribute it via the CLI. ✅ Custom styles: bring your own design system, components & tokens.✅ Extend, override, mix & match
42
91
2K
Added the code view + file tree for blocks. Copy paste away!. (I'm also testing a feature where you upload your components.json on shadcn/ui and we update all the site's code to match your config - more soon)
52
73
2K
🤯 has been nominated for the React Open Source Awards by @ReactSummit . Category: Productivity Booster. Thanks everyone.
88
57
2K