30 open-source projects similar to penpot/penpot, ranked by shared indexed features. Tags may describe platforms or build tools rather than the same primary purpose. Check each project’s use case, license, and deployment requirements before treating it as a replacement.
Semi Design is a React UI component library and design token system used to build web application frontends. It provides a collection of pre-built interface elements and a framework of visual constants to maintain consistent branding across a product. The project features a design-to-code workflow that converts visual design drafts into production-ready React code and stylesheets. It includes an internationalization framework for adapting interfaces to different languages and text layouts, as well as a web component wrapper to isolate UI elements for use in SDKs and browser plugins. The libr
sketch-measure is a design specification tool and design-to-code annotation utility for Sketch. It functions as an HTML design spec generator and asset export manager, creating technical handoff documentation and measurement annotations directly from design files. The tool generates interactive web viewers and standalone offline HTML pages that allow for the inspection of dimensions, styles, and design details. It includes capabilities for managing color palettes via XML export and capturing influence rectangles to ensure exported image dimensions account for shadows and borders. The system
Code Connect is a design system integration tool that bridges the gap between codebase component definitions and design software. It functions as a synchronization utility that surfaces production-ready code snippets and implementation details directly within design environments, establishing a single source of truth for interface elements. The tool distinguishes itself by using a schema-based, declarative approach to map code components to design assets. By parsing source code to extract component definitions and property configurations, it ensures that the code snippets displayed to designe
Arco Design is a React UI component library and design system framework used to build professional web interfaces. It provides a collection of pre-built visual elements and layouts designed to maintain a consistent design language across applications. The system features a token-based theming engine that utilizes hierarchical design variables and CSS variables to enable granular visual customization. This allows for the modification of global and component-level styles through a dedicated theme editor or loader to align the interface with specific brand identities. The framework supports ent
Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The sys
Sass is a stylesheet compilation engine and CSS preprocessor that extends standard CSS with variables, nested rules, mixins, and functions. It functions as a comprehensive design system tool, enabling developers to organize complex stylesheets into modular, reusable components while automating the transformation of advanced syntax into browser-compatible CSS. The project distinguishes itself through its sophisticated build automation and language-level extensibility. It provides robust support for programmatic style generation, including conditional logic, iterative loops, and unit-aware math
StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into optimized static CSS and type-safe class names. It functions as a multi-framework styling tool, generating standard CSS assets compatible with various JavaScript UI frameworks and server components. The system includes a CSS design token system and theme engine for managing shared constants and composing visual schemes. It allows for the creation of light, dark, and custom themes through variable overrides and token inheritance. The project covers component styling through object
Open Design is an AI design orchestration platform and LLM agent workspace designed for generating prototypes, presentations, and motion graphics. It functions as a local-first environment that integrates various command-line AI agents and coding tools into a unified design workflow, allowing users to migrate design specifications into brand-compliant source code. The project is distinguished by its ability to enforce visual consistency through a design system manager that defines brand contracts and tokens using Markdown. It features a specialized motion graphics generator that converts HTML
Mantine is a comprehensive component library for building accessible and responsive web applications. It provides a foundational set of UI elements and layout primitives, anchored by a base component that supports consistent styling, spacing, and layout properties across the entire interface. The library is built on a design-driven theme engine that uses a provider-based system to propagate global design tokens and color schemes throughout an application. The library distinguishes itself through a robust architecture that emphasizes component composition and reusable interaction logic. It uti
Superdesign is an AI-powered design platform that generates UI mockups, wireframes, and multi-page user flows from natural language prompts within a collaborative canvas environment. It functions as a design-to-code exporter, producing production-ready HTML, ZIP archives, or Shopify Liquid templates for direct implementation, and includes an OpenAPI specification importer that automatically generates API documentation and client code from schema definitions. The platform distinguishes itself through a branch-based design exploration system that creates independent design variations from a sin
This project is a design token manager designed to bridge the gap between creative design tools and development environments. It functions as an automation utility that extracts design styles, variables, and components from design software and converts them into standardized, machine-readable data structures. The tool distinguishes itself by providing a framework for transforming design data to meet specific platform requirements, such as dark mode configurations or native mobile variable systems. It supports custom transformation middleware, allowing users to apply specific logic to token ou
This project is a comprehensive design system framework for building accessible, responsive, and consistent web interfaces. It provides a centralized architecture for managing visual properties and standardized component blueprints, ensuring that branding and interaction patterns remain uniform across diverse applications. The framework distinguishes itself through an accessibility-first approach, embedding semantic markup and inclusive design standards directly into its component blueprints. By utilizing a design-token-driven styling system, it centralizes visual values like typography, spac
This project is a framework-agnostic UI library and a collection of modular web components based on the Material Design visual system. It provides a comprehensive set of interactive interface elements and a responsive web grid system for organizing page content. The library utilizes a design token theme engine to apply consistent typography, colors, and visual styles across an interface. It separates behavioral logic from rendering to ensure that components remain compatible across different JavaScript environments. The system covers responsive layout design and web form interface developmen
Carbon is an enterprise design system that provides a comprehensive collection of reusable UI components, design tokens, and guidelines for building professional web applications. It functions as a CSS framework that enforces a unified design language across projects through standardized typography, spacing, and color palettes. The system utilizes a platform-agnostic design token system to maintain visual consistency across different technologies. This includes centralized management of brand colors, motion easing curves, and a curated library of accessible SVG icons. The framework covers a
Streamlit is a Python framework designed to transform data scripts into interactive web applications. It utilizes a reactive execution engine that automatically reruns scripts from top to bottom whenever a user interaction triggers a state change, ensuring the interface remains synchronized with the underlying data. By providing a declarative interface, it allows developers to build functional applications without requiring extensive knowledge of frontend web technologies. The framework distinguishes itself through an identity-based widget reconciliation system that persists user input across
This project is a high-performance, lightweight C graphics library designed for creating interactive user interfaces on resource-constrained embedded hardware. It functions as a comprehensive framework that provides a widget toolkit, a rendering engine, and hardware-agnostic drivers to support the development of graphical displays on microcontrollers and embedded systems. The framework distinguishes itself through a flexible, object-oriented widget hierarchy and a declarative layout engine that supports responsive design patterns like flexbox and grid systems. It enables developers to synchro
This project is a multi-purpose toolkit consisting of an AI agent knowledge base, a developer tool UI kit, a markdown presentation framework, a technical diagram renderer, and a TypeScript library bundler. It provides the infrastructure to curate documented guidelines into structured collections for automated AI outputs while offering tools for creating technical content and distributing software libraries. The markdown presentation framework allows for the creation of interactive slide decks featuring synchronized code blocks, motion transitions, and the rendering of mathematical formulas an
Avalonia is a cross-platform desktop framework that enables the creation of native-feeling applications for Windows, macOS, and Linux from a single codebase. It functions as a declarative UI toolkit, allowing developers to define complex visual hierarchies and interface structures using a markup-based syntax that maps directly to underlying object properties. By utilizing the Model-View-ViewModel architectural pattern, the framework facilitates a clean separation between application logic and user interface layout, which simplifies unit testing and component maintenance. The framework disting
This project is a cross-platform mobile icon library and renderer that provides scalable vector icon components for mobile and web applications. It functions as a vector font integration tool, utilizing a rendering layer that maps vector fonts to mobile components and web CSS to ensure consistent iconography across different platforms. The library includes a configuration-driven pipeline to convert SVG files and CSS stylesheets into usable icon font packages. It supports the integration of proprietary font files and glyph maps, allowing for the use of brand-specific iconography through custom
This project is a React Native UI library and mobile component framework designed for building consistent, themed mobile applications. It provides a collection of reusable user interface components and layout tools, functioning as a cross-platform design system to maintain visual uniformity across different mobile platforms. The toolkit distinguishes itself through a themed UI approach, utilizing global design foundations for typography, color palettes, and spacing. It allows for dynamic theme configuration and the use of style presets to ensure standardized branding across an entire project.
Slidev is a markdown-based presentation framework designed for creating interactive, web-based slide decks. It functions as a static site generator that transforms plain text files into modular UI components, allowing authors to maintain version control while building professional presentations. The engine provides a browser-based runtime that manages slide navigation, animated transitions, and the live execution of code blocks. What distinguishes Slidev is its developer-centric approach to technical presentations. It features built-in support for syntax highlighting, mathematical typesetting
Gradio is a Python library that enables the creation of interactive web applications by converting functions into browser-based interfaces. It functions as a declarative framework where developers define input and output components to automatically generate web forms, visualizations, and data-driven dashboards. By abstracting away manual web markup, the library allows for the rapid construction of interfaces for machine learning models, research demonstrations, and analytical workflows within a single environment. The platform distinguishes itself by automatically exposing internal applicatio
This project is a community-curated directory of resources, libraries, and tools designed to support developers working with the Flutter framework. It functions as a centralized knowledge base, organizing high-quality external references into a structured, human-readable format to assist in the discovery of technical materials for cross-platform application development. The directory distinguishes itself through a comprehensive index of the global Flutter ecosystem, including local user groups, meetups, and communication channels that connect developers to international support networks. It m
Mitosis is a cross-framework compiler that transforms a single JSX-based source into native components for multiple frontend libraries simultaneously. It functions as a multi-target UI library builder, allowing developers to maintain a single source of truth for design systems while generating production-ready code for diverse environments including React, Vue, Angular, and Svelte. The system operates by parsing unified component code into an intermediate JSON representation, which serves as the foundation for all downstream framework generators. This architecture utilizes a visitor-based tra
UIkit is a CSS front-end framework and accessible UI component library designed for building responsive web interfaces. It provides a comprehensive set of styling classes and modular components alongside a JavaScript interaction toolkit for managing behavioral elements. The framework includes native support for internationalized web interfaces, featuring multi-locale text translation and right-to-left layout directions. It employs a responsive layout engine that uses flexible grids, adaptive breakpoints, and container widths to align content across different screen sizes. The toolkit covers
This project is a plugin framework and agentic workflow library designed to connect large language models to professional toolstacks. It provides a system for integrating language models with external data warehouses, CRMs, and other enterprise software to retrieve and manipulate real-time business data. The framework enables the automation of specialized professional tasks through a file-based plugin definition system. It allows for the customization of domain expertise and plugin behavior to align with internal company processes, supported by an enterprise data connector that links models t
This project is a community-maintained open source directory that serves as a comprehensive index of React components and libraries. It functions as a technical knowledge base, mapping common development challenges to vetted third-party solutions to help developers accelerate their frontend workflows and avoid reinventing standard interface elements. The directory distinguishes itself through a decentralized, hyperlink-centric architecture that avoids hosting code locally, instead pointing users directly to external repositories. This content is curated through a collaborative model where com
This project is a cross-platform desktop application that functions as a graphical shell replacement. Built using web technologies, it provides a unified workspace that integrates a terminal emulator with real-time system monitoring tools, allowing users to interact with their operating system through a touch-friendly, native-like interface. The application distinguishes itself through a highly customizable layout engine that uses external configuration files to arrange interface components. It features a distinct visual aesthetic and wraps standard terminal emulation within a graphical conta
This project is a design-to-development handoff guide and UI design audit framework. It provides a structured collection of requirements and checklists to verify that visual assets, component architectures, and technical specifications are ready for implementation. The framework focuses on standardizing web asset management through naming conventions and format verification for images, icons, and fonts. It includes specifications for responsive web design, ensuring that mobile and tablet layouts and fluid grid systems are defined for cross-device consistency. The guide covers quality assuran
Ant Design is an enterprise-grade component library and design system framework built for developing complex, data-heavy web applications. It provides a comprehensive collection of pre-built, state-driven interface elements that map data properties to rendered components, ensuring consistent interaction patterns and visual language across large-scale projects. The library distinguishes itself through a robust styling architecture that utilizes design tokens and hierarchical configuration providers to propagate global settings like themes, locale, and layout direction. By employing component-l