Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

✨ 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 Aufrufe • vor 1 Jahr •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

3 Kommentare

Profilbild von Michel Edighoffer
Michel Edighoffervor 1 Jahr

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

Profilbild von Aaron
Aaronvor 1 Jahr

Damn this is wild

Profilbild von Niklas
Niklasvor 1 Jahr

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

Ähnliche Videos

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,912 Aufrufe • vor 9 Monaten

🚀 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,195 Aufrufe • vor 2 Jahren

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

33,914 Aufrufe • vor 3 Monaten

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

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

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 🦄🦓

93,779 Aufrufe • vor 7 Monaten

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,243 Aufrufe • vor 6 Monaten

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

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 Aufrufe • vor 5 Monaten

Taxi drivers are terrorists: 🤞 They are now stopping parents from dropping and picking up their own kids at school. 💔 ⚠️ As soon as they stop you, call your tracking company and tell them you are being hijacked, simple—it works like a charm.
2:00

Taxi drivers are terrorists: 🤞 They are now stopping parents from dropping and picking up their own kids at school. 💔 ⚠️ As soon as they stop you, call your tracking company and tell them you are being hijacked, simple—it works like a charm.

YaseBlock B 🇸🇿

114,034 Aufrufe • vor 11 Monaten

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

28,512 Aufrufe • vor 10 Tagen

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 Aufrufe • vor 5 Monaten

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,738 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 1 Monat

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

As an example of how we are building on top of Gemini 3, AI Mode in Search now uses Gemini 3 to enable new generative UI experiences, all generated completely on the fly based on your query. Here’s how you might use this to learn a complex topic like how RNA polymerase works.
0:42

As an example of how we are building on top of Gemini 3, AI Mode in Search now uses Gemini 3 to enable new generative UI experiences, all generated completely on the fly based on your query. Here’s how you might use this to learn a complex topic like how RNA polymerase works.

Jeff Dean

1,972,291 Aufrufe • vor 8 Monaten

New course: Build agents that respond to users with not only plaintext, but custom UIs like charts, forms, and whiteboards, generated on demand and displayed right in the chat. This short course is built in partnership with CopilotKit🪁 and taught by Atai Barkai, co-founder of CopilotKit. You'll learn three approaches: Your agent can pick from custom components you build, like charts and forms. It can compose new layouts from a set of building blocks you provide, like rows, cards, and text. Or it can incorporate existing third-party apps, like a whiteboard or a calendar, right inside the conversation. Skills you’ll gain: - Build agents that render custom components like charts and forms on demand - Build an app where the agent and user collaborate on shared data, beyond just the chat window - Place third-party apps like maps, calendars, and whiteboards right in your interface Join and build agents that give users something to see and act on!
1:42

New course: Build agents that respond to users with not only plaintext, but custom UIs like charts, forms, and whiteboards, generated on demand and displayed right in the chat. This short course is built in partnership with CopilotKit🪁 and taught by Atai Barkai, co-founder of CopilotKit. You'll learn three approaches: Your agent can pick from custom components you build, like charts and forms. It can compose new layouts from a set of building blocks you provide, like rows, cards, and text. Or it can incorporate existing third-party apps, like a whiteboard or a calendar, right inside the conversation. Skills you’ll gain: - Build agents that render custom components like charts and forms on demand - Build an app where the agent and user collaborate on shared data, beyond just the chat window - Place third-party apps like maps, calendars, and whiteboards right in your interface Join and build agents that give users something to see and act on!

Andrew Ng

209,269 Aufrufe • vor 2 Monaten