UI & Design to Code

Utility-first CSS framework for rapid UI development

Tailwind CSS is a utility-first CSS framework with 87K+ GitHub stars for building custom designs by composing single-purpose utility classes directly in HTML. Instead of writing custom CSS, use classes like flex, pt-4, text-center to style elements. Features a JIT compiler for instant builds, responsive design utilities, dark mode support, and extensive customization. Powers the design systems behind shadcn/ui, Headless UI, and thousands of production sites.

Beautifully designed components

Copy-paste component library for React that puts you in full control — not a dependency, you own the code. Built on Radix UI primitives and Tailwind CSS for accessibility and styling. The most popular React component system in the ecosystem, setting the standard for how modern component libraries should be distributed and customized by developers.

Python web framework with HTMX, no JavaScript needed

FastHTML is an open-source Python web framework by Answer.AI that renders HTML directly from Python functions using HTMX. It eliminates the JavaScript build step entirely, letting developers create interactive web apps with pure Python. FastHTML is designed for AI demo apps, admin tools, and internal tooling where full-stack simplicity matters more than SPA complexity. Built by Jeremy Howard's team.

Ultra-fast desktop apps with TypeScript, Bun, and Zig

Electrobun is an open-source cross-platform desktop app framework that combines TypeScript with Bun runtime and Zig for native performance. It produces 12MB base installs versus hundreds of MB for Electron, while maintaining full web technology compatibility. Electrobun uses the system's native webview instead of bundling Chromium, delivers sub-second cold starts, and provides native OS integrations through a Zig bridge layer.

Builder.io visual canvas with Figma-to-code and code-to-Figma sync

Fusion by Builder.io is a visual development canvas that provides bidirectional sync between Figma designs and production code. Designers edit in Figma while developers work in code, and changes propagate in both directions. Supports React, Vue, Svelte, Angular, and Qwik output with a visual editor for non-developers to make content and layout changes without touching code.

Production-ready React animation library, evolved from Framer Motion

Motion (formerly Framer Motion) is the most popular React animation library, providing a declarative API for complex animations, gestures, layout transitions, and scroll-triggered effects. Supports spring physics, keyframes, shared layout animations, and exit animations. Powers animations across thousands of production React applications with an API designed for developer ergonomics.

Animated number transition component for React and frameworks

NumberFlow is a lightweight component that animates number transitions with smooth morphing effects. Numbers roll, slide, and transform between values rather than snapping instantly, adding polish to dashboards, pricing displays, counters, and financial interfaces. Available for React, Vue, Svelte, and vanilla JS with over 6,300 GitHub stars and minimal bundle impact.

Copy-paste React component collection built on Tailwind v4

Origin UI is a curated collection of copy-paste React components built with Tailwind CSS v4 and Radix UI primitives. It provides production-ready UI patterns for dashboards, forms, navigation, data tables, and settings panels. Components are designed to be dropped directly into projects with minimal modification, following modern design conventions with dark mode support.

Collection of 150+ animated React components for landing pages

Magic UI provides over 150 animated React components designed for creating visually impressive landing pages and marketing sites. Components include animated text effects, particle backgrounds, scroll-triggered animations, 3D cards, and interactive elements built on Tailwind CSS and Framer Motion. Copy-paste installation model following the shadcn/ui pattern.

Zero-runtime CSS-in-JS framework with type-safe style authoring

Panda CSS is a zero-runtime CSS-in-JS framework that generates atomic CSS at build time from type-safe style definitions. It provides the developer experience of CSS-in-JS with runtime performance of static CSS extraction. Supports design tokens, responsive styles, conditional variants, and recipes for component style APIs. Over 500k weekly npm downloads with RSC compatibility.

Headless UI component library for React, Vue, Solid, and Svelte

Ark UI is a headless component library providing unstyled, accessible UI primitives for React, Vue, Solid, and Svelte. Built by the Chakra UI team using state machines for predictable behavior across frameworks. Includes complex components like date pickers, color pickers, comboboxes, and tree views that are notoriously difficult to build from scratch while maintaining accessibility.

Build and share ML web apps in Python with a few lines of code

Gradio is an open-source Python library for creating interactive web interfaces for machine learning models. It supports any data type including images, audio, video, 3D objects, and dataframes. Apps deploy for free on Hugging Face Spaces with auto-scaling, or can be shared via temporary public links. Gradio 5 adds server-side rendering, WebRTC streaming, and an AI Playground for generating apps.

Browser-native frontend coding agent for production codebases

Stagewise is an open-source frontend coding agent with 6,500+ GitHub stars that runs directly in the browser on localhost. YC S25 backed, it lets developers and designers point-and-prompt on live web applications with full devtools and console access, bridging the gap between visual editing and production codebase modification.

Local open-source AI app builder running entirely on your machine

Dyad is a local-first, open-source AI app builder with 20,000+ GitHub stars that provides a Lovable and Bolt.new alternative running entirely on your machine. It supports React and Next.js frameworks, integrates with Ollama for fully offline AI generation, and works cross-platform on macOS, Windows, and Linux with both cloud and local LLM providers.

React components for building AI chat interfaces

assistant-ui is a TypeScript/React component library for building AI chat interfaces with streaming responses, tool rendering, branching conversations, and LLM provider integrations. It supports Vercel AI SDK, LangGraph, and custom backends out of the box. Used by LangChain, Browser Use, and Stack AI. YC W25-backed with 9,000+ GitHub stars and 450K+ monthly npm downloads.

MCP server for AI-powered UI component generation

Magic MCP is an MCP server from 21st.dev that enables AI agents to generate polished UI components inspired by modern design engineering patterns. It gives coding agents access to a library of high-quality component templates and design patterns, accelerating frontend development through intelligent component scaffolding.

Completely unstyled, accessible UI components for React and Vue by Tailwind Labs.

Headless UI is an open-source collection of completely unstyled, accessible UI components for React and Vue, created by the Tailwind CSS team. Provides WAI-ARIA compliant components like Menu, Listbox, Switch, Dialog, Popover, Tabs, and more. Designed to pair perfectly with Tailwind CSS.

Unstyled, accessible React component primitives for building design systems.

Radix UI is an open-source library of unstyled, accessible React component primitives. Provides fully functional components (dialog, dropdown, tooltip, tabs, accordion, etc.) without any styling, letting developers apply their own design. The foundation behind shadcn/ui. WAI-ARIA compliant with keyboard navigation built in.

Full-stack app builder in the browser

AI-powered browser-based full-stack app builder from StackBlitz that turns natural language prompts into working web applications with zero local setup. Runs on WebContainers — a full Node.js runtime in the browser — giving AI control over filesystem, packages, terminal, and dev server. Supports React, Next.js, Vue, Astro, Svelte with live preview and one-click deploy to Netlify or Vercel. V2 adds built-in databases, auth, storage, and hosting via Bolt Cloud. 5M+ users.

Vercel's AI UI generator

Vercel's AI-powered UI generation tool that creates production-ready React and Next.js components from text or image prompts. Outputs clean code using shadcn/ui and Tailwind CSS, deployable to Vercel or copyable into existing projects. Supports iterative refinement through conversation, live browser preview, and generates accessible, responsive code. Ideal for rapidly prototyping landing pages, dashboards, forms, and UI components without manual setup.

AI website wireframe and design generator

Generate complete website sitemaps and wireframes with AI in minutes. Relume outputs Figma and Webflow-ready component libraries, with a built-in library of 1000+ components and style guides. Ideal for designers and agencies who need to rapidly prototype client projects without starting from scratch every time.

AI UI design generation from text prompts

Generate high-fidelity UI designs from natural language descriptions in seconds. Galileo AI creates editable Figma designs with realistic content, components, and layouts powered by generative AI. Perfect for product teams and designers who want to explore multiple design directions quickly before committing to detailed implementation.

AI-powered app builder from text prompts

Generate full-stack web applications from natural language prompts. Create.xyz produces interactive prototypes and production-ready apps with databases, authentication, and API integrations. Designed for non-technical founders and product teams who want to build and iterate on ideas rapidly without writing code from scratch.

Visual builder for React with headless CMS

Open-source framework for building applications powered by large language models. Provides composable abstractions for chains, agents, retrieval-augmented generation, and memory. Supports Python and JavaScript with integrations for all major LLM providers, vector stores, and data sources, making it the most widely adopted LLM orchestration toolkit.