Загрузка видео...

Не удалось загрузить видео

На главную

🖤 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 просмотров • 3 лет назад •via X (Twitter)

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

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Adham Dannaway
Adham Dannaway3 лет назад

Check out all the UI elements 👇

Фото профиля Aaron Iker ✨
Aaron Iker ✨3 лет назад

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

Фото профиля julie4055
julie40553 лет назад

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

Фото профиля Adham Dannaway
Adham Dannaway3 лет назад

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
Solt Wagner3 лет назад

Amazing 🙌🔥

Фото профиля Sa’ad
Sa’ad3 лет назад

Wow I love this

Фото профиля Adham Dannaway
Adham Dannaway3 лет назад

It's pretty cool 👍

Фото профиля Uiverse.io
Uiverse.io3 лет назад

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

Фото профиля Jaki
Jaki3 лет назад

@SaveToNotion #thread

Фото профиля Samuel Hoh
Samuel Hoh3 лет назад

@SaveToNotion #thread #ui

Похожие видео

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 просмотров • 2 лет назад

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 просмотров • 1 год назад

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 просмотров • 10 месяцев назад

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 просмотров • 5 месяцев назад

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 просмотров • 3 лет назад

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 просмотров • 3 лет назад

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

25,136 просмотров • 6 дней назад

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,334 просмотров • 2 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 5 месяцев назад

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 просмотров • 3 лет назад

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

82,707 просмотров • 24 дней назад

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

43,404 просмотров • 2 месяцев назад

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 просмотров • 1 год назад

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,391 просмотров • 3 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 14 дней назад

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.
0:33

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

Pratham

33,920 просмотров • 5 месяцев назад