Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

✨ 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 💚

nuxtstudio's profile picture

Nuxt Studio

5,733 subscribers

11,600 görüntüleme • 1 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

3 Yorum

Michel Edighoffer profil fotoğrafı
Michel Edighoffer1 yıl önce

It would be nice to reduce the opacity of editable elements not shown in the viewport

Aaron profil fotoğrafı
Aaron1 yıl önce

Damn this is wild

Niklas profil fotoğrafı
Niklas1 yıl önce

Thats crazy! I want to know how that works behind the scenes so bad

Benzer Videolar

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 💚
1:41

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

17,564 görüntüleme • 1 yıl önce

A message from the Nuxt core team lead just came in! 🚀 Hear directly from Daniel Roe about the powerful synergy between Nuxt and Vite ⚡, and what relying on Vite as a build tool unlocks for the Vue-based metaframework. Time to meet the Vite community and learn from the experts!
1:06

A message from the Nuxt core team lead just came in! 🚀 Hear directly from Daniel Roe about the powerful synergy between Nuxt and Vite ⚡, and what relying on Vite as a build tool unlocks for the Vue-based metaframework. Time to meet the Vite community and learn from the experts!

ViteConf

10,920 görüntüleme • 11 ay önce

🚀 Announcing Ark UI Ark™ The robust headless UI component library, built with State machines 🥳💪✨ 🔸Over 30+ components (ColorPicker, DatePicker, and more...) 🔸Works in React, Solid, and Vue 🔸Bring your own styling solution
1:25

🚀 Announcing Ark UI Ark™ The robust headless UI component library, built with State machines 🥳💪✨ 🔸Over 30+ components (ColorPicker, DatePicker, and more...) 🔸Works in React, Solid, and Vue 🔸Bring your own styling solution

Sage ⚡️

159,252 görüntüleme • 2 yıl önce

Real-time accessibility checks directly in Nuxt DevTools are now a reality. Check out the Nuxt A11y module. It’s built on axe-core and scans your app as you navigate, highlighting WCAG issues directly on the page with zero production impact. By helping teams catch issues early, this module has the potential to make countless Nuxt apps more inclusive by default. Tim Damen 🇳🇱 explains how it works. ▶️
1:55

Real-time accessibility checks directly in Nuxt DevTools are now a reality. Check out the Nuxt A11y module. It’s built on axe-core and scans your app as you navigate, highlighting WCAG issues directly on the page with zero production impact. By helping teams catch issues early, this module has the potential to make countless Nuxt apps more inclusive by default. Tim Damen 🇳🇱 explains how it works. ▶️

GitHub

34,143 görüntüleme • 4 ay önce

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.
0:56

Now that Laravel ships with shadcn/ui, we can use the cli to add components, pages, themes from remote registries. Need a Products page for your dashboard? One command adds the page, component and all dependencies to your codebase.

shadcn

52,962 görüntüleme • 1 yıl önce

You can now dynamically control filter, sort, and limit settings on Collection lists — all through component properties (including a new Number prop type 🙌). Here’s what this means for your workflow: ✨ Easily reuse the same Collection list component in multiple contexts — with different content 🔧 Marketers are empowered to leverage and tweak these components directly in build mode without designer oversight or approval. Learn more here:
0:42

You can now dynamically control filter, sort, and limit settings on Collection lists — all through component properties (including a new Number prop type 🙌). Here’s what this means for your workflow: ✨ Easily reuse the same Collection list component in multiple contexts — with different content 🔧 Marketers are empowered to leverage and tweak these components directly in build mode without designer oversight or approval. Learn more here:

Webflow

13,273 görüntüleme • 1 yıl önce

UI/UX Designers, you can now access a complete set of mobile UI components without starting from scratch. I found this amazing resource called Wise Design System, it’s one of the cleanest UI components collection out there and well documented from action buttons to pulldown menus. Each component comes with anatomy, states & behavior, plus design do’s and don’ts to guide you. Bookmark it for later 💜
0:32

UI/UX Designers, you can now access a complete set of mobile UI components without starting from scratch. I found this amazing resource called Wise Design System, it’s one of the cleanest UI components collection out there and well documented from action buttons to pulldown menus. Each component comes with anatomy, states & behavior, plus design do’s and don’ts to guide you. Bookmark it for later 💜

Abraham John 🦄🦓

94,002 görüntüleme • 8 ay önce

Great news, everyone! I've got the engine for my courses & labs platform done ❤️‍🔥 It's a full-blown distributed system with Firecracker on the very end and a Nuxt app on the front. Here is what three months of nights and weekends look like (the design is not final, of course) 👇
0:54

Great news, everyone! I've got the engine for my courses & labs platform done ❤️‍🔥 It's a full-blown distributed system with Firecracker on the very end and a Nuxt app on the front. Here is what three months of nights and weekends look like (the design is not final, of course) 👇

Ivan Velichko

81,034 görüntüleme • 3 yıl önce

UI/UX Designers, I just found a FREE Figma component library that’s a game-changer for speeding up your workflow. This library lets you easily copy and paste high-quality UI components, perfect for building clean, consistent designs without starting from scratch. Whether you’re working on a new project or refreshing an old one, this resource will save you hours. Like this post, repost, and comment “UI Components” to get the link.
0:30

UI/UX Designers, I just found a FREE Figma component library that’s a game-changer for speeding up your workflow. This library lets you easily copy and paste high-quality UI components, perfect for building clean, consistent designs without starting from scratch. Whether you’re working on a new project or refreshing an old one, this resource will save you hours. Like this post, repost, and comment “UI Components” to get the link.

Abraham John 🦄🦓

21,337 görüntüleme • 7 ay önce

Brooooooooooooo... this feels like a dream come true for every developer & designer. 🦴 Now you don't have to manually design skeleton screens for your UI. Boneyard automatically extracts the layout from your real UI and generates pixel-perfect skeleton loading screens from it. Just wrap your UI components with Boneyard, run the build, and it creates the skeletons for you :) Follow me for more amazing AI, Coding & Web Dev insights 💎
0:32

Brooooooooooooo... this feels like a dream come true for every developer & designer. 🦴 Now you don't have to manually design skeleton screens for your UI. Boneyard automatically extracts the layout from your real UI and generates pixel-perfect skeleton loading screens from it. Just wrap your UI components with Boneyard, run the build, and it creates the skeletons for you :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

53,712 görüntüleme • 15 gün önce

The wait is over, Guys! 😌 Finally, we've shipped Shadcn Studio 🎉 An open-source registry with copy-and-paste components, blocks, and templates! - Paired with a powerful theme editor to craft, customize, and ship faster. 🚀 - Shadcn Theme Editor & Component variants ✅ - Theme Import/Export ✅ - Save Shadcn Themes ✅ - Shadcn Component Variants ⌛ - Shadcn Figma UI Kit ⌛ - Shadcn Blocks & Templates ⌛ - Figma Plugin, AI, MCP, LLM and more.. ⌛ ➡️ Check it out here: Huge thanks to Anand Patel, Heet Bhalodiya & Aayush Makwana for their incredible work on this! 🙌 Special thanks to shadcn Sahaj 🫱🏼‍🫲🏼 We’d love to hear your thoughts and feedback from the community! Let us know what you think. 😀
1:42

The wait is over, Guys! 😌 Finally, we've shipped Shadcn Studio 🎉 An open-source registry with copy-and-paste components, blocks, and templates! - Paired with a powerful theme editor to craft, customize, and ship faster. 🚀 - Shadcn Theme Editor & Component variants ✅ - Theme Import/Export ✅ - Save Shadcn Themes ✅ - Shadcn Component Variants ⌛ - Shadcn Figma UI Kit ⌛ - Shadcn Blocks & Templates ⌛ - Figma Plugin, AI, MCP, LLM and more.. ⌛ ➡️ Check it out here: Huge thanks to Anand Patel, Heet Bhalodiya & Aayush Makwana for their incredible work on this! 🙌 Special thanks to shadcn Sahaj 🫱🏼‍🫲🏼 We’d love to hear your thoughts and feedback from the community! Let us know what you think. 😀

Ajay Patel

85,953 görüntüleme • 1 yıl önce

Introducing TikZBot. The birth of an agent that produces its own TikZ creations. Fully interactive and extensible. It can fix scenarios, expand its own work, learn from diagrams, and talk to you. For now, it’s a PoC. The manual version works like a charm. I’m now adding the self-play and chat components. Programmed in a few hours in Codex CLI using the newest 5.2-Codex model. So much fun.
0:30

Introducing TikZBot. The birth of an agent that produces its own TikZ creations. Fully interactive and extensible. It can fix scenarios, expand its own work, learn from diagrams, and talk to you. For now, it’s a PoC. The manual version works like a charm. I’m now adding the self-play and chat components. Programmed in a few hours in Codex CLI using the newest 5.2-Codex model. So much fun.

Bartosz Naskręcki

18,444 görüntüleme • 7 ay önce

Introducing: Argent Lens 🔍 A design review tool for agent-generated UI. With Lens your AI-agent can propose several design variants. You pick the one you like, leave comments on any part of the UI, and apply the changes. Now available in experimental.
0:42

Introducing: Argent Lens 🔍 A design review tool for agent-generated UI. With Lens your AI-agent can propose several design variants. You pick the one you like, leave comments on any part of the UI, and apply the changes. Now available in experimental.

Software Mansion

30,369 görüntüleme • 1 ay önce

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 görüntüleme • 7 ay önce

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,902 görüntüleme • 6 ay önce

Our toolkit for building creative micro apps is going to be a banger. So many little details that just make life easier: - double click on a slider to reset the value to the default state - draggable panels + snap to the edges - layered components with a nested or flat look - canvas zoom/pan/recenter that just works super smoothly - image drag and drop and export. Everything comes with a template, a UI component library, and AGENT.md. Then it just magically works, and you can almost one-shot beautiful, creative micro-apps, whether you're building new animation for your client, a branding assets generator, or anything else.
0:28

Our toolkit for building creative micro apps is going to be a banger. So many little details that just make life easier: - double click on a slider to reset the value to the default state - draggable panels + snap to the edges - layered components with a nested or flat look - canvas zoom/pan/recenter that just works super smoothly - image drag and drop and export. Everything comes with a template, a UI component library, and AGENT.md. Then it just magically works, and you can almost one-shot beautiful, creative micro-apps, whether you're building new animation for your client, a branding assets generator, or anything else.

Alex Barashkov

14,448 görüntüleme • 3 ay önce

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,295 görüntüleme • 1 yıl önce