Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

The new React Aria docs will have interactive prop controls that update both the component and the code. Configure, test, and copy into your app!

devongovett's profile picture

Devon Govett

41,858 subscribers

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

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

we released our react package build an ai chat w/ interactive components in a few lines of code. add it to your app with: npx tambo full-send we support: - streaming for both messages and components - message history and message threads - state manage for generated components - suggested actions based on available components - component library that uses the react package the react package is open-source. server package will be open-sourced later this year.
1:01

we released our react package build an ai chat w/ interactive components in a few lines of code. add it to your app with: npx tambo full-send we support: - streaming for both messages and components - message history and message threads - state manage for generated components - suggested actions based on available components - component library that uses the react package the react package is open-source. server package will be open-sourced later this year.

Michael Magán

65,473 görüntüleme • 1 yıl önce

Introducing the new React Aria docs! 🎉 All-new content and search experience. Interactive CSS and Tailwind examples to get you started quickly – just install with shadcn. New guides and full example apps. MCP server and AI integrations. Check it out!
0:37

Introducing the new React Aria docs! 🎉 All-new content and search experience. Interactive CSS and Tailwind examples to get you started quickly – just install with shadcn. New guides and full example apps. MCP server and AI integrations. Check it out!

Devon Govett

82,187 görüntüleme • 8 ay önce

✨ Free animated component library Built for Framer, React, and AI tools through MCP ✅ Ready-to-use components ✅ Clear previews ✅ Easy customisation controls ✅ Copy code →
0:20

✨ Free animated component library Built for Framer, React, and AI tools through MCP ✅ Ready-to-use components ✅ Clear previews ✅ Easy customisation controls ✅ Copy code →

Adham Dannaway

44,584 görüntüleme • 1 ay önce

React Native & with Expo using shadcn template !!! ✨New Component: Import Alert Dialog Components and easily add it your React Native & Expo App Both Expo and RN CLI #buildinpublic #buildingpublic
0:27

React Native & with Expo using shadcn template !!! ✨New Component: Import Alert Dialog Components and easily add it your React Native & Expo App Both Expo and RN CLI #buildinpublic #buildingpublic

Sid

63,527 görüntüleme • 2 yıl önce

Well, it’s finally done. I just need to update the code with the new fixes, and I should have a test build ready.
0:36

Well, it’s finally done. I just need to update the code with the new fixes, and I should have a test build ready.

Echo Stretch

62,550 görüntüleme • 9 ay önce

Introducing Agents UI, an open-source shadcn component library for building polished React frontends for your voice agents. Audio visualizers. Media controls. Session management tools. Chat transcripts. All wired to LiveKit Agents. Install via the shadcn CLI and own the code.
0:43

Introducing Agents UI, an open-source shadcn component library for building polished React frontends for your voice agents. Audio visualizers. Media controls. Session management tools. Chat transcripts. All wired to LiveKit Agents. Install via the shadcn CLI and own the code.

LiveKit

183,463 görüntüleme • 6 ay önce

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.
6:06

You can make your Figma designs functional with Claude AI Select component, go to Dev Mode and use Figma to Code plugin to turn to React/Tailwind. Copy the code and paste to Claude AI. Prompt "Create this component and center it". Then, "Make this functional", "Add rounded corners", "add hover states", "animate transitions". Don't forget to ask "always give full code". Otherwise, it might break the Artifact.

Meng To

171,880 görüntüleme • 2 yıl önce

Introducing Figma Connect. The best way to turn your Figma designs into code. No MCP hell. No plugins. Just copy and paste your designs into MagicPath and turn them into interactive prototypes without compromising your craft. Every pixel. Every detail. Every asset. Preserved.
1:19

Introducing Figma Connect. The best way to turn your Figma designs into code. No MCP hell. No plugins. Just copy and paste your designs into MagicPath and turn them into interactive prototypes without compromising your craft. Every pixel. Every detail. Every asset. Preserved.

Pietro Schirano

980,251 görüntüleme • 7 ay önce

Move your docs to v0. Easy to update, extend, and collaborate. No more PRs for a one-line edit. Want AI chat or custom features in your docs? Just vibe code them right into the same project. v0 for docs is seriously good.
0:30

Move your docs to v0. Easy to update, extend, and collaborate. No more PRs for a one-line edit. Want AI chat or custom features in your docs? Just vibe code them right into the same project. v0 for docs is seriously good.

Esteban Suárez

36,962 görüntüleme • 10 ay önce

Made a copy of the monthly calendar used by Cal.com with shadcn UI, Radix by WorkOS Colors and React Aria
0:35

Made a copy of the monthly calendar used by Cal.com with shadcn UI, Radix by WorkOS Colors and React Aria

Damián Ricobelli

54,160 görüntüleme • 2 yıl önce

In MagicPath every component is a conversation. Edit and refine, either manually or with AI. Design is the art of keeping good decisions. MagicPath lets you copy and paste interactive components across the canvas to explore and perfect your ideas.
1:00

In MagicPath every component is a conversation. Edit and refine, either manually or with AI. Design is the art of keeping good decisions. MagicPath lets you copy and paste interactive components across the canvas to explore and perfect your ideas.

Pietro Schirano

53,164 görüntüleme • 1 yıl önce

Did you know React 19's ViewTransition component can create smooth, animated transitions between pages? Just wrap elements with the same name prop and React handles the rest. No complex animation libraries needed! 🎬
1:53

Did you know React 19's ViewTransition component can create smooth, animated transitions between pages? Just wrap elements with the same name prop and React handles the rest. No complex animation libraries needed! 🎬

Kent C. Dodds 🏹

26,001 görüntüleme • 9 ay önce

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇
1:02

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇

Jordan Hughes

244,832 görüntüleme • 1 yıl önce

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.
0:45

Today we’re launching an experimental @Figma plugin that will convert your design into runnable code. Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.

Replit ⠕

524,562 görüntüleme • 2 yıl önce

Here is a demo of the most comprehensive research agent for your code docs, powered by Nozomio Labs. It turns your indexed repos and docs into a dynamic tree that the agent can access on the fly, using SOTA tools to reduce code hallucinations. Now using the latest Anthropic model, Claude Opus 4.5.
0:35

Here is a demo of the most comprehensive research agent for your code docs, powered by Nozomio Labs. It turns your indexed repos and docs into a dynamic tree that the agent can access on the fly, using SOTA tools to reduce code hallucinations. Now using the latest Anthropic model, Claude Opus 4.5.

Arlan

28,405 görüntüleme • 9 ay önce

Seen the new UEX new UI yet? Update your app and don’t miss the hottest markets.
0:34

Seen the new UEX new UI yet? Update your app and don’t miss the hottest markets.

Bitget

15,803 görüntüleme • 7 ay önce

Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂
0:30

Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop. Just one of the demos I'm planning for the new docs. 🙂

Devon Govett

47,441 görüntüleme • 11 ay önce

introducing: Auto Knowledge Gap Finding for Your Docs Your docs probably don't know what shipped, and no one remembers to keep them up to date. Every release creates the same cleanup job: search the docs, decide what is missing or stale, find the evidence, and write the update. Most teams discover the gap when a customer asks a question the docs should have answered. So we built Knowledge Gaps in Compare GitHub releases, RSS feeds, or changelog entries against your customer and internal documentation. See missing, stale, hard-to-find, and needs-triage findings with the release evidence and every documentation page BuildBetter checked. Approve the real work, copy a ready-to-use prompt into your agent, or attach the finding to a project. Happy building!
2:15

introducing: Auto Knowledge Gap Finding for Your Docs Your docs probably don't know what shipped, and no one remembers to keep them up to date. Every release creates the same cleanup job: search the docs, decide what is missing or stale, find the evidence, and write the update. Most teams discover the gap when a customer asks a question the docs should have answered. So we built Knowledge Gaps in Compare GitHub releases, RSS feeds, or changelog entries against your customer and internal documentation. See missing, stale, hard-to-find, and needs-triage findings with the release evidence and every documentation page BuildBetter checked. Approve the real work, copy a ready-to-use prompt into your agent, or attach the finding to a project. Happy building!

Spencer Shulem

4,481,457 görüntüleme • 8 gün önce

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.
0:33

Turn design into code with Claude Code + Figma. Through MCP, Claude sees your mockup at the data level—component hierarchies, design tokens, auto-layout rules—and translates it into production-ready code.

Claude

2,598,691 görüntüleme • 11 ay önce