Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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.

shadcn's profile picture

shadcn

226,464 subscribers

666,968 Aufrufe • vor 3 Jahren •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von shadcn
shadcnvor 3 Jahren

All the components have been designed to complement each other seamlessly. They work in both light and dark modes and use accessible color schemes. You copy and paste the components into your app, giving you full control over the code.

Profilbild von shadcn
shadcnvor 3 Jahren

I'm also open sourcing a Next.js template with all components ready to go. The template comes with: ◆ All Radix UI components ◆ Fonts with next/font ◆ Icons from Lucide ◆ Dark mode ◆ Automatic Tailwind CSS class sorting and merging.

Profilbild von shadcn
shadcnvor 3 Jahren

Check out the site at

Profilbild von shadcn
shadcnvor 3 Jahren

And just in case...😅

Profilbild von Steven Tey
Steven Teyvor 3 Jahren

This is incredible!! Fantastic work 🤩

Profilbild von Julian Bilcke
Julian Bilckevor 3 Jahren

Excellent! I'm integrating it right now, I noticed a small typo while doing so ("AvatarPrimivite")

Profilbild von Hassan
Hassanvor 3 Jahren

Incredible work man!

Profilbild von Tiger Abrodi
Tiger Abrodivor 3 Jahren

Did you edit the videos? What did you use for it?

Profilbild von shadcn
shadcnvor 3 Jahren

I record and edit in Screenflow. Then export to Canva for animation.

Profilbild von Hari Bonda
Hari Bondavor 3 Jahren

how did you make this cool video?

Profilbild von shadcn
shadcnvor 3 Jahren

Yep. Screenflow and Canva.

Ähnliche Videos

Introducing A library of blocks/components that you can copy and paste into your apps. Built on top of shadcn. Beautifully designed. Open Source.
0:31

Introducing A library of blocks/components that you can copy and paste into your apps. Built on top of shadcn. Beautifully designed. Open Source.

Duncan

152,951 Aufrufe • vor 1 Jahr

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇
1:02

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇

Jordan Hughes

243,721 Aufrufe • vor 11 Monaten

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.
0:47

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.

shadcn

420,995 Aufrufe • vor 3 Jahren

Introducing Whenua - Open source - Accessible UI components for Astro & Tailwind CSS - Light and dark mode - Copy them, customize them, make them yours - No dependencies, no lock-in - Fully customizable npx whenua init →
1:32

Introducing Whenua - Open source - Accessible UI components for Astro & Tailwind CSS - Light and dark mode - Copy them, customize them, make them yours - No dependencies, no lock-in - Fully customizable npx whenua init →

Michael Andreuzza

22,635 Aufrufe • vor 4 Monaten

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴
0:27

Introducing Fancy Components: a collection full of fancy, fun, edgy and useless React components! — Built with react, ts, Tailwind CSS and Motion — Each comp. includes examples and docs to help you understand how it works and is built — 100% free & open-source! link↴

daniel petho

188,521 Aufrufe • vor 1 Jahr

Introducing Code Blocks A set of UI components & utilities to show your code beautifully. ✓ Copy-Paste. 100% free. ✓ Shiki or Sugar-High for syntax highlighter. ✓ Add components with shadcn /ui CLI. ✓ Docs built with Next.js + Base UI ✨
0:58

Introducing Code Blocks A set of UI components & utilities to show your code beautifully. ✓ Copy-Paste. 100% free. ✓ Shiki or Sugar-High for syntax highlighter. ✓ Add components with shadcn /ui CLI. ✓ Docs built with Next.js + Base UI ✨

Pablo

17,916 Aufrufe • vor 4 Monaten

Last week, I built this set of 50+ inputs with Tailwind CSS and Next.js (link in the comments)! 🔥 Now, I want to expand this into a collection of copy-and-paste components to quickly build app UIs. Would it be useful? 🤔
0:27

Last week, I built this set of 50+ inputs with Tailwind CSS and Next.js (link in the comments)! 🔥 Now, I want to expand this into a collection of copy-and-paste components to quickly build app UIs. Would it be useful? 🤔

Pasquale Vitiello

224,597 Aufrufe • vor 1 Jahr

Finally, TailGrids 2.0 🚀 Launched on ProductHunt 👇 🧱 Tailwind UI Components, Blocks and Templates 🔥 500+ Components with Free/Open-Source Option 🤌 Easy to Use Copy-Paste Interface 📦 13 Bonus Templates ✨ and More 💜 Your support matters the most
0:56

Finally, TailGrids 2.0 🚀 Launched on ProductHunt 👇 🧱 Tailwind UI Components, Blocks and Templates 🔥 500+ Components with Free/Open-Source Option 🤌 Easy to Use Copy-Paste Interface 📦 13 Bonus Templates ✨ and More 💜 Your support matters the most

Musharof

44,437 Aufrufe • vor 3 Jahren

Introducing OpenStatus - an open source monitoring service to check your api/website, collaborated with 🦋 @thibaultouay.dev. ◆ Built with Next.js, Turso, for speed. ◆ Built with Tailwind CSS, shadcn ui for seemless components. →
1:38

Introducing OpenStatus - an open source monitoring service to check your api/website, collaborated with 🦋 @thibaultouay.dev. ◆ Built with Next.js, Turso, for speed. ◆ Built with Tailwind CSS, shadcn ui for seemless components. →

Maximilian Kaske 🏓

95,813 Aufrufe • vor 2 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. ⬇️
0:25

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

shadcn

531,672 Aufrufe • vor 3 Jahren

Calendar built from scratch ↓ → Next.js hosted on Vercel → Tailwind CSS for styling → shadcn for beautiful and accessible components → nuqs for URL-based state management
0:26

Calendar built from scratch ↓ → Next.js hosted on Vercel → Tailwind CSS for styling → shadcn for beautiful and accessible components → nuqs for URL-based state management

João Melo

16,531 Aufrufe • vor 1 Jahr

Introducing Dotmatrix🗿 A collection of 55+ free and open-source dot-matrix loaders, built with React, TypeScript, Tailwind CSS, and shadcn. Install one, copy the code, and make it yours. Link: 👇🏼
0:59

Introducing Dotmatrix🗿 A collection of 55+ free and open-source dot-matrix loaders, built with React, TypeScript, Tailwind CSS, and shadcn. Install one, copy the code, and make it yours. Link: 👇🏼

shawn.

143,722 Aufrufe • vor 1 Monat

✨ Aceternity UI Huge collection of stunning free website effects, animations, and components. Code is ready to copy and paste 🙌 Crafted by Manu Arora Link below 👇 #webdesign #ux
0:24

✨ Aceternity UI Huge collection of stunning free website effects, animations, and components. Code is ready to copy and paste 🙌 Crafted by Manu Arora Link below 👇 #webdesign #ux

Adham Dannaway

103,185 Aufrufe • vor 2 Jahren

Introducing Nim, the first motion-primitives template. A minimal personal website with an MDX blog and animated components. Built with Next.js 15, React 19, Tailwind CSS v4, and Motion.
0:26

Introducing Nim, the first motion-primitives template. A minimal personal website with an MDX blog and animated components. Built with Next.js 15, React 19, Tailwind CSS v4, and Motion.

Ibelick

27,338 Aufrufe • vor 1 Jahr

Added another set of SwiftUI animations, components, and shaders to my open-source repo ✨ It’s a growing collection of loaders, prototypes, shaders, and components, all built with SwiftUI. Feel free to star, fork, and share with other developers.
0:30

Added another set of SwiftUI animations, components, and shaders to my open-source repo ✨ It’s a growing collection of loaders, prototypes, shaders, and components, all built with SwiftUI. Feel free to star, fork, and share with other developers.

Shubham Singh

104,695 Aufrufe • vor 1 Monat

Introducing LlamaCoder! An open source Claude Artifacts app that can generate full React apps and components with Llama 3.1 405B. 100% free and open source.
0:28

Introducing LlamaCoder! An open source Claude Artifacts app that can generate full React apps and components with Llama 3.1 405B. 100% free and open source.

Hassan

501,207 Aufrufe • vor 1 Jahr

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
0:30

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

shadcn

737,150 Aufrufe • vor 2 Jahren

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖
2:08

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 Aufrufe • vor 1 Jahr

launching openv0 ✨ generative UI components • open-source equivalent of vercel • AI generated, plug-and-play, react + tailwind + shadcn components + lucide icons $ npx openv0
1:25

launching openv0 ✨ generative UI components • open-source equivalent of vercel • AI generated, plug-and-play, react + tailwind + shadcn components + lucide icons $ npx openv0

cofounder, we have a problem

174,667 Aufrufe • vor 2 Jahren

Introducing Nuxt UI Playground: prototype and share components instantly, right in your browser ✨ Includes all 125+ components, composables, and Tailwind CSS theming out of the box. Try it now:
0:35

Introducing Nuxt UI Playground: prototype and share components instantly, right in your browser ✨ Includes all 125+ components, composables, and Tailwind CSS theming out of the box. Try it now:

Benjamin Canac

12,132 Aufrufe • vor 2 Monaten