Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Introducing our free Figma Kit for Nuxt UI V3 ✨ • Over 40 fully customizable components with props and slots • Local variables for colors, typography, and effects • Consistent shadow and border-radius system And much more! Made by Moriceau sarah 💚

nuxt_js's profile picture

Nuxt

104,377 subscribers

17,564 Aufrufe • vor 1 Jahr •via X (Twitter)

BildungKunstWissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

3 Kommentare

Profilbild von Nuxt
Nuxtvor 1 Jahr

Open it in Figma 👇

Profilbild von Eco Development Studios
Eco Development Studiosvor 1 Jahr

@moriceau_sarah Congrats for the design kit, it looks fantastic

Profilbild von Julian Pustkuchen
Julian Pustkuchenvor 1 Jahr

@moriceau_sarah Great work!! Is #penpot as open source alternative on the radar already, anyone?

Ähnliche Videos

Introducing ElevenLabs UI - open-source components for AI audio & voice agents. • 22 components & examples for chat interfaces, transcription, music, and more • Fully customizable • MIT licensed
0:21

Introducing ElevenLabs UI - open-source components for AI audio & voice agents. • 22 components & examples for chat interfaces, transcription, music, and more • Fully customizable • MIT licensed

ElevenLabs

241,934 Aufrufe • vor 10 Monaten

✨ Fresh look for the Nuxt Studio editor! And guess what? Vue component properties are now auto-generated as fully editable forms straight from your defineProps! Works like a charm with Nuxt UI components 💚
0:52

✨ Fresh look for the Nuxt Studio editor! And guess what? Vue component properties are now auto-generated as fully editable forms straight from your defineProps! Works like a charm with Nuxt UI components 💚

Nuxt Studio

11,600 Aufrufe • vor 1 Jahr

What if you could generate all your colors, typography styles, sizes, radii, and more as variables and tokens with just one click? No manual setup, in few minutes go from blank page to a solid design system foundation. With option to present everything nicely for dev doc and more. With this Figma plugin, it’s actually that simple. ✨
1:46

What if you could generate all your colors, typography styles, sizes, radii, and more as variables and tokens with just one click? No manual setup, in few minutes go from blank page to a solid design system foundation. With option to present everything nicely for dev doc and more. With this Figma plugin, it’s actually that simple. ✨

vijay verma

26,263 Aufrufe • vor 7 Monaten

Introducing Loading UI ⏳ if your loading state is just <Loader2 /> it's for you → 35+ components → shadcn compatible → simplest api, fully customizable free and open-source install, customize, plug-in check at loading-ui(.)com 🔥
0:24

Introducing Loading UI ⏳ if your loading state is just <Loader2 /> it's for you → 35+ components → shadcn compatible → simplest api, fully customizable free and open-source install, customize, plug-in check at loading-ui(.)com 🔥

Bart ⚡

105,876 Aufrufe • vor 4 Monaten

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,258 Aufrufe • vor 1 Jahr

Excited to share Kigen Design System Figma plugin✨ Over the years, I’ve helped lots of brands build their DS - mostly doing the same variables and styles repeatedly for start. I thought, why not automate this? So, for the past few months, I’ve been building, testing, and improving it. Right now, it generates colors, typography styles, sizes, radii, and more. Plus, there’s an option to present everything for documentation. Give it a try and let me know what you think! ....
1:47

Excited to share Kigen Design System Figma plugin✨ Over the years, I’ve helped lots of brands build their DS - mostly doing the same variables and styles repeatedly for start. I thought, why not automate this? So, for the past few months, I’ve been building, testing, and improving it. Right now, it generates colors, typography styles, sizes, radii, and more. Plus, there’s an option to present everything for documentation. Give it a try and let me know what you think! ....

vijay verma

66,483 Aufrufe • vor 1 Jahr

Introducing Plate: the modern rich-text editor for React. ◆ Core: Plugin system. ◆ Plugins: 50+ Headless, unstyled packages. ◆ Primitives: State and behavior hooks. ◆ Components: Radix by WorkOS + shadcn ui. Free. Open Source. Responsive. Dark Mode.
0:36

Introducing Plate: the modern rich-text editor for React. ◆ Core: Plugin system. ◆ Plugins: 50+ Headless, unstyled packages. ◆ Primitives: State and behavior hooks. ◆ Components: Radix by WorkOS + shadcn ui. Free. Open Source. Responsive. Dark Mode.

zbeyens

208,847 Aufrufe • vor 3 Jahren

🚀 Introducing NSUI – A collection of shadcn /UI marketing blocks! ✔️ Easy to install: Copy-paste, `shadcn add`, or Open in v0 ✔️ Fully responsive and customizable ✔️ Free & open-source Perfect for landing pages, SaaS sites, and more. Check it out! 👇
0:55

🚀 Introducing NSUI – A collection of shadcn /UI marketing blocks! ✔️ Easy to install: Copy-paste, `shadcn add`, or Open in v0 ✔️ Fully responsive and customizable ✔️ Free & open-source Perfect for landing pages, SaaS sites, and more. Check it out! 👇

irung

70,252 Aufrufe • vor 1 Jahr

My 4-hour Framer course is out and it's completely free! - Step-by-step and beginner-friendly - Extensive Figma to Framer workflow - Generate layouts with AI + experimentations - Effects, scroll interactions, animations, 3d - Components and lots of resources Final site: Figma template: Framer remix: Huge thanks to Framer for sponsoring this course!
3:07

My 4-hour Framer course is out and it's completely free! - Step-by-step and beginner-friendly - Extensive Figma to Framer workflow - Generate layouts with AI + experimentations - Effects, scroll interactions, animations, 3d - Components and lots of resources Final site: Figma template: Framer remix: Huge thanks to Framer for sponsoring this course!

Meng To

100,981 Aufrufe • vor 2 Jahren

Community, attention!🚨 We've fully supercharged our website and documentation to offer a superior experience. Our new hubs offer better interfaces, in-depth information for all components, interactive code samples, and much more. ✨ Check it out:
2:37

Community, attention!🚨 We've fully supercharged our website and documentation to offer a superior experience. Our new hubs offer better interfaces, in-depth information for all components, interactive code samples, and much more. ✨ Check it out:

Particle Network

160,751 Aufrufe • vor 2 Jahren

This is how we do it by the seaside 🌊 Introducing our third kit for the 2025/26 season, with the soundtrack provided by local up-and-coming hip-hop artist and Cherries fan Peaz 🍒
1:11

This is how we do it by the seaside 🌊 Introducing our third kit for the 2025/26 season, with the soundtrack provided by local up-and-coming hip-hop artist and Cherries fan Peaz 🍒

AFC Bournemouth 🍒

369,468 Aufrufe • vor 1 Jahr

App Showcase!✨ Introducing a fully functional crypto dashboard powered by our Third-Party API feature. This customizable dashboard lets users track their favorite tokens with live price updates and integrates TradingView’s advanced charting tools for in-depth technical analysis. With real-time insights, customizable indicators, and seamless API connections, it’s a comprehensive solution for crypto enthusiasts and developers looking to expand functionality.
0:20

App Showcase!✨ Introducing a fully functional crypto dashboard powered by our Third-Party API feature. This customizable dashboard lets users track their favorite tokens with live price updates and integrates TradingView’s advanced charting tools for in-depth technical analysis. With real-time insights, customizable indicators, and seamless API connections, it’s a comprehensive solution for crypto enthusiasts and developers looking to expand functionality.

ALCHEMIST AI 🔮

26,678 Aufrufe • vor 1 Jahr

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.
2:55

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,497 Aufrufe • vor 1 Jahr

App Showcase!✨ Create a Game. Zero Code. Introducing Dungeon Explorer, a fully functional interactive shooter game along with customizable game design elements such as Inventory Management System, Weapon System, Simulation Distance, Procedural Generation and more. Our Multi-AI framework in V2 intelligently delegates game components—such as logic, rendering, and mechanics. This results in faster logic generation, smoother gameplay, and an overall richer user experience. Alchemist AI empowers anyone, regardless of coding knowledge, to turn their ideas into fully realized applications and games.
0:23

App Showcase!✨ Create a Game. Zero Code. Introducing Dungeon Explorer, a fully functional interactive shooter game along with customizable game design elements such as Inventory Management System, Weapon System, Simulation Distance, Procedural Generation and more. Our Multi-AI framework in V2 intelligently delegates game components—such as logic, rendering, and mechanics. This results in faster logic generation, smoother gameplay, and an overall richer user experience. Alchemist AI empowers anyone, regardless of coding knowledge, to turn their ideas into fully realized applications and games.

ALCHEMIST AI 🔮

34,139 Aufrufe • vor 1 Jahr

Celebrating +1.1K users of our Figma plugin, on our first week, increasing AI credits by x2.5 for free and paid users. 🥁 Introducing ⎯ 'Presets' for Image gen and Structure. You can now turn your vectors into 3D rendered marketing assets with only 2 clicks, literally... 🧵
0:46

Celebrating +1.1K users of our Figma plugin, on our first week, increasing AI credits by x2.5 for free and paid users. 🥁 Introducing ⎯ 'Presets' for Image gen and Structure. You can now turn your vectors into 3D rendered marketing assets with only 2 clicks, literally... 🧵

Hüseyin Gayıran

18,396 Aufrufe • vor 1 Jahr

Stop begging for testnet ETH! ✨ Originally designed to make testnets free for developers and erase faucets from existence, our plugin has evolved to fully support account abstraction! Introducing hardhat-account-abstraction, read more below and check out the demo!
0:21

Stop begging for testnet ETH! ✨ Originally designed to make testnets free for developers and erase faucets from existence, our plugin has evolved to fully support account abstraction! Introducing hardhat-account-abstraction, read more below and check out the demo!

Wonderland

20,546 Aufrufe • vor 2 Jahren

🔮 Introducing dash dot fun - the homepage of crypto Welcome to your unified personalized crypto dashboard for token discovery, research, and trading. Built and powered by AI agents on OpenServ, customizable with simple drag & drop UI. No more tab switching. No more missed opportunities. Just crypto, simplified.
0:55

🔮 Introducing dash dot fun - the homepage of crypto Welcome to your unified personalized crypto dashboard for token discovery, research, and trading. Built and powered by AI agents on OpenServ, customizable with simple drag & drop UI. No more tab switching. No more missed opportunities. Just crypto, simplified.

OpenServ

26,548 Aufrufe • vor 1 Jahr

Introducing Izzpresso ☕️. Made with our house roasted coffee beans and sealed for freshness. These pods contain nothing but our best coffee. Many of our customers have the pod machines and looked to us for a more local and ethical solution. Nespresso is on the BDS list. 🇮🇪❤️🇵🇸
0:28

Introducing Izzpresso ☕️. Made with our house roasted coffee beans and sealed for freshness. These pods contain nothing but our best coffee. Many of our customers have the pod machines and looked to us for a more local and ethical solution. Nespresso is on the BDS list. 🇮🇪❤️🇵🇸

Izz Cafe

27,512 Aufrufe • vor 1 Jahr

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!
0:36

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!

Matt

44,889 Aufrufe • vor 10 Monaten

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys
0:29

My Figma to AI Code plugin is live Turn your designs into production-level code generated by Claude AI. Create React components, SwiftUI prototypes, HTML+CSS pages, Tailwind styles with custom prompts. Preview for responsiveness and export fully working code to Cursor and Xcode. It's free with your own API keys

Meng To

76,156 Aufrufe • vor 1 Jahr