Loading video...

Video Failed to Load

Go Home

✨ Introducing Magic UI 🪄 A UI library of animated components to build beautiful landing pages. Built using React, Tailwind CSS and Framer motion. 100% Free and Open Source.

dillionverma's profile picture

Dillion

16,004 subscribers

325,302 views • 2 years ago •via X (Twitter)

EducationScience & TechnologyArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.
0:10

✨ Introducing Portfolio A simple template to build a minimal personal site + dev blog Built using React, Tailwind CSS, shadcn and Magic UI 100% Free and Open Source.

Dillion

90,184 views • 2 years ago

✨ Introducing Mobile A beautiful landing page template for your mobile app Built using Next.js, Tailwind CSS, shadcn and Magic UI
0:13

✨ Introducing Mobile A beautiful landing page template for your mobile app Built using Next.js, Tailwind CSS, shadcn and Magic UI

Dillion

75,602 views • 1 year ago

Introducing Motion-Primitives: a collection of reusable animated components built with Framer Motion and Tailwind CSS.
0:15

Introducing Motion-Primitives: a collection of reusable animated components built with Framer Motion and Tailwind CSS.

Ibelick

89,015 views • 2 years ago

I stopped collecting random inspo. These are the only UI + vibecoding resources I keep opening. 1. EvilCharts — animated React charts for dashboards 2. Rewamp UI — free open-source components, blocks, and landing pages 3. Refero — real product UI patterns and screens for reference 4. Bencho — AI product UI components for faster builds 5. Inspora — design inspiration for modern product UI 6. Neuform — design-to-code resources for AI UI work 7. Open Design — DESIGN.md resources so AI builds with clearer UI rules Save this before your next build 👀
0:19

I stopped collecting random inspo. These are the only UI + vibecoding resources I keep opening. 1. EvilCharts — animated React charts for dashboards 2. Rewamp UI — free open-source components, blocks, and landing pages 3. Refero — real product UI patterns and screens for reference 4. Bencho — AI product UI components for faster builds 5. Inspora — design inspiration for modern product UI 6. Neuform — design-to-code resources for AI UI work 7. Open Design — DESIGN.md resources so AI builds with clearer UI rules Save this before your next build 👀

Hey Detya

47,687 views • 5 days ago

Introducing pdfcn Build beautiful PDFs like you build your UI. Powered by Takumi + Forme. Pick from 10+ themes, 40+ components & blocks, then customize everything. One command to get started. shadcn/ui compatible. 100% Free. Open source.
0:15

Introducing pdfcn Build beautiful PDFs like you build your UI. Powered by Takumi + Forme. Pick from 10+ themes, 40+ components & blocks, then customize everything. One command to get started. shadcn/ui compatible. 100% Free. Open source.

Shadcn Labs

172,645 views • 5 days ago

The best UI components ready to use, save this 👇 — Interactive UI effects & animations — Smooth transitions and micro-interactions — 170+ customizable React components — Animated components with beautiful motion — Clean, accessible React components Interactive components with polished animations Fluid motion powered by physics — 1,000+ AI-ready UI components — Stunning components for AI products What Did I Miss?
0:19

The best UI components ready to use, save this 👇 — Interactive UI effects & animations — Smooth transitions and micro-interactions — 170+ customizable React components — Animated components with beautiful motion — Clean, accessible React components Interactive components with polished animations Fluid motion powered by physics — 1,000+ AI-ready UI components — Stunning components for AI products What Did I Miss?

Nero

46,324 views • 20 days ago

Must-know open-source tools for coders and makers - open source library of 30 toggles - react gamification ui components - saas starter kit nextjs + tanstack - open source google analytics/ mixpanel alternative - design engineered data visualization components
0:14

Must-know open-source tools for coders and makers - open source library of 30 toggles - react gamification ui components - saas starter kit nextjs + tanstack - open source google analytics/ mixpanel alternative - design engineered data visualization components

Csaba Kissi

49,020 views • 3 months ago

Introducing ogimagecn Build OG images like you build your UI. Powered by Satori. Pick from 20+ ready-to-use image components you can copy, tweak, and make your own. One command to get started. shadcn/ui compatible. 100% Free. Open source.
0:15

Introducing ogimagecn Build OG images like you build your UI. Powered by Satori. Pick from 20+ ready-to-use image components you can copy, tweak, and make your own. One command to get started. shadcn/ui compatible. 100% Free. Open source.

Shadcn Labs

10,670 views • 3 days ago

Open-source GitHub alternative just dropped → Landing page built with Next.js, Tailwind CSS and Rive 🔥
0:11

Open-source GitHub alternative just dropped → Landing page built with Next.js, Tailwind CSS and Rive 🔥

Steven Tey

103,872 views • 3 years ago

🚀 The new open-source layout is here! A beautiful crypto wallet UI built with shadcn/ui and Origin UI!
0:13

🚀 The new open-source layout is here! A beautiful crypto wallet UI built with shadcn/ui and Origin UI!

Pasquale Vitiello

23,252 views • 1 year ago

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer
0:11

A list (with code) of cool framer-motion and Tailwind CSS components from around the internet ✨ 1️⃣ Tooltip A simple and elegant tooltip component that follows the mouse pointer

Aceternity

43,391 views • 3 years ago

The best UI components ready to use, save this 👇 - free animated component library - Animated thinking orb component - essential transitions for web apps - crafted UI for AI-native interfaces. - huge community library - The React component library - patterns from 95 design systems - Annotate your UI. Guide your coding agent What Did I Miss?
0:16

The best UI components ready to use, save this 👇 - free animated component library - Animated thinking orb component - essential transitions for web apps - crafted UI for AI-native interfaces. - huge community library - The React component library - patterns from 95 design systems - Annotate your UI. Guide your coding agent What Did I Miss?

Nero

95,343 views • 1 month ago

Publino – Next.js Saas Landing Page Template built with - Next.js 16 & React 19 - Tailwind CSS - Framer Motion - Next-intl (RTL support) Comes with Modern hero section, Dark / Light mode, i18n (EN + AR), Pricing , Contact pages, SEO-ready setup, 3D globe, Charts & animations. Demo + Source Code (First comment) 👇
0:17

Publino – Next.js Saas Landing Page Template built with - Next.js 16 & React 19 - Tailwind CSS - Framer Motion - Next-intl (RTL support) Comes with Modern hero section, Dark / Light mode, i18n (EN + AR), Pricing , Contact pages, SEO-ready setup, 3D globe, Charts & animations. Demo + Source Code (First comment) 👇

Mohamed Djoudir

34,712 views • 8 months ago

Introducing Voice Nav - navigate any website with your voice. Coming soon as part of ElevenLabs UI: an open-source library of audio & agent components for the web.
0:11

Introducing Voice Nav - navigate any website with your voice. Coming soon as part of ElevenLabs UI: an open-source library of audio & agent components for the web.

Louis

78,532 views • 1 year ago

This is how frontend should be built in 2025. With 21stdev Magic UI MCP + Cline, describe what you need and get beautiful components instantly. It taps into a curated library of professional UI elements at conversation speed. Here's how you can use it 🧵
0:19

This is how frontend should be built in 2025. With 21stdev Magic UI MCP + Cline, describe what you need and get beautiful components instantly. It taps into a curated library of professional UI elements at conversation speed. Here's how you can use it 🧵

Cline

110,058 views • 1 year ago

If you design or vibe code, save this list. - Kokonut UI; animated React components - Motion Sites; website and animation inspiration - Motion .dev; web animation - Anime .js; JavaScript animation - Particles Casberry; interactive particles and WebGL effects Useful for both design and build.
0:16

If you design or vibe code, save this list. - Kokonut UI; animated React components - Motion Sites; website and animation inspiration - Motion .dev; web animation - Anime .js; JavaScript animation - Particles Casberry; interactive particles and WebGL effects Useful for both design and build.

Manish Kumar

23,131 views • 1 month ago

Introducing Kibo UI Blocks — a new series of shadcn inspired blocks for building interfaces with Kibo components! Copy and paste into your app. As always, open source and free forever. Here's a list of blocks we're launching with 👇🧵
0:19

Introducing Kibo UI Blocks — a new series of shadcn inspired blocks for building interfaces with Kibo components! Copy and paste into your app. As always, open source and free forever. Here's a list of blocks we're launching with 👇🧵

Hayden

91,003 views • 1 year ago

Introducing a library to make tailwind DX so much better... typewind ✨ The magic of Tailwind combined with the safety of Typescript
0:13

Introducing a library to make tailwind DX so much better... typewind ✨ The magic of Tailwind combined with the safety of Typescript

Mokshit Jain

458,767 views • 3 years ago

UI design checklist A massive collection of the best practices for everything related to UI design—components, pages, user flows and branding. 🖋️ by George Hatzis
0:10

UI design checklist A massive collection of the best practices for everything related to UI design—components, pages, user flows and branding. 🖋️ by George Hatzis

Nick Babich

71,611 views • 2 years ago