Loading video...

Video Failed to Load

Go Home

🖤 UI-verse 👉 851 open-source UI elements for any project ◆ 100% free for personal or commercial use ◆ Made with HTML & CSS ◆ Created by a community of over 10,000 contributors #design #uxui #ui #html #css #uidesign #components

AdhamDannaway's profile picture

Adham Dannaway

59,387 subscribers

72,032 views • 3 years ago •via X (Twitter)

#design#uxui#ui#html#css#uidesign#components
LIVE

Anya Rossi• Live Now

Private livecam show

10 Comments

Adham Dannaway's profile picture
Adham Dannaway3 years ago

Check out all the UI elements 👇

Aaron Iker ✨'s profile picture
Aaron Iker ✨3 years ago

Saw a lot of my original @CodePen pens (and from others) copied 1:1 without any reference - thats kinda lame - example profiles - -

julie4055's profile picture
julie40553 years ago

Wow, those look amazing 🤩! If I wanted to design my own set of components where should I start?

Adham Dannaway's profile picture
Adham Dannaway3 years ago

Starting with a @figma UI kit like @UntitledUI could save lots of time and you'd also learn a lot about how to design and build components 👍

Solt Wagner's profile picture
Solt Wagner3 years ago

Amazing 🙌🔥

Sa’ad's profile picture
Sa’ad3 years ago

Wow I love this

Adham Dannaway's profile picture
Adham Dannaway3 years ago

It's pretty cool 👍

Uiverse.io's profile picture
Uiverse.io3 years ago

Wow thanks for sharing our app ! We now have a Twitter account 🔥

Jaki's profile picture
Jaki3 years ago

@SaveToNotion #thread

Samuel Hoh's profile picture
Samuel Hoh3 years ago

@SaveToNotion #thread #ui

Related Videos

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)
0:20

UI Components Handbook Collection of popular user interface components with guides on how to use them, Figma design samples & code snippets (HTML/Tailwind CSS)

Nick Babich

120,191 views • 2 years ago

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

Open-source and free apps for coders - 5000+ Open-source SVG icons - Open-source CSS animated buttons - 60 components, 2,671 examples. - Free motion effects - Open-source modern UI components
0:37

Open-source and free apps for coders - 5000+ Open-source SVG icons - Open-source CSS animated buttons - 60 components, 2,671 examples. - Free motion effects - Open-source modern UI components

Csaba Kissi

60,959 views • 4 days ago

Introducing HeseUI - Foundation components built on Base UI I created this project for personal use and rebranded it today. - Uses shadcn design system and registry - Built on growing base-ui - Responsive, optimized components - v0 supported Check it out below 👇
0:35

Introducing HeseUI - Foundation components built on Base UI I created this project for personal use and rebranded it today. - Uses shadcn design system and registry - Built on growing base-ui - Responsive, optimized components - v0 supported Check it out below 👇

preet

20,452 views • 10 months 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 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 views • 3 years ago

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

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

667,050 views • 3 years ago

Open-source and free apps for coders and makers - CSS Text effects with AI prompts - Open-source self-hosted dashboard for Amazon SES - Free directory of public APIs - Open-source security framework - UI library for building terminal user interfaces
0:35

Open-source and free apps for coders and makers - CSS Text effects with AI prompts - Open-source self-hosted dashboard for Amazon SES - Free directory of public APIs - Open-source security framework - UI library for building terminal user interfaces

Csaba Kissi

26,553 views • 10 days ago

introducing 2 free (handmade) UI templates for you to use for your web applications built on top of shadcn ui & fully open source
0:24

introducing 2 free (handmade) UI templates for you to use for your web applications built on top of shadcn ui & fully open source

Micky

42,417 views • 2 months 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 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,805 views • 5 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. ⬇️
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,753 views • 3 years ago

If you want to design faster in Figma, Use blocks. → A free library of ready-to-use Figma UI blocks. Copy any component, paste it into your file, and start building instantly. Perfect for landing pages, layouts, and UI sections. Use it for: • landing page sections • UI components • layout structures • quick prototypes • design inspiration you can actually use Stop designing everything from scratch.
1:14

If you want to design faster in Figma, Use blocks. → A free library of ready-to-use Figma UI blocks. Copy any component, paste it into your file, and start building instantly. Perfect for landing pages, layouts, and UI sections. Use it for: • landing page sections • UI components • layout structures • quick prototypes • design inspiration you can actually use Stop designing everything from scratch.

Kailash

83,767 views • 28 days ago

Introducing 21st Agent Elements Diffed edits. Plan approvals. Clarifying questions. Sub-agents. Tool cards. The pieces every "agent UI" lib skips. 25 shadcn /ui components built for the new generation of agents that use your computer. Open-source. Link in thread 🧵
0:28

Introducing 21st Agent Elements Diffed edits. Plan approvals. Clarifying questions. Sub-agents. Tool cards. The pieces every "agent UI" lib skips. 25 shadcn /ui components built for the new generation of agents that use your computer. Open-source. Link in thread 🧵

serafim

44,036 views • 2 months ago

2advanced UI/HUD/FUI Tech Volume 1: "Ultraglyph©" Vector Kit - A Resource for Designers + Motion Artists Get Ultraglyph© here: 500+ Elements [EPS, AI, PNG, SVG]. FREE for all paid-tier Patreon members. Non-members + free members use Black Friday discount code: "D94C0" for 20% off until Monday. #vector #kit #vectorkit #ui #uidesign #design #graphicdesign #illustrator #motiondesign #motiongraphics #symbols #elements
0:59

2advanced UI/HUD/FUI Tech Volume 1: "Ultraglyph©" Vector Kit - A Resource for Designers + Motion Artists Get Ultraglyph© here: 500+ Elements [EPS, AI, PNG, SVG]. FREE for all paid-tier Patreon members. Non-members + free members use Black Friday discount code: "D94C0" for 20% off until Monday. #vector #kit #vectorkit #ui #uidesign #design #graphicdesign #illustrator #motiondesign #motiongraphics #symbols #elements

2Advanced Studios

86,004 views • 1 year 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 ✨
0:25

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

Finally, we have published Horizon OS UI Set for ISDK-Unity and Figma with the Interaction SDK v69 release on 10/9! This is our first public release of official UI components and design resources based on the Quest Design System. UI Set for Meta XR Interaction SDK: Figma Design file: By using UI Set, you can achieve consistent input modality support, visual feedback, and interaction behaviors. In addition to UI components and common UI pattern examples, theming capability can help you bring your own brand identity into your UI. We hope these UI Set Unity components + Figma design assets + Guideline docs - can help you designers, developers, and creators design, experiment, and build great spatial app experiences for Horizon OS platform. Including a personal blog post - How to build a simple spatial panel app with Meta Horizon OS UI Set, an image viewer with NASA Mars Rover API: #MetaQuest #MixedReality #MetaHorizonOS #InteractionSDK #MetaXRSDK #SpatialComputing
0:44

Finally, we have published Horizon OS UI Set for ISDK-Unity and Figma with the Interaction SDK v69 release on 10/9! This is our first public release of official UI components and design resources based on the Quest Design System. UI Set for Meta XR Interaction SDK: Figma Design file: By using UI Set, you can achieve consistent input modality support, visual feedback, and interaction behaviors. In addition to UI components and common UI pattern examples, theming capability can help you bring your own brand identity into your UI. We hope these UI Set Unity components + Figma design assets + Guideline docs - can help you designers, developers, and creators design, experiment, and build great spatial app experiences for Horizon OS platform. Including a personal blog post - How to build a simple spatial panel app with Meta Horizon OS UI Set, an image viewer with NASA Mars Rover API: #MetaQuest #MixedReality #MetaHorizonOS #InteractionSDK #MetaXRSDK #SpatialComputing

Yoon Park (박동윤)

59,115 views • 1 year ago

Awesome free apps for coders. - Free domain rating tracker - Free domain lookup monitoring - Find a replacement for npm packages - Open source Markdown-based typesetting system - Animate your UI with React components
0:32

Awesome free apps for coders. - Free domain rating tracker - Free domain lookup monitoring - Find a replacement for npm packages - Open source Markdown-based typesetting system - Animate your UI with React components

Csaba Kissi

18,452 views • 18 days ago