shadcn's banner

shadcn

@shadcn • 233,921 subscribers

I own a computer. / @vercel

Shorts

Introducing shadcn/typeset. You know how you render markdown and get back plain, unstyled HTML? Headings, paragraphs, lists, tables. So you style the elements one by one: font sizes, line heights, spacing. You do it for your blog. Then you do it again for docs. Then again for the chat. Every time, you're fighting the same thing: sizing and spacing. To fix this, we created typeset.css: one file that styles everything inside a typeset container. It lives in your project, so you can change it directly when you need to. And we made it work beautifully with streaming markdown.

Introducing shadcn/typeset. You know how you render markdown and get back plain, unstyled HTML? Headings, paragraphs, lists, tables. So you style the elements one by one: font sizes, line heights, spacing. You do it for your blog. Then you do it again for docs. Then again for the chat. Every time, you're fighting the same thing: sizing and spacing. To fix this, we created typeset.css: one file that styles everything inside a typeset container. It lives in your project, so you can change it directly when you need to. And we made it work beautifully with streaming markdown.

543,327 Aufrufe

Thank you to all my GitHub sponsors.

Thank you to all my GitHub sponsors.

56,869 Aufrufe

We’ve added a new command: npx shadcn apply. Instantly apply a full preset across your project. Swap components, themes, colors, CSS variables, fonts, and icons all at once. Apply. Test. Repeat.

We’ve added a new command: npx shadcn apply. Instantly apply a full preset across your project. Swap components, themes, colors, CSS variables, fonts, and icons all at once. Apply. Test. Repeat.

137,300 Aufrufe

You can now build translucent dropdown menus, selects, and comboboxes on shadcn/create. Mix in your custom styles, icons, fonts, and radii and build something different. Your own preset. All it takes is a few clicks.

You can now build translucent dropdown menus, selects, and comboboxes on shadcn/create. Mix in your custom styles, icons, fonts, and radii and build something different. Your own preset. All it takes is a few clicks.

153,654 Aufrufe

I just published the full guide to building forms with the Field component: - TanStack Form & React Hook Form - Zod validation and displaying errors - Practical examples we’ll actually use - Inputs, Radios, Fieldset, Arrays & more Check it out. Link below.

I just published the full guide to building forms with the Field component: - TanStack Form & React Hook Form - Zod validation and displaying errors - Practical examples we’ll actually use - Inputs, Radios, Fieldset, Arrays & more Check it out. Link below.

253,734 Aufrufe

Starting a new project shouldn’t mean rebuilding your setup from scratch. Experiment: init from an existing project (local or remote) and bring over components (including customizations), theme, fonts, deps, the whole setup and file structure. Works cross-framework: start a TanStack app from an existing Vite app.

Starting a new project shouldn’t mean rebuilding your setup from scratch. Experiment: init from an existing project (local or remote) and bring over components (including customizations), theme, fonts, deps, the whole setup and file structure. Works cross-framework: start a TanStack app from an existing Vite app.

63,820 Aufrufe

Go to Click on ElevenLabs in the left sidebar. Press D to turn on dark mode. Then hit R and keep shuffling.

Go to Click on ElevenLabs in the left sidebar. Press D to turn on dark mode. Then hit R and keep shuffling.

109,708 Aufrufe

Getting a few questions about the menu options. This is specifically for building inverted menus in light mode. Works for dropdown menu, select, combobox, context menu, menubar...etc

Getting a few questions about the menu options. This is specifically for building inverted menus in light mode. Works for dropdown menu, select, combobox, context menu, menubar...etc

75,655 Aufrufe

Dark Mode and Focus Rings.

Dark Mode and Focus Rings.

137,259 Aufrufe

Built rico's chart. It has custom vectors, custom tooltip cursor, gradient, gaussian blur for hover effects, themes.. Whatever you throw at recharts, it just works.

Built rico's chart. It has custom vectors, custom tooltip cursor, gradient, gaussian blur for hover effects, themes.. Whatever you throw at recharts, it just works.

103,922 Aufrufe

We've added universal item support to the registry. Any framework. Any language. Now you can distribute code, config, workflows, mcp, agent rules. Anything. Here's me adding better-auth to Nuxt: auth client, middleware, pages. "npm" for application & infrastructure code.

We've added universal item support to the registry. Any framework. Any language. Now you can distribute code, config, workflows, mcp, agent rules. Anything. Here's me adding better-auth to Nuxt: auth client, middleware, pages. "npm" for application & infrastructure code.

86,268 Aufrufe

Installing Cursor rules with shadcn.

Installing Cursor rules with shadcn.

110,332 Aufrufe

When you're working on a new app, it can takes a few tries to find something you like so we've made switching presets really easy. Run init --preset with a new code in your app, and the cli will take care of reconfiguring everything including components, theme & dependencies.

When you're working on a new app, it can takes a few tries to find something you like so we've made switching presets really easy. Run init --preset with a new code in your app, and the cli will take care of reconfiguring everything including components, theme & dependencies.

36,616 Aufrufe

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.

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.

182,650 Aufrufe

How I use v0 for UI development ⬇️ Exploration: I rely on v0 a lot for exploration. If you have an idea you want to visualize, type in your prompt & let v0 transforms it into components. For the 1st generation, I always want v0 to be creative. I use the Quality ✨ toggle.

How I use v0 for UI development ⬇️ Exploration: I rely on v0 a lot for exploration. If you have an idea you want to visualize, type in your prompt & let v0 transforms it into components. For the 1st generation, I always want v0 to be creative. I use the Quality ✨ toggle.

139,097 Aufrufe

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.

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.

86,784 Aufrufe

Working on a new Command Menu to surface more context where you need it: - Colors in all formats. Enter to copy oklch or cmd+c for other format - Shortcut to copy cli command for components - Remembers your color format & package manager Small UX wins. Huge impact for docs.

Working on a new Command Menu to surface more context where you need it: - Colors in all formats. Enter to copy oklch or cmd+c for other format - Shortcut to copy cli command for components - Remembers your color format & package manager Small UX wins. Huge impact for docs.

53,924 Aufrufe

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

Today we're releasing a new set of components for building chat interfaces. We've taken the patterns we build every day, rethought the abstractions behind them, and turned them into components you can compose and customize. We're starting with the conversation layer: streaming, scrolling, messages, bubbles, attachments, and markers.

Today we're releasing a new set of components for building chat interfaces. We've taken the patterns we build every day, rethought the abstractions behind them, and turned them into components you can compose and customize. We're starting with the conversation layer: streaming, scrolling, messages, bubbles, attachments, and markers.

946,391 Aufrufe • vor 22 Tagen

Introducing shadcn/create – Build your own shadcn/ui Customize Everything. Pick your component library, icons, base color, theme, fonts and build something that doesn’t look like everything else. Now available for Next.js, Vite, TanStack Start and v0.

Introducing shadcn/create – Build your own shadcn/ui Customize Everything. Pick your component library, icons, base color, theme, fonts and build something that doesn’t look like everything else. Now available for Next.js, Vite, TanStack Start and v0.

1,128,539 Aufrufe • vor 7 Monaten

Introducing Luma, a new shadcn/ui style. Rounded geometry. Soft elevation. Breathable layouts. Inspired by macOS Tahoe (minus the glass). Foundation. For your next app.

Introducing Luma, a new shadcn/ui style. Rounded geometry. Soft elevation. Breathable layouts. Inspired by macOS Tahoe (minus the glass). Foundation. For your next app.

345,384 Aufrufe • vor 3 Monaten

Meet Sera. A new foundational style for shadcn/ui. Minimal. Editorial. Typographic. Shaped by Print Design Principles. Available Today. Try on shadcn/create.

Meet Sera. A new foundational style for shadcn/ui. Minimal. Editorial. Typographic. Shaped by Print Design Principles. Available Today. Try on shadcn/create.

167,249 Aufrufe • vor 3 Monaten

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.

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.

538,266 Aufrufe • vor 1 Jahr

Two updates to presets. Font Heading lets you set a custom heading font. Chart Color lets you set a different color palette for your charts. More customization. One preset code.

Two updates to presets. Font Heading lets you set a custom heading font. Chart Color lets you set a different color palette for your charts. More customization. One preset code.

142,412 Aufrufe • vor 4 Monaten

A design system encoded in a preset means you can take it anywhere you work. Found a new style you like? Just ask v0 to use it. Works out of the box. No config required. Got an old boring shadcn/ui app that looks like everyone else? Ask v0 to apply a new code.

A design system encoded in a preset means you can take it anywhere you work. Found a new style you like? Just ask v0 to use it. Works out of the box. No config required. Got an old boring shadcn/ui app that looks like everyone else? Ask v0 to apply a new code.

78,163 Aufrufe • vor 2 Monaten

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 - Jared Palmer Mariana Castilho Guillermo Rauch Malte Ubl almonk and the team at Vercel

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 - Jared Palmer Mariana Castilho Guillermo Rauch Malte Ubl almonk and the team at Vercel

737,233 Aufrufe • vor 2 Jahren

Developing components for shadcn/ui is still largely a manual process. Every week, I manually go through 5,000+ components and examples checking spacing, animation, light/dark mode, typography, icons, and more.

Developing components for shadcn/ui is still largely a manual process. Every week, I manually go through 5,000+ components and examples checking spacing, animation, light/dark mode, typography, icons, and more.

131,784 Aufrufe • vor 5 Monaten

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:

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:

392,448 Aufrufe • vor 1 Jahr

To get translucent menus right, we had to manually test components over different gradients & colors, checking visuals & accessibility. Now multiply that by 5 component types across 5 styles in both light and dark modes. It's a lot of work. Work that, for now, AI can't do.

To get translucent menus right, we had to manually test components over different gradients & colors, checking visuals & accessibility. Now multiply that by 5 component types across 5 styles in both light and dark modes. It's a lot of work. Work that, for now, AI can't do.

92,478 Aufrufe • vor 4 Monaten

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.

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.

667,050 Aufrufe • vor 3 Jahren

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. ⬇️

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. ⬇️

531,753 Aufrufe • vor 3 Jahren

shadcn/create works out of the box with Laravel Run laravel new, build your preset then apply it using the cli.

shadcn/create works out of the box with Laravel Run laravel new, build your preset then apply it using the cli.

72,847 Aufrufe • vor 4 Monaten

Sora (.com) is built using shadcn/ui 😎

Sora (.com) is built using shadcn/ui 😎

260,487 Aufrufe • vor 1 Jahr

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.

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.

421,013 Aufrufe • vor 3 Jahren

We’ve made discovering and adding registries easier. In this demo, we add two registries and ask shadcn/mcp to combine code from both. The form from blocks registry uses Radix, our app uses Base UI, but thanks to the shared abstraction (plus some CLI magic), it just works.

We’ve made discovering and adding registries easier. In this demo, we add two registries and ask shadcn/mcp to combine code from both. The form from blocks registry uses Radix, our app uses Base UI, but thanks to the shared abstraction (plus some CLI magic), it just works.

68,734 Aufrufe • vor 6 Monaten

The new Open in v0 lets you take your components to v0 for prompting. My new workflow is component to v0 to editor. You can try it now on

The new Open in v0 lets you take your components to v0 for prompting. My new workflow is component to v0 to editor. You can try it now on

173,352 Aufrufe • vor 1 Jahr

One more thing... 🤯

One more thing... 🤯

208,286 Aufrufe • vor 3 Jahren

Making focus rings look great, consistent, and fully themable across all components.

Making focus rings look great, consistent, and fully themable across all components.

105,860 Aufrufe • vor 1 Jahr