shadcn's banner

shadcn

@shadcn • 245,730 subscribers

I own a computer. / @vercel

Shorts

I just published Trace, a new component for agent activity. It's one abstraction for reasoning, tool calls, queues, chain of thought, subagents...etc Also in this release: Code Block and AI Elements.

I just published Trace, a new component for agent activity. It's one abstraction for reasoning, tool calls, queues, chain of thought, subagents...etc Also in this release: Code Block and AI Elements.

172,766 Aufrufe

You can now color tag items in Copper.

You can now color tag items in Copper.

39,987 Aufrufe

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.

552,782 Aufrufe

New component: Questionnaire. Use it to build multi-step question flows, like agents asking follow-up questions. Supports single and multiple choice, freeform answers, skippable and conditional steps, controlled and resumable state, custom progress, bring-your-own validation, full keyboard navigation with answer shortcuts, ssr-ready, accessible and composable. Available for Base UI, Radix, React Aria in all styles. Also available as unstyled headless in shadcn/react.

New component: Questionnaire. Use it to build multi-step question flows, like agents asking follow-up questions. Supports single and multiple choice, freeform answers, skippable and conditional steps, controlled and resumable state, custom progress, bring-your-own validation, full keyboard navigation with answer shortcuts, ssr-ready, accessible and composable. Available for Base UI, Radix, React Aria in all styles. Also available as unstyled headless in shadcn/react.

277,400 Aufrufe

Copper now supports freehand drawing. Hit Cmd + (Right) Shift + Shift to open the editor from anywhere. Draw. Add shapes. Text. Colors. Save to Copper. Or Copy Paste straight to your prompt composer.

Copper now supports freehand drawing. Hit Cmd + (Right) Shift + Shift to open the editor from anywhere. Draw. Add shapes. Text. Colors. Save to Copper. Or Copy Paste straight to your prompt composer.

115,822 Aufrufe

CodeHagen ok done. you can now migrate your ui components between icon libraries.

CodeHagen ok done. you can now migrate your ui components between icon libraries.

88,193 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

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,866 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,879 Aufrufe

Thank you to all my GitHub sponsors.

Thank you to all my GitHub sponsors.

57,760 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.

110,005 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.

64,148 Aufrufe

Dark Mode and Focus Rings.

Dark Mode and Focus Rings.

137,268 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,739 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.

104,098 Aufrufe

Installing Cursor rules with shadcn.

Installing Cursor rules with shadcn.

110,346 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

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,419 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,171 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

Alright, I've made the shadcn/ui skills really good at 𝙳𝙴𝚂𝙸𝙶𝙽.𝚖𝚍. Ask for a design system and it picks a preset, then builds everything: colors, tokens, type scale, elevation, styles the primitives and blocks. Start with a solid foundation and build something unique.

Alright, I've made the shadcn/ui skills really good at 𝙳𝙴𝚂𝙸𝙶𝙽.𝚖𝚍. Ask for a design system and it picks a preset, then builds everything: colors, tokens, type scale, elevation, styles the primitives and blocks. Start with a solid foundation and build something unique.

237,816 Aufrufe • vor 8 Tagen

Launching Copper, a Mac app for capturing things you want to keep and prompts you want to try next while working with AI. The more I use AI, the more I find myself collecting little things I don't want to lose. You're in ChatGPT and think, "I'll need this later," but you don't want to stop what you're doing. Then you're in Claude. Cursor. Chrome. Back to ChatGPT. Before long, you've got little things scattered everywhere. An answer you want to keep. A link. An idea. Or three follow-up prompts before the current one has even finished generating. I had this problem, so I built Copper. Copper combines the useful parts of a to-do list, a clipboard, and a scratchpad. It's built specifically for AI-assisted work. It sits next to where you work and is always one shortcut away. It works with all your AI apps, terminals and browsers. Whenever I find something worth keeping, I capture it. If I think of a few prompts while the AI is still responding, I type them into Copper. Then I send them back into ChatGPT, Claude, or Cursor and check them off as I go. Copper is local and private. It doesn't sync anything, doesn't collect anything, and doesn't need an account. I've used Copper every day for the past few months. It has completely changed how I work. If this feels like something you'd use, it's $39. One-time purchase.

Launching Copper, a Mac app for capturing things you want to keep and prompts you want to try next while working with AI. The more I use AI, the more I find myself collecting little things I don't want to lose. You're in ChatGPT and think, "I'll need this later," but you don't want to stop what you're doing. Then you're in Claude. Cursor. Chrome. Back to ChatGPT. Before long, you've got little things scattered everywhere. An answer you want to keep. A link. An idea. Or three follow-up prompts before the current one has even finished generating. I had this problem, so I built Copper. Copper combines the useful parts of a to-do list, a clipboard, and a scratchpad. It's built specifically for AI-assisted work. It sits next to where you work and is always one shortcut away. It works with all your AI apps, terminals and browsers. Whenever I find something worth keeping, I capture it. If I think of a few prompts while the AI is still responding, I type them into Copper. Then I send them back into ChatGPT, Claude, or Cursor and check them off as I go. Copper is local and private. It doesn't sync anything, doesn't collect anything, and doesn't need an account. I've used Copper every day for the past few months. It has completely changed how I work. If this feels like something you'd use, it's $39. One-time purchase.

676,218 Aufrufe • vor 2 Monaten

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.

957,306 Aufrufe • vor 3 Monaten

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,131,915 Aufrufe • vor 10 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.

347,295 Aufrufe • vor 6 Monaten

Copper now supports file attachments. This has changed how I work. It’s become my prompt backlog: I queue work and prompts as they come up, then route them to their agents when ready. Here’s me capturing prompts for a component’s docs review.

Copper now supports file attachments. This has changed how I work. It’s become my prompt backlog: I queue work and prompts as they come up, then route them to their agents when ready. Here’s me capturing prompts for a component’s docs review.

110,255 Aufrufe • vor 2 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,839 Aufrufe • vor 1 Jahr

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.

168,074 Aufrufe • vor 6 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,478 Aufrufe • vor 3 Jahren

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 7 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,824 Aufrufe • vor 2 Jahren

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

532,653 Aufrufe • vor 3 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.

132,014 Aufrufe • vor 8 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,738 Aufrufe • vor 5 Monaten

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

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

260,568 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,408 Aufrufe • vor 3 Jahren

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,692 Aufrufe • vor 7 Monaten

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.

73,154 Aufrufe • vor 7 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 2 Jahren