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.

Animated transitions when switching between light and dark themes. Install with shadcn CLI npx shadcn add @ncdai/theme-toggle-effect-circle

Chánh Đại

3,269 subscribers

11,928 views • 4 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Bored of basic, lifeless charts? hold on... 🔥 Introducing EvilCharts ◆ Animated & sleek ◆ Dark/Light Themes ◆ Built with Shadcn + Recharts ◆ Add in seconds: 'npx shadcn add evilcharts' 🔗:

Bored of basic, lifeless charts? hold on... 🔥 Introducing EvilCharts ◆ Animated & sleek ◆ Dark/Light Themes ◆ Built with Shadcn + Recharts ◆ Add in seconds: 'npx shadcn add evilcharts' 🔗:

Gurbinder

12,987 views • 1 year ago

React Elastic Slider component - Inspired by the Slider in DialKit (joshpuckett) - Built while learning from the “Creating a Slider Component” lesson in Interface Craft (joshpuckett) Install with shadcn CLI: npx shadcn add @ncdai/elastic-slider

React Elastic Slider component - Inspired by the Slider in DialKit (joshpuckett) - Built while learning from the “Creating a Slider Component” lesson in Interface Craft (joshpuckett) Install with shadcn CLI: npx shadcn add @ncdai/elastic-slider

Chánh Đại

15,137 views • 4 months ago

My matsu-theme for shadcn is now live! I also started working on a dedicated Figma kit for this theme. Preview and install with CLI ⬇️

My matsu-theme for shadcn is now live! I also started working on a dedicated Figma kit for this theme. Preview and install with CLI ⬇️

Matt

56,882 views • 1 year ago

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

shadcn

52,962 views • 1 year ago

The wait is over, Guys! 😌 Finally, we've shipped Shadcn Studio 🎉 An open-source registry with copy-and-paste components, blocks, and templates! - Paired with a powerful theme editor to craft, customize, and ship faster. 🚀 - Shadcn Theme Editor & Component variants ✅ - Theme Import/Export ✅ - Save Shadcn Themes ✅ - Shadcn Component Variants ⌛ - Shadcn Figma UI Kit ⌛ - Shadcn Blocks & Templates ⌛ - Figma Plugin, AI, MCP, LLM and more.. ⌛ ➡️ Check it out here: Huge thanks to Anand Patel, Heet Bhalodiya & Aayush Makwana for their incredible work on this! 🙌 Special thanks to shadcn Sahaj 🫱🏼‍🫲🏼 We’d love to hear your thoughts and feedback from the community! Let us know what you think. 😀

The wait is over, Guys! 😌 Finally, we've shipped Shadcn Studio 🎉 An open-source registry with copy-and-paste components, blocks, and templates! - Paired with a powerful theme editor to craft, customize, and ship faster. 🚀 - Shadcn Theme Editor & Component variants ✅ - Theme Import/Export ✅ - Save Shadcn Themes ✅ - Shadcn Component Variants ⌛ - Shadcn Figma UI Kit ⌛ - Shadcn Blocks & Templates ⌛ - Figma Plugin, AI, MCP, LLM and more.. ⌛ ➡️ Check it out here: Huge thanks to Anand Patel, Heet Bhalodiya & Aayush Makwana for their incredible work on this! 🙌 Special thanks to shadcn Sahaj 🫱🏼‍🫲🏼 We’d love to hear your thoughts and feedback from the community! Let us know what you think. 😀

Ajay Patel

85,953 views • 1 year ago

Introducing Veil a shadcn ui marketing blocks kit for building super simple websites. - registry ready - light and dark theme supported - open in v0 👇

Introducing Veil a shadcn ui marketing blocks kit for building super simple websites. - registry ready - light and dark theme supported - open in v0 👇

irung

100,095 views • 6 months ago

Progress update 👀 These are working much better now! 🎨 change theme colors 🌗 toggle dark / light mode ↩️ tweak border radius The demo video shows me playing with the shadcn website running locally (localhost:4000). clone and try previewcn now🔥 link in the reply ↓

Progress update 👀 These are working much better now! 🎨 change theme colors 🌗 toggle dark / light mode ↩️ tweak border radius The demo video shows me playing with the shadcn website running locally (localhost:4000). clone and try previewcn now🔥 link in the reply ↓

Taishi 🇯🇵🇨🇦

11,877 views • 8 months ago

Built a new component library: animated image generation loader and reveal effect 3 different types, dark and light mode support npm install img-fx

Built a new component library: animated image generation loader and reveal effect 3 different types, dark and light mode support npm install img-fx

Jakub Antalik

17,901 views • 3 months ago

After months of hard work, it's here! 🚀 The NEW shadcn/ui kit for Figma, based on Tailwind v4 and shadcn 2.5.0! What's new? ⭐ Updated Figma kit ⭐ Refactored Pro Blocks for Tailwind v4 ⭐ 28 new Pro Blocks ⭐ Added new AI models to our plugin for improved component generation ⭐ New feature: Export Figma themes via our plugin and install them with shadcn/ui registry

After months of hard work, it's here! 🚀 The NEW shadcn/ui kit for Figma, based on Tailwind v4 and shadcn 2.5.0! What's new? ⭐ Updated Figma kit ⭐ Refactored Pro Blocks for Tailwind v4 ⭐ 28 new Pro Blocks ⭐ Added new AI models to our plugin for improved component generation ⭐ New feature: Export Figma themes via our plugin and install them with shadcn/ui registry

Matt

26,730 views • 1 year 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,527 views • 2 years ago

A new version of the Liquid Metal is available. Thanks to Martin Petercak the performance is much better and it should run smoothly in all browsers Includes built-in reflection, dark & light modes, shadcn version npm install metal-fx

A new version of the Liquid Metal is available. Thanks to Martin Petercak the performance is much better and it should run smoothly in all browsers Includes built-in reflection, dark & light modes, shadcn version npm install metal-fx

Jakub Antalik

16,082 views • 3 months ago

600 SVGs available on Svgl 🥳🚀 ✓ Fully optimized ✓ React, Vue, Angular, Astro, Svelte & Web Components ✓ Add SVGs with the shadcn/ui CLI ✓ Free API ✓ Raycast extension, npm packages, and CLIs built by contributors and 100% free, open source ✨

600 SVGs available on Svgl 🥳🚀 ✓ Fully optimized ✓ React, Vue, Angular, Astro, Svelte & Web Components ✓ Add SVGs with the shadcn/ui CLI ✓ Free API ✓ Raycast extension, npm packages, and CLIs built by contributors and 100% free, open source ✨

Pablo

95,721 views • 5 months ago

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

I work with shadcn/ui every day. I design with it, I build with it, and I see a lot of projects built with it. And honestly? Many of them look the same. Or worse - they look broken. Colors that clash. Fonts that don't pair. Dark modes that feel like an afterthought. The components themselves are great. The theming that people or AI make? Not so much. So I built a tool to fix that. I just launched my shadcn theme generator that will allow you to ship beautiful shadcn/ui themes in just 3-4 clicks. What it does: - Creates your entire color palette from 1 color (your hex or any tailwind color) - Works for light and dark theme - Only includes fonts that actually look good in UI - Font pairings I curated myself - Works for any project - landing page, dashboard, store - Has a color contast checker for the entire palette Too lazy? Just use random theme feature Done? Copy and paste the CSS to your global.css file or import to our Figma kit.

Matt

77,902 views • 6 months ago

In the last 2 weeks I created AnimateCode, a keynote-inspired tool to create beautiful, easy-to-understand code animations. ◆ Create your slides just like in keynote ◆ Beautifully animate between slides Built with Next.js, Upstash and shadcn ui Lots of stuff to add like themes & fonts, but I really like where this is going. →

In the last 2 weeks I created AnimateCode, a keynote-inspired tool to create beautiful, easy-to-understand code animations. ◆ Create your slides just like in keynote ◆ Beautifully animate between slides Built with Next.js, Upstash and shadcn ui Lots of stuff to add like themes & fonts, but I really like where this is going. →

Josh tried coding

154,366 views • 2 years ago

What if we could animate theme transitions just like the OS does for dark and light mode? Well, now you can with Uniwind Pro 🥳 Enable smooth transitions directly from JS, from ANY theme to ANY theme (even OS triggered theme changes). The animation runs in Swift/Kotlin, while C++ handles the ShadowTree update

What if we could animate theme transitions just like the OS does for dark and light mode? Well, now you can with Uniwind Pro 🥳 Enable smooth transitions directly from JS, from ANY theme to ANY theme (even OS triggered theme changes). The animation runs in Swift/Kotlin, while C++ handles the ShadowTree update

Jacek

22,176 views • 9 months ago

🆕 Your AI Agent can now trade perps with up to 50x leverage Introducing Byreal Perps Skills ✨ With one prompt, your agent can autonomously scan the market for trade setups, manage your positions, and set TP/SL orders. Install ↓ npx skills add byreal-git/byreal-perps-cli

🆕 Your AI Agent can now trade perps with up to 50x leverage Introducing Byreal Perps Skills ✨ With one prompt, your agent can autonomously scan the market for trade setups, manage your positions, and set TP/SL orders. Install ↓ npx skills add byreal-git/byreal-perps-cli

Byreal

18,921 views • 4 months ago

Introducing: Superset CLI 🎮 Drive Superset from within the terminal, or sit back and let your agents do it 🏖️ Create workspaces, spin up agents, edit tasks, etc. All through the terminal, updates the app in real-time. Works with automation and remote workspaces. Teach it to your agents with skills: npx skills add Available now: brew install superset-sh/tap/superset

Introducing: Superset CLI 🎮 Drive Superset from within the terminal, or sit back and let your agents do it 🏖️ Create workspaces, spin up agents, edit tasks, etc. All through the terminal, updates the app in real-time. Works with automation and remote workspaces. Teach it to your agents with skills: npx skills add Available now: brew install superset-sh/tap/superset

Superset

19,847 views • 3 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

532,143 views • 3 years ago

Meet AMD Skills: A growing catalog of agent skills that helps AI coding assistants work more effectively with AMD hardware and software. Compatible with coding agents including Cursor, Claude Code, OpenAI Codex, and Gemini CLI, AMD Skills provides the knowledge, scripts, and best practices developers need to build faster on AMD. Why try it? → Install in seconds with the Skills CLI → Learn AMD best practices and workflows → Build AI applications from client to cloud → Pick only the skills you need Get started: npx skills add amd/skills Explore the project, install a skill, and let us know what you'd like to see next:

Meet AMD Skills: A growing catalog of agent skills that helps AI coding assistants work more effectively with AMD hardware and software. Compatible with coding agents including Cursor, Claude Code, OpenAI Codex, and Gemini CLI, AMD Skills provides the knowledge, scripts, and best practices developers need to build faster on AMD. Why try it? → Install in seconds with the Skills CLI → Learn AMD best practices and workflows → Build AI applications from client to cloud → Pick only the skills you need Get started: npx skills add amd/skills Explore the project, install a skill, and let us know what you'd like to see next:

AI at AMD

13,420 views • 22 days ago