Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

3,743 subscribers

29,721 views • 7 months ago •via X (Twitter)

#Rails #RubyOnRails

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

542,300 views • 5 months ago

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

If you use Next.js + @shadcn/ui, you know the pain of importing components one by one. As a lazy dev, I built a VS Code extension to import multiple components at once 🚀 No more: import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" Just select what you need, done ✨

Suraj Jha

48,373 views • 10 months ago

WTF Brooooooooo... this is actually incredible. 🤯 This library recreated the UI of Claude Code, Codex & Grok as reusable shadcn components. So if you wanna build AI apps, CLI tools, or terminal UIs with this kind of polished interface, you can just use these components instead of building everything from scratch. It includes chat messages, tool calls, code diffs, permission dialogs, todo lists, slash commands, and more. Perfect for building AI tools :) Follow me for more amazing AI, Coding & Web Dev insights 💎

WTF Brooooooooo... this is actually incredible. 🤯 This library recreated the UI of Claude Code, Codex & Grok as reusable shadcn components. So if you wanna build AI apps, CLI tools, or terminal UIs with this kind of polished interface, you can just use these components instead of building everything from scratch. It includes chat messages, tool calls, code diffs, permission dialogs, todo lists, slash commands, and more. Perfect for building AI tools :) Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

64,378 views • 9 days ago

most people spend hours describing what they want to Claude Code this guy just browsed a catalog of thousands of animated UI components, found one he liked, and hit "copy prompt" that's it. the prompt goes into Claude Code and it builds it. > 21st(.)dev - a library of community-made components built for React, Next.js, Tailwind > every component has a ready-made prompt attached > you pick the effect, copy, paste, done no describing animations from scratch. no explaining what "smooth scroll" or "hover glow" means. someone already figured out the exact prompt that produces it. gap between people who know this exists and people who don't is measured in hours per project full walkthrough in the article below

most people spend hours describing what they want to Claude Code this guy just browsed a catalog of thousands of animated UI components, found one he liked, and hit "copy prompt" that's it. the prompt goes into Claude Code and it builds it. > 21st(.)dev - a library of community-made components built for React, Next.js, Tailwind > every component has a ready-made prompt attached > you pick the effect, copy, paste, done no describing animations from scratch. no explaining what "smooth scroll" or "hover glow" means. someone already figured out the exact prompt that produces it. gap between people who know this exists and people who don't is measured in hours per project full walkthrough in the article below

monokern

64,484 views • 2 months ago

Bruh... someone recreated the UI of Claude Code, Codex & Grok as reusable ShadCN components. 🤯 This open-source library lets you drop beautifully recreated AI interface components straight into your own apps or CLI projects. You'll find components for: → prompts & chat messages → tool calls → code diffs → permission dialogs → todo lists → slash commands → and much more... Perfect if you're building AI apps, terminal UIs (TUIs), or CLI-based developer tools and don't want to build everything from scratch :) Source 🔗: github(DOT)com/theswerd/brainless Follow me for more amazing AI, Coding & Web Dev insights 💎

Bruh... someone recreated the UI of Claude Code, Codex & Grok as reusable ShadCN components. 🤯 This open-source library lets you drop beautifully recreated AI interface components straight into your own apps or CLI projects. You'll find components for: → prompts & chat messages → tool calls → code diffs → permission dialogs → todo lists → slash commands → and much more... Perfect if you're building AI apps, terminal UIs (TUIs), or CLI-based developer tools and don't want to build everything from scratch :) Source 🔗: github(DOT)com/theswerd/brainless Follow me for more amazing AI, Coding & Web Dev insights 💎

Ram Maheshwari

55,857 views • 1 month ago

This made me develop MVPs x10 times faster 🤯 I create a /playbook page at the start of every project now. Just init a project from shadcn and your ready to go This page lists all the UI components my project will use: ◆ Page shells ◆ Layout patterns ◆ Component structure ◆ Design rules Give the AI this context upfront and it stays consistent across the whole build Can basically design the full MVP in one go now.

This made me develop MVPs x10 times faster 🤯 I create a /playbook page at the start of every project now. Just init a project from shadcn and your ready to go This page lists all the UI components my project will use: ◆ Page shells ◆ Layout patterns ◆ Component structure ◆ Design rules Give the AI this context upfront and it stays consistent across the whole build Can basically design the full MVP in one go now.

CodeHagen

18,821 views • 2 months ago

CHINA JUST DROPPED AN AI CODING MODEL WITH A 1M CONTEXT WINDOW. And I connected it to Claude Code to see what it could actually do. Meet GLM-X Preview On paper, a few things immediately stood out: → 1M context window → Agentic coding capabilities → Works inside Claude Code → Designed for large-scale coding and reasoning workflows But specs don't matter much if the model can't deliver in practice. So I gave it a real-world task. THE TEST One prompt: > Build a modern AI lead generation dashboard using React and Tailwind CSS. Requirements: → Dark mode → Analytics dashboard → Lead table → Email outreach section → Responsive design → Production-ready component structure Instead of generating a few snippets, it planned the architecture, generated the dashboard components, created the Tailwind configuration, and walked through the implementation requirements. What impressed me most wasn't the code itself. It was how well it maintained context throughout the workflow. That's where a 1M context window starts becoming useful. Less time re-explaining requirements. Less context loss. More room for complex projects. The AI coding race is getting very interesting. And it's no longer just GPT, Claude, and Gemini competing for attention. Results from my test below 👇

CHINA JUST DROPPED AN AI CODING MODEL WITH A 1M CONTEXT WINDOW. And I connected it to Claude Code to see what it could actually do. Meet GLM-X Preview On paper, a few things immediately stood out: → 1M context window → Agentic coding capabilities → Works inside Claude Code → Designed for large-scale coding and reasoning workflows But specs don't matter much if the model can't deliver in practice. So I gave it a real-world task. THE TEST One prompt: > Build a modern AI lead generation dashboard using React and Tailwind CSS. Requirements: → Dark mode → Analytics dashboard → Lead table → Email outreach section → Responsive design → Production-ready component structure Instead of generating a few snippets, it planned the architecture, generated the dashboard components, created the Tailwind configuration, and walked through the implementation requirements. What impressed me most wasn't the code itself. It was how well it maintained context throughout the workflow. That's where a 1M context window starts becoming useful. Less time re-explaining requirements. Less context loss. More room for complex projects. The AI coding race is getting very interesting. And it's no longer just GPT, Claude, and Gemini competing for attention. Results from my test below 👇

Md Riyazuddin

31,199 views • 2 months ago

💥 Introducing Echo, an AI powered support platform like Intercom, Crisp, or Zendesk. This isn't a sales pitch. It's a real app you'll build, step by step. 💬🚀 🚀 Next.js 15 + React 19 🎨 Tailwind v4 + shadcn UI 🧠 Agents for real-time AI chat 📣 AI tools for escalation and resolution 📚 Embeddings + RAG for smart knowledge base 🔊 Vapi for voice support 🔑 AWS Secrets Manager for API key storage 👥 for team management 🔐 for authentication 💳 for billing 🛠️ Embeddable chat widget 📈 Operator dashboard for conversation management 🧰 Embed script developer toolkit 🤖 AI models: OpenAI, Anthropic, Grok 📦 Turborepo monorepo architecture 🪵 Sentry for error tracking 🧑‍💻 CodeRabbit for PR reviews

💥 Introducing Echo, an AI powered support platform like Intercom, Crisp, or Zendesk. This isn't a sales pitch. It's a real app you'll build, step by step. 💬🚀 🚀 Next.js 15 + React 19 🎨 Tailwind v4 + shadcn UI 🧠 Agents for real-time AI chat 📣 AI tools for escalation and resolution 📚 Embeddings + RAG for smart knowledge base 🔊 Vapi for voice support 🔑 AWS Secrets Manager for API key storage 👥 for team management 🔐 for authentication 💳 for billing 🛠️ Embeddable chat widget 📈 Operator dashboard for conversation management 🧰 Embed script developer toolkit 🤖 AI models: OpenAI, Anthropic, Grok 📦 Turborepo monorepo architecture 🪵 Sentry for error tracking 🧑‍💻 CodeRabbit for PR reviews

Code With Antonio

37,695 views • 1 year ago

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.

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 views • 6 months ago

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 💎

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 views • 23 days ago

💥 Introducing Vibe, an AI powered app builder similar to Lovable, Replit and v0. No, this isn't my SaaS announcement, this is a product that you will learn how to build in my newest FREE course! 🚀 🚀 Next.js 15 + React 19 🎨 Tailwind v4 + shadcn UI 📡 tRPC.io 🧙‍♂️ for full-stack type safety 🔁 Inngest background jobs 🧠 Inngest agent toolkit 🔐 authentication 💳 billing 🧱 Component and app generation from AI prompts 🗂️ Live project preview with URL access 🖥️ E2B cloud sandboxes for runtime execution 🐳 Docker -based sandbox templating 🧠 AI model support (OpenAI, Anthropic, Grok) 📦 Prisma + Neon Postgres for database integration 🤖 CodeRabbit AI-powered PR reviews 🧾 Built-in credit system with usage tracking 🧪 Preview + code explorer toggle

💥 Introducing Vibe, an AI powered app builder similar to Lovable, Replit and v0. No, this isn't my SaaS announcement, this is a product that you will learn how to build in my newest FREE course! 🚀 🚀 Next.js 15 + React 19 🎨 Tailwind v4 + shadcn UI 📡 tRPC.io 🧙‍♂️ for full-stack type safety 🔁 Inngest background jobs 🧠 Inngest agent toolkit 🔐 authentication 💳 billing 🧱 Component and app generation from AI prompts 🗂️ Live project preview with URL access 🖥️ E2B cloud sandboxes for runtime execution 🐳 Docker -based sandbox templating 🧠 AI model support (OpenAI, Anthropic, Grok) 📦 Prisma + Neon Postgres for database integration 🤖 CodeRabbit AI-powered PR reviews 🧾 Built-in credit system with usage tracking 🧪 Preview + code explorer toggle

Code With Antonio

92,964 views • 1 year ago

This Obsidian and Claude architecture charges nothing and removes the maintenance entirely. Obsidian stores everything as plain Markdown files. Claude Code points at the vault directory. No API integrations. No paid connectors. No configuration beyond a folder path. The gap between project management systems that get abandoned the moment life gets busy and a system that maintains itself from the notes you were already writing is not discipline or organizational skill. It is the architecture described in this article, and the afternoon it takes to build five markdown components that never need a status update meeting again.

This Obsidian and Claude architecture charges nothing and removes the maintenance entirely. Obsidian stores everything as plain Markdown files. Claude Code points at the vault directory. No API integrations. No paid connectors. No configuration beyond a folder path. The gap between project management systems that get abandoned the moment life gets busy and a system that maintains itself from the notes you were already writing is not discipline or organizational skill. It is the architecture described in this article, and the afternoon it takes to build five markdown components that never need a status update meeting again.

NeilXbt

32,130 views • 3 months ago

🚨 LAUNCH ALERT 🚨 Tanplate is live 👉 🔁 RT for a launch discount code 👀 The ultimate TANSTACK AI boilerplate to build & ship AI/SaaS products fast. Everything you actually need. Nothing you don’t. AI-ready • Multi-model (OpenAI / Claude / Gemini / local-ready) • Streaming UI • Audio transcription (Whisper) • Multimodal context (text / images / files) Core stack • TanStack Start / Query / Store / Form • Vite • Docker • Drizzle ORM + Postgres Auth & Payments • Better Auth • Stripe • Polar Frontend • tailwindcss • shadcn External Services • Resend • S3 • i18n No boilerplate hell. No wiring for weeks. Just clone, tweak, ship.

🚨 LAUNCH ALERT 🚨 Tanplate is live 👉 🔁 RT for a launch discount code 👀 The ultimate TANSTACK AI boilerplate to build & ship AI/SaaS products fast. Everything you actually need. Nothing you don’t. AI-ready • Multi-model (OpenAI / Claude / Gemini / local-ready) • Streaming UI • Audio transcription (Whisper) • Multimodal context (text / images / files) Core stack • TanStack Start / Query / Store / Form • Vite • Docker • Drizzle ORM + Postgres Auth & Payments • Better Auth • Stripe • Polar Frontend • tailwindcss • shadcn External Services • Resend • S3 • i18n No boilerplate hell. No wiring for weeks. Just clone, tweak, ship.

Rayan

28,003 views • 8 months ago

Introducing Transitions Refine A tool for tuning UI transitions directly in Cursor, Codex or Claude Code with the Transitions-dev skill built in • Integrated skill analyzes your transitions and provides suggestions you can apply directly • Timeline and controls for manual edits • No need to copy and paste values everything is updated directly in your source

Introducing Transitions Refine A tool for tuning UI transitions directly in Cursor, Codex or Claude Code with the Transitions-dev skill built in • Integrated skill analyzes your transitions and provides suggestions you can apply directly • Timeline and controls for manual edits • No need to copy and paste values everything is updated directly in your source

Jakub Antalik

51,893 views • 2 months ago

After 2+ months of hard work, my latest tutorial on building a Multi-Tenant E-Commerce with Platform Fees is finally out and free on YouTube! 🚀 ⬇️ Link below ⬇️ Are you ready to build your own Gumroad? 🕝 20 hours of content 📖 33 chapters 🏬 Multi-tenant architecture with Payload 🌐 Vendor subdomains with Vercel domains 🎨 Custom merchant storefronts 💳 Stripe Connect integration 💰 Automatic platform fees ⭐ Product ratings & reviews 📚 User purchase library 🧑‍💼 Role-based access control 🛠️ Admin dashboard 🧾 Merchant dashboard 🧱 Payload backend 🗂️ Category & product filtering 🔍 Search functionality 🖼️ Image upload support ⚙️ Built with Lucas 15 🎨 Tailwind CSS v4 styling 💅 shadcn ui components

After 2+ months of hard work, my latest tutorial on building a Multi-Tenant E-Commerce with Platform Fees is finally out and free on YouTube! 🚀 ⬇️ Link below ⬇️ Are you ready to build your own Gumroad? 🕝 20 hours of content 📖 33 chapters 🏬 Multi-tenant architecture with Payload 🌐 Vendor subdomains with Vercel domains 🎨 Custom merchant storefronts 💳 Stripe Connect integration 💰 Automatic platform fees ⭐ Product ratings & reviews 📚 User purchase library 🧑‍💼 Role-based access control 🛠️ Admin dashboard 🧾 Merchant dashboard 🧱 Payload backend 🗂️ Category & product filtering 🔍 Search functionality 🖼️ Image upload support ⚙️ Built with Lucas 15 🎨 Tailwind CSS v4 styling 💅 shadcn ui components

Code With Antonio

22,468 views • 1 year ago

Turns out teaching the AI Coding Agents what's your preferred way of implementation(a.k.a Claude Skills) gives much better results. 😇 Took all the guidelines from my "Spring Application Architecture Design Patterns" samples and created file and asked Claude to generate a new application. Claude followed most of those patterns as expected 😍 Earlier I used to Vibe Code and then spend some time unvibing(cleaning up) the generated code. With these Skills given to Claude, now I no need to spend too much time for cleaning up the code. 🚀

Turns out teaching the AI Coding Agents what's your preferred way of implementation(a.k.a Claude Skills) gives much better results. 😇 Took all the guidelines from my "Spring Application Architecture Design Patterns" samples and created file and asked Claude to generate a new application. Claude followed most of those patterns as expected 😍 Earlier I used to Vibe Code and then spend some time unvibing(cleaning up) the generated code. With these Skills given to Claude, now I no need to spend too much time for cleaning up the code. 🚀

Siva

113,687 views • 8 months ago

📣 My newest course is out! 📣 This time we will be building an original SaaS Platform for video calls and summaries with AI Agents 🤖 Are you ready to make 1M ARR 😁? 🤖 Real-time video calls with AI agents 📞 Video and chat powered by Stream 🔐 Authentication handled by Better Auth 💳 Subscription payments via Polar 🧠 AI summaries and context chat using OpenAI ⚙️ Background jobs powered by Inngest 🧑‍💻 Code reviews with CodeRabbit 🗄️ Scalable Postgres database via Neon Postgres 🌐 Built with Next.js 15 and React 19 🎨 Tailwind CSS v4 and shadcn UI for styling 📱 Fully responsive and mobile-friendly 🚀 Ready for production deployment on Vercel

📣 My newest course is out! 📣 This time we will be building an original SaaS Platform for video calls and summaries with AI Agents 🤖 Are you ready to make 1M ARR 😁? 🤖 Real-time video calls with AI agents 📞 Video and chat powered by Stream 🔐 Authentication handled by Better Auth 💳 Subscription payments via Polar 🧠 AI summaries and context chat using OpenAI ⚙️ Background jobs powered by Inngest 🧑‍💻 Code reviews with CodeRabbit 🗄️ Scalable Postgres database via Neon Postgres 🌐 Built with Next.js 15 and React 19 🎨 Tailwind CSS v4 and shadcn UI for styling 📱 Fully responsive and mobile-friendly 🚀 Ready for production deployment on Vercel

Code With Antonio

31,277 views • 1 year ago

Introducing primeui. Build sites fast. Fear no code. Available today • 200+ handcrafted marketing UI components and templates • Sitemap planner • Prototype + experiment on an infinite canvas • Clean export to Next.js, Tailwind + shadcn/ui compatible • Not just landing pages: build Blog, Docs, Pricing, and more Coming soon • MCP • Skills • AI Designer We started Prime UI because we believe site builders that do not output real code end up slowing you down. So instead of building another “app builder,” we focused on marketing sites, the work we know best after 10+ years of designing and building high-end websites at Pixel Point. Human expertise combined with AI scalability is what we believe in. Prime UI isn’t here (yet) to fully replace your stack, but it is already capable of saving you hundreds of hours in prototyping and the early phases of your next site project. What’s next: MCP: continuously add new pages to your site from Prime UI, aligned with your project setup and style. Skills: an AI-agent-friendly concentrate of our years of website design and development expertise. It is time to ditch old habits. Fear no code and build sites fast, ready for the AI era.

Introducing primeui. Build sites fast. Fear no code. Available today • 200+ handcrafted marketing UI components and templates • Sitemap planner • Prototype + experiment on an infinite canvas • Clean export to Next.js, Tailwind + shadcn/ui compatible • Not just landing pages: build Blog, Docs, Pricing, and more Coming soon • MCP • Skills • AI Designer We started Prime UI because we believe site builders that do not output real code end up slowing you down. So instead of building another “app builder,” we focused on marketing sites, the work we know best after 10+ years of designing and building high-end websites at Pixel Point. Human expertise combined with AI scalability is what we believe in. Prime UI isn’t here (yet) to fully replace your stack, but it is already capable of saving you hundreds of hours in prototyping and the early phases of your next site project. What’s next: MCP: continuously add new pages to your site from Prime UI, aligned with your project setup and style. Skills: an AI-agent-friendly concentrate of our years of website design and development expertise. It is time to ditch old habits. Fear no code and build sites fast, ready for the AI era.

Alex Barashkov

72,313 views • 6 months ago