# Component Library

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. 335K+ weekly npm downloads for @pandacss/dev with RSC compatibility.

Open-source visual editor for React — self-hostable core, optional Puck Cloud

Puck is an open-source visual page builder for React that gives teams a drag-and-drop editor backed by their own components. The MIT-licensed core remains self-hostable and persists plain JSON, while Puck Cloud and Puck AI now add optional hosted and agentic editing layers. With 12.8K+ stars, it is the dev-first visual editor to watch.

npm for design engineers — shadcn/ui component marketplace

21st.dev is the largest open-source marketplace of shadcn/ui-based React Tailwind components, blocks, and hooks. Used by 1.4M developers with 200K monthly active users. Functions as an MCP server enabling AI coding agents to discover and compose UI components via API. Features a Magic AI feature that generates components from natural language prompts. All components installable with npx shadcn.

Design-system-aware AI prototyping for code-ready product interfaces

Magic Patterns turns product ideas, prompts, screenshots, and existing UI into editable, code-ready interfaces. Its design-system-aware editor supports collaborative iteration, two-way GitHub sync, and an MCP workflow for moving designs between the canvas and coding agents—positioning it between prompt-to-app builders and design-handoff tools rather than as a single-screen generator.

Write components once and compile them into native code for multiple frameworks

Mitosis is Builder.io-backed open-source infrastructure for writing a component once and compiling it into native framework components for React, Vue, Angular, Svelte, Qwik, Solid, React Native, and other targets. It supports cross-framework design systems and Figma-to-code synchronization, but is distinct from the Builder.io visual builder product.

Headless rich text editor framework with real-time collaboration

Tiptap is a headless rich text editor toolkit for building Notion-like collaborative content experiences in web applications. Built on ProseMirror, it provides a modular extension system for formatting, mentions, tables, drag-and-drop blocks, slash commands, and custom node types. The open-source core is framework-agnostic with official bindings for React, Vue, and vanilla JavaScript. Cloud extensions add real-time collaboration, AI content generation, and document management.