New component: Questionnaire. Use it to build multi-step question... flows, like agents asking follow-up questions. Supports single and multiple choice, freeform answers, skippable and conditional steps, controlled and resumable state, custom progress, bring-your-own validation, full keyboard navigation with answer shortcuts, ssr-ready, accessible and composable. Available for Base UI, Radix, React Aria in all styles. Also available as unstyled headless in shadcn/react.show more

You can now build translucent dropdown menus, selects, and... comboboxes on shadcn/create. Mix in your custom styles, icons, fonts, and radii and build something different. Your own preset. All it takes is a few clicks.show more

I just published the full guide to building forms... with the Field component: - TanStack Form & React Hook Form - Zod validation and displaying errors - Practical examples we’ll actually use - Inputs, Radios, Fieldset, Arrays & more Check it out. Link below.show more

Shipped the new chart blocks. I’ve also added more... examples on how to build advanced tooltips with custom label, icons and formatters. Next up: dashboards and cli updates.show more

Introducing Extend UI — open-source components for document agents... - 14 components & examples for PDF, DOCX, and XLSX viewers, plus bounding box citations, file upload, e-signature, and more - fully customizable - MIT licensed when we started, we tried every file viewer and document component library we could find unfortunately, none of them had all the functionality (and polish) that we wanted, so we ended up building our own for Extend it was only ever meant to be internal, but enough customers kept asking for it that we decided to give it back to the community it's useful for building agents, user-facing document flows, or internal tools we use and maintain it for Extend ourselves, so it'll keep getting better over time (and it's battle tested on millions of pages running through our system every day) it also works with design system agents like Magic Patterns for faster exploration and prototyping available today on the shadcn component registry! some examples in 🧵show more

Introducing shadcn/typeset. You know how you render markdown and... get back plain, unstyled HTML? Headings, paragraphs, lists, tables. So you style the elements one by one: font sizes, line heights, spacing. You do it for your blog. Then you do it again for docs. Then again for the chat. Every time, you're fighting the same thing: sizing and spacing. To fix this, we created typeset.css: one file that styles everything inside a typeset container. It lives in your project, so you can change it directly when you need to. And we made it work beautifully with streaming markdown.show more

Introducing Themes. Hand-picked colors that you can copy and... paste into your apps. This builds on top of the Styles API. Pick a style with some sane defaults, add your colors and make it yours.show more

We’ve added a new command: npx shadcn apply. Instantly... apply a full preset across your project. Swap components, themes, colors, CSS variables, fonts, and icons all at once. Apply. Test. Repeat.show more

When you're working on a new app, it can... takes a few tries to find something you like so we've made switching presets really easy. Run init --preset with a new code in your app, and the cli will take care of reconfiguring everything including components, theme & dependencies.show more

How I use v0 for UI development ⬇️ Exploration:... I rely on v0 a lot for exploration. If you have an idea you want to visualize, type in your prompt & let v0 transforms it into components. For the 1st generation, I always want v0 to be creative. I use the Quality ✨ toggle.show more

OpenClaw, but built for normal people. Sim is an... open-source platform that lets you build AI agent workflows on a drag-and-drop canvas. Connect them to channels like Telegram and WhatsApp and deploy without writing a single line of code. They also have a built-in Copilot that generates entire workflows from plain English, which you can then tweak and customize in the UI. Key features: - Free and open-source (Apache 2.0) - Vector store integration for RAG-grounded agents - Self-host with one command (`npx simstudio`) - Run fully local with Ollama, no API keys needed - Supports vLLM for production-grade self-hosted inference The thing I really like about Sim is the level of control you get. You can add conditional branching, parallel execution, human-in-the-loop approval gates, and even nest workflows inside other workflows. Everything is visible on the canvas, so you know exactly what your agent is doing at every step. And you can build a workflow in Sim, deploy it as an MCP server, and plug it into any agent, including OpenClaw. I've shared the link to Sim's GitHub repo in the next tweet.show more

I’ve been craving a video editor with motion baked... in, designed to work with my own AI agents. Claude, Codex, whatever I want to use. I don’t want to be blocked by someone else’s credit system for every little interaction. I also wanted a Figma-like canvas/editor for when I want to jump in and tweak any little detail. So we built it: Video & audio editing: cut, zoom, speed up, add B-roll. Motion, animation, 3D, custom shaders & effects, custom 3D models, dynamic components & templates, audio and beat matching. And it’s all programmable. Design your own assets directly on the canvas, bring them in from Figma or the web, or just let the agent find them, mock them up, or record what it needs automatically. You can even drop in your screen recordings and just let loose. Supercut users: yes, it’ll have first-class support for your recordings, but it’ll work with anything. I’m going to be dropping a lot more examples and tutorials, so follow along. DM me for early access if you’re willing to give feedback. We’ll open it up to everyone very soon.show more

Starting a new project shouldn’t mean rebuilding your setup... from scratch. Experiment: init from an existing project (local or remote) and bring over components (including customizations), theme, fonts, deps, the whole setup and file structure. Works cross-framework: start a TanStack app from an existing Vite app.show more

Dark Mode and Focus Rings.

Tonight I left my laptop turned on, and woke... up in the morning with a $7,000 profit. While I was sleeping, my cloud second brain was analyzing trends and running funnels on autopilot Famous investor Naval Ravikant once brilliantly noted: AI brains are meant for coming up with ideas, not clogging bio-servers with gigabytes of other people's garbage The main point Point Claude at a local folder and feed it all the accumulated digital junk files, articles, reports, notes. The artificial intelligence absorbs this chaos itself, builds ironclad logic, and turns a pile of files into a single, living knowledge base. The system works on the principle of compound interest: the more data you feed it, the more accurately it predicts your next steps and generates ready-made solutions Step-by-step process: Choose a base, either Notion or Obsidian, as long as the cloud is accessible from any device 24/7 Implement the CODE method by saving all the chaos to your inbox, sorting it out, extracting the essence, and monetizing your knowledge Connect AI agents by setting up automation via API so the AI sorts data and generates content on its own while you rest A more detailed guide is described in the article. I highly recommend adding this to your bookmarksshow more

CodeHagen ok done. you can now migrate your ui... components between icon libraries.show more

If you’ve ever managed custom icons in React Native,... you know the frustration of choosing between performance and developer experience. Libraries like 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝘀𝘃𝗴 are flexible but heavy. Every icon creates its own React subtree. The alternative? Manual icon fonts that force you into a constant back-and-forth of using web tools like IcoMoon and syncing font assets every time a design changes. 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 𝗟𝗮𝗯𝘀 just released 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗮𝗻𝗼-𝗶𝗰𝗼𝗻𝘀 to solve exactly this. It’s a build-time icon font generator that gives you the performance of native fonts with the flexibility of simple SVG files. 𝗪𝗵𝗮𝘁’𝘀 𝗵𝗮𝗽𝗽𝗲𝗻𝗶𝗻𝗴? Instead of rendering complex vector paths at runtime, this library automatically converts your folder of SVGs into an optimized icon font during the build process. It essentially teaches your app to treat icons like standard text characters, which allows it to bypass React’s component tree and layout engine entirely. ➡️ 𝗕𝘂𝗶𝗹𝗱-𝘁𝗶𝗺𝗲 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗼𝗻: It handles the entire pipeline—watching your icon folder, converting SVGs to .ttf files, and linking them to your native project automatically. ➡️ 𝗡𝗮𝘁𝗶𝘃𝗲 𝗣𝗲𝗿𝗳𝗼𝗿𝗺𝗮𝗻𝗰𝗲: Because icons render as native text glyphs, it is significantly faster than traditional SVG rendering, making it the ideal choice for long, scrollable lists or icon-heavy dashboards. ➡️ 𝗘𝘅𝗽𝗼 𝗖𝗼𝗻𝗳𝗶𝗴 𝗣𝗹𝘂𝗴𝗶𝗻: It features first-class support for Expo, automating the native plumbing like Info.plist updates and asset linking during the prebuild phase. ➡️ 𝗔𝘂𝘁𝗼𝗺𝗮𝘁𝗶𝗰 𝗧𝘆𝗽𝗲 𝗦𝗮𝗳𝗲𝘁𝘆: The library generates TypeScript definitions for your icon set, providing full IDE autocomplete and ensuring you never break the UI with a misspelled icon name. 𝗪𝗵𝘆 𝗶𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀? In high-performance applications, small overheads add up. By shifting the heavy lifting from the mobile device to your build machine, 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝗻𝗮𝗻𝗼-𝗶𝗰𝗼𝗻𝘀 ensures your UI stays buttery smooth while keeping your developer workflow modern. It’s another great example of how 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗠𝗮𝗻𝘀𝗶𝗼𝗻 continues to solve the "last mile" of performance friction in the ecosystem. Before you migrate your entire library, keep in mind: this is designed for the 𝗡𝗲𝘄 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 (Fabric) and requires React Native 0.74 or higher. #ReactNative #Expo #SoftwareMansion #Icons #MobileDev #Performance #DeveloperExperience #OpenSource #JavaScript #TypeScript #SVG #Fabricshow more

Working on a new Command Menu to surface more... context where you need it: - Colors in all formats. Enter to copy oklch or cmd+c for other format - Shortcut to copy cli command for components - Remembers your color format & package manager Small UX wins. Huge impact for docs.show more

LangGraph. CrewAI. Agno. Which one to pick? The good... news is that this will not matter soon! Finally, we have a full picture of how the industry is solving this with just three open protocols that work across ALL frameworks. It's not about picking the best framework. Instead, it's about understanding how protocols create interoperability. The Agent Protocol Landscape shows how three complementary protocols are creating a universal language for Agents: > AG-UI (Agent-User Interaction): - The bi-directional connection between agentic backends and frontends. - This is how agents become truly interactive inside your apps, not just as chatbots, but collaborative co-workers. > MCP (Model Context Protocol): - The standard for how agents connect to tools, data, and workflows. > A2A (Agent-to-Agent): - The protocol for multi-agent coordination. - How agents delegate tasks and share intent across systems. These aren't competing standards. They're layers of the same stack and have handshakes with each other. So instead of building point-to-point integrations, you build to protocols. Moreover, you can integrate LangGraph, CrewAI, or Agno into the same frontend, without rewriting your UI logic. These protocols let everything work together. For instance: - Your LangGraph agent pulls data via MCP. - It delegates analysis to a CrewAI agent via A2A. - Results stream to your React app via AG-UI. - Users see real-time collaboration in your interface. This way, you can focus on building agent capabilities instead of integration mechanics. The protocols handle interoperability automatically. CopilotKit unifies this entire stack into one framework so you can build "Cursor for X" style apps without implementing each protocol from scratch. It gives you all three protocols, generative UI support, and production-ready infrastructure in one framework. I have shared this playbook in the replies! It breaks down handshakes, misconceptions, and real examples and shows exactly how to start building.show more

Built rico's chart. It has custom vectors, custom tooltip... cursor, gradient, gaussian blur for hover effects, themes.. Whatever you throw at recharts, it just works.show more