Loading video...

Video Failed to Load

Go Home

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' 🔗:

legionsdev's profile picture

Gurbinder

5,572 subscribers

12,987 views • 11 months ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

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

Chánh Đại

11,928 views • 3 months ago

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

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

Gurbinder

77,714 views • 2 months 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
0:30

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 • 3 months ago

this one of the best way to show pricing plans on mobile built by Watermelon UI npx shadcn add .watermelon.sh/r/changeable-pricing-section.json
0:21

this one of the best way to show pricing plans on mobile built by Watermelon UI npx shadcn add .watermelon.sh/r/changeable-pricing-section.json

Ali Bey

57,509 views • 2 months 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 👀
1:08

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 • 1 year ago

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 views • 5 months ago

Introducing the open-source Next.js Audio Starter Kit Add Text to Speech, Speech to Text, Sound Effects and Conversational AI to your product in minutes. Built with: • ElevenLabs SDK • Next.js + shadcn/ui • Tailwind CSS v4 Repo link in the comments below:
1:01

Introducing the open-source Next.js Audio Starter Kit Add Text to Speech, Speech to Text, Sound Effects and Conversational AI to your product in minutes. Built with: • ElevenLabs SDK • Next.js + shadcn/ui • Tailwind CSS v4 Repo link in the comments below:

ElevenLabs Developers

145,836 views • 1 year 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. →
0:43

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

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic
0:47

Introducing Prism UI ✨ A UI library built on top of shadcn components to create beautiful pages 🪄 Animated components that are build on shadcn, Tailwind CSS and framer motion. 100% Free and Open Source I have drawn inspiration from two main sources ◆ shadcn - The foundation and the 🐐 ◆ Steven Tey - The clean, modern UI/UX seen in dub has been a huge inspiration Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry (framer motion) This was my holiday project - Hope you like it 🖤 #opensource #buildinpublic

CodeHagen

241,425 views • 1 year ago

Introducing Zeego 2: dropdown & context menus that work everywhere → Pure Radix UI on Web → react-native-web dependency dropped → Works with Tailwind, shadcn UI, pure CSS, etc. → Native menu on iOS & Android → Works in web-only codebases with zero config yarn add zeego
7:09

Introducing Zeego 2: dropdown & context menus that work everywhere → Pure Radix UI on Web → react-native-web dependency dropped → Works with Tailwind, shadcn UI, pure CSS, etc. → Native menu on iOS & Android → Works in web-only codebases with zero config yarn add zeego

Fernando Rojo

46,219 views • 1 year ago

To add onto my point. This website took ca 2 hours to design + build out with claude - and it has infinitely more opportunity (with my lacking knowledge) for growth and improvement. Built using shadcn + agentation + a bit of messing around in figma.
0:23

To add onto my point. This website took ca 2 hours to design + build out with claude - and it has infinitely more opportunity (with my lacking knowledge) for growth and improvement. Built using shadcn + agentation + a bit of messing around in figma.

kosta4a

23,323 views • 3 months ago

so i got tired of googling "free UI click sound mp3" every time i needed sounds for a project built soundcn - 700+ free UI (gaming, notification, retro, voiceover) sounds you can drop into any react app with one command: npx shadcn add @soundcn/click-soft no npm packages, no audio files to manage. just a .ts file with inline base64 audio. zero deps
2:08

so i got tired of googling "free UI click sound mp3" every time i needed sounds for a project built soundcn - 700+ free UI (gaming, notification, retro, voiceover) sounds you can drop into any react app with one command: npx shadcn add @soundcn/click-soft no npm packages, no audio files to manage. just a .ts file with inline base64 audio. zero deps

KapishDima

61,858 views • 5 months ago

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic
0:20

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

CodeHagen

16,258 views • 1 year 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.
1:15

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,738 views • 4 months ago

I made this in 2 hours 🤯 Been playing with v0 and Cursor last night just to see how fast we can make an app. So i made something for people doing house listings 🏠 ◆ Add photos 📸 ◆ Generate descriptions of the photo 💭 ◆ Add appraisal report 📃 ◆ Generate the description of the property 📝 For the AI i used Langbase. Fast to setup, and you can try different models fast 🔥 And of course, the components as always, from shadcn Btw, code is going to be Open-Source. Vercel NextAuth.js Prisma Postgres shadcn Neon Postgres Resend Tailwind CSS v0 #opensource #buildinpublic #proptech
0:26

I made this in 2 hours 🤯 Been playing with v0 and Cursor last night just to see how fast we can make an app. So i made something for people doing house listings 🏠 ◆ Add photos 📸 ◆ Generate descriptions of the photo 💭 ◆ Add appraisal report 📃 ◆ Generate the description of the property 📝 For the AI i used Langbase. Fast to setup, and you can try different models fast 🔥 And of course, the components as always, from shadcn Btw, code is going to be Open-Source. Vercel NextAuth.js Prisma Postgres shadcn Neon Postgres Resend Tailwind CSS v0 #opensource #buildinpublic #proptech

CodeHagen

177,326 views • 1 year ago

🔥 Introducing SoSoValue’s Watchlist Your all-in-one crypto research cockpit. Tired of juggling endless tabs just to keep up with the market? Now everything you need lives in one sleek, customizable dashboard: ✅ Add coins or indexes in seconds Build your personal research hub effortlessly. ✅ Track any timeframe (1h–1y) From day traders to long-term holders — stay in control. ✅ K-lines, reports, tokenomics Charts, fundamentals, and deep dives — one tap, zero hassle. ✅ Custom layouts & lists Tailor your setup, stay perfectly organized. 👉 Experience smarter, cleaner crypto research today: #SoSoValue #Watchlist #CryptoResearch #TradingTools
1:30

🔥 Introducing SoSoValue’s Watchlist Your all-in-one crypto research cockpit. Tired of juggling endless tabs just to keep up with the market? Now everything you need lives in one sleek, customizable dashboard: ✅ Add coins or indexes in seconds Build your personal research hub effortlessly. ✅ Track any timeframe (1h–1y) From day traders to long-term holders — stay in control. ✅ K-lines, reports, tokenomics Charts, fundamentals, and deep dives — one tap, zero hassle. ✅ Custom layouts & lists Tailor your setup, stay perfectly organized. 👉 Experience smarter, cleaner crypto research today: #SoSoValue #Watchlist #CryptoResearch #TradingTools

SoSoValue

128,209 views • 10 months ago

Introducing Ferix - the skill issue killer. Ferix is built around Vercel's ‘npx skills’ command which Guillermo Rauch announced yesterday. Skills are stored in repositories on GitHub which means finding the skills you need for your project isn’t intuitive and you have to go searching. Ferix fixes this problem and acts as a central hub for all skill repositories. You an add a repository in 5 seconds and easily view it’s contents. So far I’ve added Better Auth, Expo & Vercel's agent skills but any user can add a supported repository. Let me know what you think and anything that can be improved! Autumn skills coming soon👀
1:06

Introducing Ferix - the skill issue killer. Ferix is built around Vercel's ‘npx skills’ command which Guillermo Rauch announced yesterday. Skills are stored in repositories on GitHub which means finding the skills you need for your project isn’t intuitive and you have to go searching. Ferix fixes this problem and acts as a central hub for all skill repositories. You an add a repository in 5 seconds and easily view it’s contents. So far I’ve added Better Auth, Expo & Vercel's agent skills but any user can add a supported repository. Let me know what you think and anything that can be improved! Autumn skills coming soon👀

Charlie Lamb

35,704 views • 6 months ago

$TETSUO Phantom Wallet - Cyberpunk Browser Extension for Crypto Experience blockchain through the lens of Tetsuo Phantom Wallet, now a sleek browser extension: - Tech: Built with React, integrates Phantom Wallet. - Features: Glitch effects, real-time market updates. - Security: Safe with sanitized inputs. - Aesthetic: Cyberpunk-themed UI. Key Points: - Connectivity: Glitchy animations for wallet actions. - Market Data: Fresh every 10 seconds. - Design: Dark, responsive, immersive. Tetsuo brings the raw edge of "Akira" to your crypto management. Try It Soon: Add the extension to your browser. Connect and glitch into the blockchain.
1:07

$TETSUO Phantom Wallet - Cyberpunk Browser Extension for Crypto Experience blockchain through the lens of Tetsuo Phantom Wallet, now a sleek browser extension: - Tech: Built with React, integrates Phantom Wallet. - Features: Glitch effects, real-time market updates. - Security: Safe with sanitized inputs. - Aesthetic: Cyberpunk-themed UI. Key Points: - Connectivity: Glitchy animations for wallet actions. - Market Data: Fresh every 10 seconds. - Design: Dark, responsive, immersive. Tetsuo brings the raw edge of "Akira" to your crypto management. Try It Soon: Add the extension to your browser. Connect and glitch into the blockchain.

BEELD 🐝/acc

27,512 views • 1 year ago

📄 Take Control of Your Documents with FileProtector! Every PDF you share is valuable. Don’t let it get misused. FileProtector gives you instant protection: • Lock access with strong passwords • Restrict copying, printing, or downloading • Add custom watermarks to prove ownership Secure your files in seconds. Try FileProtector now on the Solidus AI Tech Ai Marketplace. 🔗 Get started:
1:22

📄 Take Control of Your Documents with FileProtector! Every PDF you share is valuable. Don’t let it get misused. FileProtector gives you instant protection: • Lock access with strong passwords • Restrict copying, printing, or downloading • Add custom watermarks to prove ownership Secure your files in seconds. Try FileProtector now on the Solidus AI Tech Ai Marketplace. 🔗 Get started:

AITECH CLOUD NETWORK

47,832 views • 10 months ago

🎓 Learn how to create a Cherry Wood Material in a matter of seconds in my latest video series (AAA) Pro Tips! ____________________________________________________ In this video, the steps are as follows: 1. Create a slightly red-colored fill layer with high gloss to act as the woods base material. 2. Add a second fill layer with a black mask, and inside that mask add a stripes greyscale set to planar projection. These stripes will act as the wood rings and should be projected onto your mesh in a natural way. The stripes should also be set to max softness, and followed by a Directional Noise 3 with a blend mode set to Difference. 3. Add a levels to tweak the mask and add an anchor point to the mask as well. 4. Create another fill layer with a dark brown diffuse, and store the information from the anchor point into its mask. Apply a levels to increase its intensity, and then add a fill layer up top with the anchorpoint information applied again, but set its blending mode to Subtract. 5. Create an additional fill layer with a very dark diffuse channel. Add a mask to the fill layer and inside its mask add a fill layer containing the anchorpoint information, from the Wood Rings. This fill layer can now be used to add some dark contrast to the center of the wood rings 6. A warp filter should also be used to apply some subtle imperfections to the wood rings and grain. Now we are left with a very nice result of Cherry wood! ____________________________________________________ More AAA Game Dev Tips can be found on my YouTube channel here: Stay tuned for more weekly Tips. Let me know below what you would like to learn in future videos! 👇 Happy Texturing! 💚 #gameart #texturing
1:00

🎓 Learn how to create a Cherry Wood Material in a matter of seconds in my latest video series (AAA) Pro Tips! ____________________________________________________ In this video, the steps are as follows: 1. Create a slightly red-colored fill layer with high gloss to act as the woods base material. 2. Add a second fill layer with a black mask, and inside that mask add a stripes greyscale set to planar projection. These stripes will act as the wood rings and should be projected onto your mesh in a natural way. The stripes should also be set to max softness, and followed by a Directional Noise 3 with a blend mode set to Difference. 3. Add a levels to tweak the mask and add an anchor point to the mask as well. 4. Create another fill layer with a dark brown diffuse, and store the information from the anchor point into its mask. Apply a levels to increase its intensity, and then add a fill layer up top with the anchorpoint information applied again, but set its blending mode to Subtract. 5. Create an additional fill layer with a very dark diffuse channel. Add a mask to the fill layer and inside its mask add a fill layer containing the anchorpoint information, from the Wood Rings. This fill layer can now be used to add some dark contrast to the center of the wood rings 6. A warp filter should also be used to apply some subtle imperfections to the wood rings and grain. Now we are left with a very nice result of Cherry wood! ____________________________________________________ More AAA Game Dev Tips can be found on my YouTube channel here: Stay tuned for more weekly Tips. Let me know below what you would like to learn in future videos! 👇 Happy Texturing! 💚 #gameart #texturing

Cohen Brawley

25,184 views • 2 years ago