Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure

da_fant's profile picture

david fant

3,698 subscribers

323,395 görüntüleme • 5 ay önce •via X (Twitter)

KomediBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.
1:15

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.

HeroUI

530,440 görüntüleme • 2 ay önce

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?
1:25

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

Lee Robinson

177,009 görüntüleme • 1 yıl önce

imagine any React website as a component graph
0:20

imagine any React website as a component graph

Aiden Bai

337,426 görüntüleme • 1 yıl önce

Introducing Video2Ascii – a WebGL-powered React component that converts Videos to ASCII art. I came across the General Intuition website and loved their animations but there were no open-source React Components so I reverse engineered it.
0:25

Introducing Video2Ascii – a WebGL-powered React component that converts Videos to ASCII art. I came across the General Intuition website and loved their animations but there were no open-source React Components so I reverse engineered it.

Elijah Kurien

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

We released Canvas in Gemini this week, allowing you to code and preview React/JS components quickly. Here's a one-shot Stock market component 👀
0:27

We released Canvas in Gemini this week, allowing you to code and preview React/JS components quickly. Here's a one-shot Stock market component 👀

Addy Osmani

116,321 görüntüleme • 1 yıl önce

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️
0:25

Introducing Agent React DevTools. AI agents can now inspect React apps beyond the UI: → Component tree and state → Renders and performance → Structured output for debugging Works with React and React Native. Learn more ⬇️

Callstack Engineers

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

"How to share state between React client components with a parent server component?" 👇
0:32

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

50,550 görüntüleme • 1 yıl önce

Don't know what it's called but made this component with React and Tailwind in 1 hour
0:26

Don't know what it's called but made this component with React and Tailwind in 1 hour

Sam ☕

527,958 görüntüleme • 7 ay önce

⚛️ One component, many forms: the power of polymorphic React components ↓
1:12

⚛️ One component, many forms: the power of polymorphic React components ↓

George Moller

59,703 görüntüleme • 1 yıl önce

Today, we’re releasing the beta of HTML to React to the public. It’s stupid powerful. ⬇️ Watch how fast I can go from seeing a design I like on an a website to getting a personalized React component. More examples of what this extension can do below
0:45

Today, we’re releasing the beta of HTML to React to the public. It’s stupid powerful. ⬇️ Watch how fast I can go from seeing a design I like on an a website to getting a personalized React component. More examples of what this extension can do below

Teddy Ni

226,228 görüntüleme • 1 yıl önce

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

You can now create component property groups — which means you can more easily reuse components throughout your site 🖥️ Easier-to-use components, more design consistency, stunning sites.
0:34

You can now create component property groups — which means you can more easily reuse components throughout your site 🖥️ Easier-to-use components, more design consistency, stunning sites.

Webflow

20,742 görüntüleme • 2 yıl önce

▵ Triplex is the React Three Fiber editor where your code is the source of truth! ✨ v0.58.0 has released, sound on! 🔊 🌏 Set provider component props in the UI 🐥 Edit child elements without leaving your open file 😍 Much more #threejs #r3f #reactjs
1:05

▵ Triplex is the React Three Fiber editor where your code is the source of truth! ✨ v0.58.0 has released, sound on! 🔊 🌏 Set provider component props in the UI 🐥 Edit child elements without leaving your open file 😍 Much more #threejs #r3f #reactjs

mike douges

284,673 görüntüleme • 2 yıl önce

Today we’re excited to introduce GenSX, an open source TypeScript framework for building backend workflows and agents with reusable, React-like components. If you know how to write a React component, then you’ll feel right at home building agents in GenSX.
6:08

Today we’re excited to introduce GenSX, an open source TypeScript framework for building backend workflows and agents with reusable, React-like components. If you know how to write a React component, then you’ll feel right at home building agents in GenSX.

Evan Boyle

14,446 görüntüleme • 1 yıl önce

shadcn/ui patterns. No React. No build. Just Rails. Maquina Components gives you the same component architecture — ERB partials + StimulusJS + Tailwind CSS v4. Claude skill for AI-assisted dev: #Rails #RubyOnRails
1:48

shadcn/ui patterns. No React. No build. Just Rails. Maquina Components gives you the same component architecture — ERB partials + StimulusJS + Tailwind CSS v4. Claude skill for AI-assisted dev: #Rails #RubyOnRails

Mario Alberto Chávez

29,719 görüntüleme • 4 ay ö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 🦄🦓

55,566 görüntüleme • 1 ay ö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 🦄🦓

91,571 görüntüleme • 5 ay önce

Start using Cursor with Shadcn. You can tag *any* of the components you install to quickly build user interfaces - just @ the component. It’s basically an AI frontend engineer. Build at the speed of thought.
6:50

Start using Cursor with Shadcn. You can tag *any* of the components you install to quickly build user interfaces - just @ the component. It’s basically an AI frontend engineer. Build at the speed of thought.

Mckay Wrigley

299,603 görüntüleme • 1 yıl önce