The wait is over, Guys! 😌 Finally, we've shipped Shadcn Studio 🎉 An...

Uploaded: 2025-04-23T12:55:26.000Z
Duration: PT102.450S
Channel: Ajay Patel

3:49

🚀 Introducing A collection of top quality free & open-source dashboard components, blocks and layouts built with shadcn/ui & Base UI ✅ Open-source dashboard components & blocks ✅ Beautiful admin dashboard template ✅ Copy & paste with shadcn/ui ✅ Pre-Built AI Prompts ✅ MCP Server ✅ Production-ready code Huge thanks to shadcn for creating such an amazing ecosystem ❤️ 🔗 Would love your feedback.

Sunil Joshi

67,569 views • 24 days ago

2:27

After months of hard work, it's here! 🚀 The NEW shadcn/ui kit for Figma, based on Tailwind v4 and shadcn 2.5.0! What's new? ⭐ Updated Figma kit ⭐ Refactored Pro Blocks for Tailwind v4 ⭐ 28 new Pro Blocks ⭐ Added new AI models to our plugin for improved component generation ⭐ New feature: Export Figma themes via our plugin and install them with shadcn/ui registry

Matt

26,730 views • 1 year ago

0:36

We just launched our new website along with some great changes: 1. Added /themes page where you can grab our free shadcn / ui themes. 2. The /academy is now free for everyone. You can learn the Figma to shadcn/ui process with our short video guides. 3. The site is rebuilt from the ground up with Next.js 15, React 19, and shadcn/ui. The new stack gives us faster load times, better accessibility, and a more cohesive experience across all pages. I'm already working on more themes, expanded docs, and new Pro Blocks. Thanks for being here and supporting our small project! More to come!

Matt

44,889 views • 10 months ago

3:17

Today ReUI Pro goes live! 🔥 Design-forward shadcn/ui platform with MCP fluency for agents. AI made UI generation instant. It didn't make it production-ready. You still spend hours picking blocks, adjusting details, and fine-tuning the last mile. We spent six months building the agent-ready layer for shadcn/ui that closes the gap. Inside: ☑️ Free Hosted MCP with Agent Skills. ☑️ 1,019 open-source shadcn/ui components, free forever. ☑️ 17 open-source ReUI primitives(Data Grid, Filters,File Upload, Stepper and more). ☑️ 485 Pro blocks across over 50 categories. ☑️ 562 hand-crafted interactive icons in 4 styles. ☑️ Default Base UI and legacy Radix by WorkOS versions. Real credit to shadcn for the ecosystem! The registry model changed how we all build and ship UI, and ReUI stands on that foundation. Below is a thread on the 10 things we're most proud of👇

ReUI

42,577 views • 1 month ago

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

1:58

I was ready to tear my (remaining) hair out. Every shadcn UI kit for Figma I found on Figma Community was of poor quality, missing components or outdated. 😡 My client's deadline loomed, and I needed a solution fast... That's when inspiration struck. With my seven years of experience creating Figma resources and managing the Ant Design System, why not make the kit myself? 🤔 I dove in, pouring my expertise into every component. Days blended as I crafted, refined, and perfected. 🥵 Finally, I sat back and smiled. Before me was the high-quality, up-to-date Shadcn UI kit I'd been searching for, complete with customer support. 🤩 As I prepared to share it with the world, I felt a surge of excitement. This wasn't just a solution to my problem – it was a resource that could help thousands of other designers and developers. It’s not a dream. I made it.

Matt

190,401 views • 1 year ago

0:25

Announcing the Style Guide in primeui. Customize your project theme with a shadcn-compatible token system. Preview it live with as many variants as you need on the canvas. Export clean, production-ready Next.js code in minutes. Prime UI gives you a strong foundation for your website, whether you build it yourself or with AI. It includes 200+ UI components, all crafted by humans with pixel-perfect quality, a solid design system, and clean code. Plan your site with the Sitemap tool. Explore content, layout ideas, and storytelling in Prototype. Shape the look and feel in Style Guide, then export everything to Next.js. You get more than just landing pages. You get a consistent foundation for your entire site, including Blog, Docs, Pricing, and more, without having to worry about architecture, content blocks, SEO, or performance. Available today.

Alex Barashkov

32,330 views • 5 months ago

0:30

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

2:43

New course: MCP: Build Rich-Context AI Apps with Anthropic. Learn to build AI apps that access tools, data, and prompts using the Model Context Protocol in this short course, created in partnership with Anthropic Anthropic and taught by Elie Schoppik Elie Schoppik, its Head of Technical Education. Connecting AI applications to external systems that bring rich context to LLM-based applications has often meant writing custom integrations for each use case. MCP is an open protocol that standardizes how LLMs access tools, data, and prompts from external sources, and simplifies how you provide context to your LLM-based applications. For example, you can provide context via third-party tools that let your LLM make API calls to search the web, access data from local docs, retrieve code from a GitHub repo, and so on. MCP, developed by Anthropic, is based on a client-server architecture that defines the communication details between an MCP client, hosted inside the AI application, and an MCP server that exposes tools, resources, and prompt templates. The server can be a subprocess launched by the client that runs locally or an independent process running remotely. In this hands-on course, you'll learn the core architecture behind MCP. You’ll create an MCP-compatible chatbot, build and deploy an MCP server, and connect the chatbot to your MCP server and other open-source servers. Here’s what you’ll do: - Understand why MCP makes AI development less fragmented and standardizes connections between AI applications and external data sources - Learn the core components of the client-server architecture of MCP and the underlying communication mechanism - Build a chatbot with custom tools for searching academic papers, and transform it into an MCP-compatible application - Build a local MCP server that exposes tools, resources, and prompt templates using FastMCP, and test it using MCP Inspector - Create an MCP client inside your chatbot to dynamically connect to your server - Connect your chatbot to reference servers built by Anthropic’s MCP team, such as filesystem, which implements filesystem operations, and fetch, which extracts contents from the web as markdown - Configure Claude Desktop to connect to your server and others, and explore how it abstracts away the low-level logic of MCP clients - Deploy your MCP server remotely and test it with the Inspector or other MCP-compatible applications - Learn about the roadmap for future MCP development, such as multi-agent architecture, MCP registry API, server discovery, authorization, and authentication MCP is an exciting and important technology that lets you build rich-context AI applications that connect to a growing ecosystem of MCP servers, with minimal integration work. Please sign up here!

Andrew Ng

142,130 views • 1 year ago

1:54

🙌Meet Artifig: A Figma Plugin to Generate Figma Plugins Do you use Figma and ever feel like this: - Your mind is bursting with plugin ideas, but you can't bring them to life because you don't know how to code? - You want to focus on design, but repetitive tasks keep slowing you down? - You dream of creating custom tools for your team, but lack the time or resources? I’ve been there too. That’s why I created Artifig. ✨ What is Artifig? Artifig is an AI-powered Figma plugin that empowers anyone to build their own Figma plugins using just natural language. No coding needed—simply describe what you want, and watch as your idea transforms into a fully functional, real-time plugin. 🚀 Redefining Figma Plugin Development The core philosophy of Artifig is simple: Designers often have countless ideas and creative visions, but many of them remain unrealized due to a lack of technical skills. We believe designers shouldn’t be limited by their inability to code. You should focus on creating, not be held back by technical barriers or repetitive tasks. Artifig takes you directly from "description" to "implementation." 🛠️ How Does It Work? 1. Describe Your Needs: Tell Artifig what you want, like “Create a skew transformation tool for objects, supporting horizontal and vertical skew with real-time preview functionality.” 2. Generate and Run the Plugin: Artifig instantly generates the plugin and runs it right within Figma. For example, the generated plugin can apply skew transformations to objects, precisely controlled via matrix transformations, with an intuitive user experience. 3. Optimize and Iteration: Need adjustments? Simply describe them, and Artifig will Iterating the plugin step by step. 4. Share Your Creations: Publish your plugins to the Artifig community, or remix plugins shared by others to build on their ideas. No learning curve. No complex steps. It’s as simple as that. 🌟 Key Features - Zero Barrier to Entry: No coding experience needed—any Figma user can create plugins effortlessly. - Multilingual Support: Works in multiple languages, including English, Chinese, French, Japanese, and German. - What-You-See-Is-What-You-Get: Generated plugins run in real-time, so you can quickly validate and refine your ideas. - Open and Flexible: The generated plugin code is 100% yours—modify it, distribute it, even use it commercially. - Global Community: Share your plugins, explore others’ creations, and publish your plugins to the Figma community. 🎯 Why is Artifig a Game-Changer? 1. No More Repetitive Work Let AI handle the tedious, time-consuming tasks: batch renaming layers, auto-aligning elements, or applying styles in bulk. All you need to do is say, “Import a PDF and arrange each image on the canvas with 20px spacing.” 2. Quickly Bring Ideas to Life From color contrast checks to data imports and custom components, all your “what if we could” ideas can now become plugins. Just one natural language description, and Artifig makes it happen. 3. Custom Tools for Your Team Build tailored tools for your team, creating unique solutions to streamline your workflow. 4. Not Just a Tool, But a Learning Experience Artifig explains the logic behind the code it generates, helping you understand Figma APIs and JavaScript. Today, you’re a designer; tomorrow, you could also be a design engineer. 🧑‍🚀👩🏻‍💻🥷🏻 Who is Artifig For? - Beginners: No development experience needed—just describe your ideas and let Artifig do the rest. - Experts: Save time and focus on high-value tasks while Artifig handles the repetitive work. - Learners: Use Artifig as a bridge to deepen your understanding of development. - Teams: Build custom tools to enhance collaboration and efficiency. 🎉 Ready to Get Started? I believe designers’ time and focus should be spent on creating, not on wrestling with complex tools. Artifig is the first step toward realizing this vision. Try Artifig now and experience an unprecedented flow of creativity!

yancymin

21,222 views • 1 year ago

2:03

🚀 Exciting Launch on Product Hunt: Chat Thing! 🚀 Imagine creating a fully customized AI chatbot in minutes no coding required. That’s exactly what Chat Thing makes possible! Whether you want to train a bot on your own data or integrate with powerful AI models, this tool is designed to give you complete control over your chatbot experience. Why check it out? ✅ No-code setup – Build and deploy in minutes ✅ Custom AI training – Use your own data for personalized responses ✅ Seamless integrations – Connect with APIs, databases & more ✅ Versatile use cases – Customer support, personal assistants, and beyond If you've ever wanted to build your own AI assistant, now's the time. Check out Chat Thing on Product Hunt and let us know what you think! 🔗 Support Now: #AI #NoCode #Chatbots #ProductHunt #ArtificialIntelligence

RAVI KUMAR SAHU

13,123 views • 1 year ago

0:43

Adobe tried to buy Figma for $20 billion in 2022. The deal collapsed. So Figma went public on the NYSE in July 2025 instead. Ticker FIG. Public company. Quarterly earnings. Wall Street pressure. You know what happens to design tools after they IPO. In March 2025, Figma raised the Professional Full seat 33%. From $15 to $20 a month. Organization seats jumped to $55. Enterprise to $90. Then they took Dev Mode, which was free during beta, and locked it behind a paid seat. Your developers now pay extra to inspect the designs your designers already paid to create. In March 2026, Figma started charging for AI credits on top. If Figma raises prices again, you pay. If Figma gets acquired, you pray. If Figma shuts down, your files die with it. Your design system. On their servers. In a proprietary format only their app can read. To draw rectangles on a screen. There is an open source design platform that runs on your hardware. Stores your files in plain SVG. Costs $0 forever for unlimited users. It is called Penpot. 45,700+ stars on GitHub. A full Figma-grade design platform built on open web standards. Vector editing. Components. Design tokens to W3C spec. Flex and Grid layouts. Real-time multiplayer. Interactive prototyping. Here's what it does: → Real-time collaboration. Live cursors. Comments in line. → Components, variants, shared libraries. → Auto layout, Flex, CSS Grid. The tool outputs production CSS, not lookalike CSS. → Interactive prototypes with overlays, animations, and flows. → Inspect tab. Free. Built in. Every developer grabs production CSS, SVG, HTML without a separate seat. → Plugin ecosystem. Figma import to migrate your files. → Self-host on Docker in one command. Your designs never leave your network. Here's the wildest part: Figma stores your designs in a proprietary format only Figma can read. Penpot files are SVG. The same format your browser has rendered for 25 years. Open them in any editor. Open them in 20 years. Nobody can lock you out. The feature Figma charges your developers extra for, Penpot gives away. Without asking permission. Figma Professional: $20/month per seat. A 10-person team: $2,400/year. Figma Organization: $55/month per Full seat. A 50-person org: $33,000/year. Penpot: $0. Unlimited users. Unlimited files. Unlimited teams. Self-hosted. Free forever. 45,700+ stars. 2,700+ forks. 250+ contributors. MPL-2.0 license. Backed by a community that believes design tools should be free. Your designs. Your files. Your standards. 100% Open Source. (Link in the comments)

Nav Toor

216,542 views • 3 months ago

2:03

I've been building a music player with Next.js for fun. Here's a quick demo of how it works (it's open source!) • Demo: • Code: If you want to learn more about how it's built, here's more details ↓ I'm using Postgres (with Drizzle) to store information about the songs and playlists. Audio and image files are stored in Vercel Blob (object storage), and the URLs are then referenced in the database. For the UI, I'm using shadcn/ui (so Tailwind CSS and Radix). This made it easy to copy/paste in some nice components, like the dropdown menus. I built the entire first version of the UI in v0 and then iterated from there, feeding it my Drizzle schema as a source in the project and having it scaffold some of the boilerplate for me: I added support for keyboard navigation (using arrow keys) or vim motions (j/k to go up/down, and h/l to go between playlists and tracks). Also, space to toggle the now playing song, and / to focus the search input. The search function has a nice utility to highlight the currently searched text on the page in yellow. Then, I was exploring how to pass metadata from my application to macOS or iOS. Turns out there's an API for that – MediaSession. Web apps can share metadata about what media is playing (title, artist, album artwork) and sync play/pause/seek with system media controls. Works across modern browsers — even integrates with iOS dynamic island and shows up on lock screens: I set up my app like a PWA – it has a manifest.json file, so it can be installed to my iOS home screen or added to my dock on macOS. On iOS, it then uses the full screen height `100dvh` (dynamic viewport) and has padding on the bottom for the safe area with the `env()` CSS function. Finally, I was able to use the Vercel AI SDK in a script to clean up the metadata on audio files I downloaded from YouTube. Bonus: I even was able to dogfood the React Compiler, which helped me fix a performance bug! That's all! It's fun to make personal software:

Lee Robinson

118,242 views • 1 year ago

1:03

10 GitHub repos with 560k+ ⭐ combined stars that could save vibe coders $15,000+/year in SaaS bills 1. shadcn/ui ⭐121k - copy-paste components, not a package. What every AI-generated frontend is actually built on now. 2. supabase ⭐108k - Firebase alternative that's actually free to start. Auth, DB, storage in one Claude Code prompt. 3.open-design ⭐84.5k - open-source Claude Design alternative. Your coding agent becomes the design engine. 4. awesome-ai-agents ⭐29k - every agent framework and no-code builder in one list, ranked by what people actually ship. 5. awesome-generative-ai-apps ⭐3k - 50+ open-source AI apps you can clone, deploy, and monetize instead of paying $30-50/mo for the SaaS version. 6. medusa ⭐35k - full ecommerce backend, open source. Skip Shopify Plus fees entirely on your next vibe-coded store. 7. appwrite ⭐57k - complete backend-as-a-service, self-hosted. Auth, DB, functions, storage, one prompt away from Firebase money. 8. chatwoot ⭐35k - customer support platform, self-hosted. Replaces Intercom/Zendesk seats running $100+/agent/month. 9. nocodb ⭐64k - turns any database into an Airtable-style interface. 10. activepieces ⭐23k - open-source Zapier alternative built for AI workflows. Automate without the per-task pricing. Save this before you pay for another tool this repo already replaces for free 👇

unicode

47,548 views • 7 days ago

0:40

🚨 MASSIVE ANNOUNCEMENT 🚨 For the past six years, we’ve helped thousands of traders level up, refine their strategies, and become consistently profitable. Now, we’re taking things to an entirely new level that will allow us to help even more people achieve their trading goals. This isn’t just another update. It’s an evolution of how we approach trading, education, and community. The Big News 👀 We are officially merging panda options, spacemonkey , with Trade With Insight | John to create the ultimate unified trading community. Three elite teams. One powerful platform. Limitless opportunities. ✅ More Trade Alerts & Live Market Analysis ✅ A Bigger Team of Expert Traders ✅ Daily Live Streams & Trade Reviews ✅ New & Expanded Educational Resources ✅ Deep-Dive Webinars & Strategy Sessions ✅ A Supportive & Collaborative Community We’ve always said that trading is a team sport. We’re better, smarter, and faster when we work together. With this merger, we’re taking that to the next level by pairing our professional trading approach with a collaborative atmosphere that empowers every member to become a consistently profitable trader. This is about building something bigger—a space where beginners, experienced traders, and professionals can sharpen their edge, refine their strategies, and capitalize on high-probability setups in any market condition. For those who’ve been with us since the beginning, you already know what we bring to the table. And for those who are just discovering us, this is your chance to experience the best trading community out there. 🎉 To celebrate, we’re offering 50% OFF for the first 100 traders who join 👈 🔗 Join now → Code: merger This is just the beginning.. Are you Ready To Trade With Insight 🚀

Trade With Insight

70,389 views • 1 year ago

0:59

PMs: AI is coming for your job! …but not in the way you think.... I recently posted a demo of Operator using to run an entire PM workflow in just 5 mins—all while I was in the shower. Here’s what it did: 1️⃣ Analyzed feedback from thousands of Slack users to surface prioritized feature requests and complaints. 2️⃣ Added insights to the roadmap. 3️⃣ Wrote a PRD about Slack Notifications. 4️⃣ Created a user story with acceptance criteria and assigned it to an engineer in Linear. The reactions were fascinating... 🔹 Thousands of PMs bookmarked the post—determined to figure out how to do this themselves (or, let’s be real, to avoid getting replaced by AI). 🔹 Some yelled that this isn’t what PMs do—claiming AI analysis of user feedback is just “crowdsourcing what to build/fix next.” 🔹 But many more were excited about what they could achieve when AI handles the busywork—PRDs, user stories, and all—so they can focus on high-impact strategy and product craft. So yeah, AI is coming for your job 😉 But it’s coming to: ✅ Help you do it better. ✅ Deliver products that evolve faster to meet real user needs. ✅ Make sure you’re not just overdosing on podcasts while ignoring user feedback. As both a product builder and a product user, I’m excited for what’s ahead 🚀 Make sure to turn on the sound to hear the AI-generated voiceover narrating what the AI agent is doing in the demo 🔊

Yana Welinder

24,030 views • 1 year ago

1:18

Work Update - We Built an AI Interviewer 🎉 We’ve been working on something for the past few months, and I’m really excited to finally share it. It’s called Pizo - the world’s first AI-powered two-way interviewer. With Pizo, candidates can see and interact with their AI interviewer in real time. It’s designed to make hiring easy, scalable, and way more natural and human, while streamlining the whole process. Here's what sets Pizo apart: - Face-to-face AI interviews that feel like real conversations - Dynamic follow-up questions based on candidate responses - Faster, smoother hiring for both candidates and employers We’ve been using it at ClanX, and a few other companies are already seeing great results. Pizo is now in public beta. Join the waitlist at Do check let me know what you think, I'm open to early feedback! Lastly, tag someone who should see this :)

Juned Khatri | Engineer Turned Recruiter 🇮🇳

18,206 views • 1 year ago

0:30

New Tools for a New Era. Coding agents like Claude and Cursor have dramatically reduced the time it takes to go from idea to functional software. But the experience of designing and refining with them sucks. One reason for this is that while the terminal is an incredible tool for communicating direction with language, it is a terrible tool for defining and exploring visual and interactive objects. Here is one idea for how we might fix a small part of that. In the old world, when you wanted to create a transition or animation in your app, you would type some code, refresh your local server, and click to run your animation. It probably wasn't right, because after all no one can know what 'cubic-bezier(0.3, 0.05, 0.45, 1)' really feels like when you read it. You need to see it. Feel it. Interact with it in a real world context. So you'd edit some values, save, refresh, and keep guessing and checking until it felt right. Today, you can write a quick, single-use tool that's a visual studio for designing animations. You can then configure some components and containers common in all apps, and explore different animations in real time, adjusting key properties, and getting it just right. Then, you can copy a highly detailed prompt (or export a skill containing all your animations) that captures your intent and direction with perfect clarity. Paste this into your terminal and your agent instantly implements it everywhere. To me, this is an improvement over the old world, and a better way to work in today's. I'm extremely excited to see the ways in which our ability to rapidly create software will shape how we design software tomorrow. Feedback, ideas, and critiques welcome!

joshpuckett

82,065 views • 7 months ago

1:27

Introducing the Clips chrome extension - the easiest way to send bug reports to agents with video, transcript, and browser debug info captured automatically. 100% free and open source. If you are like me and get tired of manually typing instructions to agents, attaching screenshots, pasting debug logs, and all of that, this might be your new favorite tool. With the Clips chrome extension, you can just click the Clips icon, hit record, and start talking. Visually demonstrate your issue, go through the flow, point out what’s broken. Clips will capture everything on your screen, plus network requests, browser logs, client errors, and all the details around them. And it redacts sensitive information. Then it gives you a link you can send to humans so they can play it and take a look. Or, more importantly, just give it to your agents by just pasting the URL to them. The link has special metadata for agents so just from the URL, the agent can pull all information from the clip automatically. No plugin or MCP server required. That means it can "see and hear" what’s in the video - read the transcript, grab snapshots at any timestamp, and inspect the logs and network requests that were shared with it. So whether you want to quickly demo an issue and send all that context to an agent, or get better bug reports from teammates, recording and sending Clips makes that super easy. Unlike expensive apps like Loom, this is all 100% free and open source. The framework that powers this, plus a bunch of other free applications, is open source too. You can just sign up and use it, or fork it and customize it to your needs. This, in my opinion, is the future of software. Rather than bloated SaaS that charges you a ton of money and still doesn’t even have the things you need, we get free open source canonical apps that you can fork and customize in any way you want. I'll link to all this stuff in the replies. If you try it, let me know your feedback.

Steve (Builder.io)

60,635 views • 1 month ago

Live Cam

Video Failed to Load

Ajay Patel

Anya Rossi• Live Now

0 Comments

Related Videos