Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

📣 New course alert! Introducing "shadcn/ui Deconstructed", a reverse-engineered exploration of React composition patterns and styling techniques. Here's the intro video! 🎥

Laracasts

89,171 subscribers

100,049 views • 1 year ago •via X (Twitter)

Arts Science & Technology Education

Anya Rossi• Live Now

Private livecam show

4 Comments

Laracasts1 year ago

And here's the link to the full series on Laracasts. Happy deconstructing! 🛠️ — Simon

JMIR Publications2 years ago

#CallForPapers 📣 📝 JMIR Rehabilitation and Assistive Technologies invites submissions for our #themeissue, "Incorporating Participatory Methods in Developing, Implementing, and Evaluating #Rehab Interventions and #AssistiveTechnologies" ℹ️ @drsarahmunce

Bijaya Prasad Kuikel1 year ago

Something that i am really excited for. Thank you @simonswiss

Sidrit Trandafili1 year ago

Went through this today. It’s awesome. 👌Well done @simonswiss

Related Videos

It's new course day 🚀 Introducing "React from scratch" — learn React from the absolute basics, while hanging out with cute dev puppies 🐶 Here's the intro video!

It's new course day 🚀 Introducing "React from scratch" — learn React from the absolute basics, while hanging out with cute dev puppies 🐶 Here's the intro video!

Laracasts

27,263 views • 1 year ago

Introducing Silk — The most advanced swipeable sheet ever engineered for the web. Native-like experience • Works on all devices • Unlocks dozens of UI patterns on the web. Available for React.

Introducing Silk — The most advanced swipeable sheet ever engineered for the web. Native-like experience • Works on all devices • Unlocks dozens of UI patterns on the web. Available for React.

Bruno Stasse

834,034 views • 1 year ago

Introducing Shadify: Generative UI built on ShadCN Simply describe a UI and watch your LangChain agent compose from shadcn on the fly, using AG-UI and CopilotKit🪁. Then export it as React code. Repo below. Try it out here:

Introducing Shadify: Generative UI built on ShadCN Simply describe a UI and watch your LangChain agent compose from shadcn on the fly, using AG-UI and CopilotKit🪁. Then export it as React code. Repo below. Try it out here:

Atai Barkai

137,922 views • 2 months ago

Introducing soundcn - a shadcn registry with a collection of sounds. The beloved registry now has a refreshed UI, new fonts, new colors, a new layout, and sound customization 👇

Introducing soundcn - a shadcn registry with a collection of sounds. The beloved registry now has a refreshed UI, new fonts, new colors, a new layout, and sound customization 👇

KapishDima

24,016 views • 1 month ago

Made a copy of the monthly calendar used by Cal.com with shadcn UI, Radix by WorkOS Colors and React Aria

Made a copy of the monthly calendar used by Cal.com with shadcn UI, Radix by WorkOS Colors and React Aria

Damián Ricobelli

54,160 views • 2 years ago

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.

shadcn

343,571 views • 2 months ago

Introducing Evilcharts An open-source chart UI website built with shadcn/ui and recharts, beautifully designed and handcrafted.

Introducing Evilcharts An open-source chart UI website built with shadcn/ui and recharts, beautifully designed and handcrafted.

Gurbinder

76,420 views • 1 month ago

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:

shadcn

392,448 views • 1 year ago

React Native Lens UI Kit updates - styling enhancements and Video support I built this app with only 111 lines of code ✨

React Native Lens UI Kit updates - styling enhancements and Video support I built this app with only 111 lines of code ✨

nader dabit

25,302 views • 2 years ago

Introducing Agents UI, an open-source shadcn component library for building polished React frontends for your voice agents. Audio visualizers. Media controls. Session management tools. Chat transcripts. All wired to LiveKit Agents. Install via the shadcn CLI and own the code.

Introducing Agents UI, an open-source shadcn component library for building polished React frontends for your voice agents. Audio visualizers. Media controls. Session management tools. Chat transcripts. All wired to LiveKit Agents. Install via the shadcn CLI and own the code.

LiveKit

182,500 views • 3 months ago

Introducing Video2Ascii – a WebGL-powered React component that converts Videos to ASCII art. I came across the General Intuition website and loved their animations but there were no open-source React Components so I reverse engineered it.

Introducing Video2Ascii – a WebGL-powered React component that converts Videos to ASCII art. I came across the General Intuition website and loved their animations but there were no open-source React Components so I reverse engineered it.

Elijah Kurien

198,360 views • 5 months ago

shadcn/ui patterns. No React. No build. Just Rails. Maquina Components gives you the same component architecture — ERB partials + StimulusJS + Tailwind CSS v4. Claude skill for AI-assisted dev: #Rails #RubyOnRails

shadcn/ui patterns. No React. No build. Just Rails. Maquina Components gives you the same component architecture — ERB partials + StimulusJS + Tailwind CSS v4. Claude skill for AI-assisted dev: #Rails #RubyOnRails

Mario Alberto Chávez

29,721 views • 4 months ago

this app took me a total of ~3 hours to build. ✨ shadcn ui kind of makes me feel I actually understand design (I don't) 🕊️ tech stack - @walletconnect v2 - Next.js - shadcn ui - @lensprotocol react sdk 🔗 code 🔗 app

this app took me a total of ~3 hours to build. ✨ shadcn ui kind of makes me feel I actually understand design (I don't) 🕊️ tech stack - @walletconnect v2 - Next.js - shadcn ui - @lensprotocol react sdk 🔗 code 🔗 app

nader dabit

92,528 views • 2 years ago

We’re open-sourcing Frimousse—a lightweight, unstyled (but with a shadcn/ui version too), and composable emoji picker for React. 😊

We’re open-sourcing Frimousse—a lightweight, unstyled (but with a shadcn/ui version too), and composable emoji picker for React. 😊

Marc Bouchenoire

81,219 views • 1 year ago

Introducing Plate: the modern rich-text editor for React. ◆ Core: Plugin system. ◆ Plugins: 50+ Headless, unstyled packages. ◆ Primitives: State and behavior hooks. ◆ Components: Radix by WorkOS + shadcn ui. Free. Open Source. Responsive. Dark Mode.

Introducing Plate: the modern rich-text editor for React. ◆ Core: Plugin system. ◆ Plugins: 50+ Headless, unstyled packages. ◆ Primitives: State and behavior hooks. ◆ Components: Radix by WorkOS + shadcn ui. Free. Open Source. Responsive. Dark Mode.

zbeyens

208,816 views • 2 years ago

Introducing Upstash Search UI - a beautiful, shadcn-inspired search component 🎉 ◆ Pre-styled & accessible out of the box ◆ Built-in keyword highlighting ◆ Perfect for React & Next.js Add beautiful, professional search to your app in seconds 👀

Introducing Upstash Search UI - a beautiful, shadcn-inspired search component 🎉 ◆ Pre-styled & accessible out of the box ◆ Built-in keyword highlighting ◆ Perfect for React & Next.js Add beautiful, professional search to your app in seconds 👀

Upstash

26,953 views • 11 months ago

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!

Matt

44,889 views • 8 months ago

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

shadcn

531,717 views • 3 years ago

React Native & with Expo using shadcn template !!! ✨New Component: Import Alert Dialog Components and easily add it your React Native & Expo App Both Expo and RN CLI #buildinpublic #buildingpublic

React Native & with Expo using shadcn template !!! ✨New Component: Import Alert Dialog Components and easily add it your React Native & Expo App Both Expo and RN CLI #buildinpublic #buildingpublic

Sid

63,524 views • 2 years ago