Open-source alternatives to Wired Elements

Material Web is a framework-agnostic library of reusable user interface components built on native browser standards. It provides a collection of interactive elements that follow official design system specifications, enabling the creation of consistent and accessible interfaces across diverse web applications. The library utilizes custom elements and shadow DOM to ensure style encapsulation and component logic isolation. By leveraging native browser APIs, it maintains design integrity and functional consistency across all major web browsers and varying screen sizes. The project supports ent

Polymer is a custom element framework and web component library used to build reusable, encapsulated custom elements that function as native browser components. It serves as a system for defining public properties and attributes that trigger automatic state observation and updates within the DOM. The project functions as a data binding library, providing a mechanism to synchronize state between internal component properties and external models via two-way data binding. It covers the development of frontend component libraries and web component architecture, enabling the creation of modular u

Web Components is a set of specifications for creating reusable custom elements with encapsulated styling and logic for the web. It provides a standard for defining new HTML tags that function as independent components across different browser engines. The system is built on three primary pillars: the Custom Elements standard for defining new tags, the Shadow DOM implementation for isolating internal document structures and styles, and the HTML Templates specification for defining reusable fragments of markup that remain inert until instantiated. These capabilities enable modular web design

FAST is a web components framework and declarative UI library used to build adaptive user interfaces. It functions as a server-side rendering engine and design system implementation, enabling the creation of modular components based on web standards. The framework focuses on cross-framework component compatibility, allowing user interface elements to remain functional across different front-end frameworks and modern browsers. It implements a design language through a collection of pre-defined visual components to ensure consistency across professional applications. The system covers state-dr

This project is a web component framework and optimized web markup standard designed for high performance web development. It provides a system for building fast-loading websites using a specialized set of HTML components and scripts, complemented by a web performance validation suite to ensure markup compliance. The framework includes a dynamic HTML template engine for rendering data-driven content without full page reloads and a dedicated ad network integration framework. This integration system manages third-party advertisements with built-in viewability metrics and optimized loading seque

Open Props is a CSS custom property library and design token set providing reusable variables for colors, typography, and layout. It functions as a CSS variable framework and design system intended to ensure visual consistency across components and platforms. The project includes an optimization toolkit for generating selector-scoped variable bundles and removing unused design tokens from stylesheets to reduce final file size. It also provides configuration files to enable design variable autocompletion within code editors. The system covers broader capabilities in adaptive web interface des

coloruicss is a CSS UI component library and high-saturation design system specifically developed for mini program environments. It provides a collection of pre-styled visual elements designed to meet the technical constraints and rendering behaviors of these platforms. The framework focuses on replacing default system headers with a dedicated custom navigation bar framework. This allows for the creation of stylized top navigation areas that support custom colors, images, and action buttons. The system manages visual consistency through a CSS-based theming framework using custom properties t

This project is a CSS color utility library and palette framework designed to standardize the application of colors to text, backgrounds, and borders on the web. It provides a web color style system with predefined classes and defaults to accelerate the visual styling of web prototypes. The system utilizes skin-based color theming, allowing users to swap entire color palettes by changing top-level classes. It employs a utility class system backed by global CSS variable mapping to ensure visual harmony across different UI elements. The framework supports rapid UI prototyping and general web c

N3-components is a library of modular, reusable user interface elements designed for the Vue framework. It functions as a toolkit for constructing web application layouts by providing a collection of standardized building blocks that ensure consistent behavior and a unified design language across projects. The library enables developers to assemble complex interfaces through a component-based architecture that supports scoped styling and flexible content projection. It facilitates the creation of scalable frontends by allowing for the customization of visual properties through centralized con

Gentelella is a collection of pre-configured interface templates and a component library designed for building administration panels, data dashboards, and internal management consoles. It provides a Bootstrap 5 based framework that includes accessible web interface templates and PWA-ready dashboard shells. The project features specialized templates for data visualization, utilizing modular chart factories to render line, bar, radar, and heatmap visualizations. It includes a set of ready-to-use interface elements for enterprise prototyping, such as kanban boards, file managers, and interactive

Magic UI is a copy-paste UI framework and React animated library providing a collection of interactive, visually dynamic interface components. It serves as a design engineering toolkit that bridges high-fidelity design and production code by offering ready-made components for direct integration into web applications. The library focuses on animated UI development and the implementation of interactive components, utilizing a copy-paste distribution model. This approach allows for rapid prototyping and full local customization without the need to install heavy dependencies. The components are

Bootflat is a front-end component library and CSS framework extension that implements a flat-design aesthetic for web application styling. It provides a set of reusable interface elements and a mobile-first grid system to facilitate responsive web design. The project integrates design and development through a PSD-driven workflow, providing professional Photoshop component sets and curated color palettes for interface prototyping. Visual customization is handled via variable-based theme overrides for colors and fonts. The library covers a broad range of UI components, including form elements

Airframe-react is a Bootstrap UI component library and starter kit for building React-based admin dashboards and management interfaces. It provides a preconfigured development foundation and a collection of production-ready interface elements to assemble consistent application screens. The project includes responsive web templates and pre-designed page layouts that automatically adapt content for desktop, tablet, and mobile screens. It enables the creation of administrative panels through a set of structural layout variations and a library of ready-made pages. The toolkit covers application

Ariakit is a headless component library and accessible UI component toolkit. It provides a set of unstyled web components with built-in accessibility patterns to ensure that screen readers and keyboard navigation function correctly. The project includes an adaptive color engine that calculates high-contrast text and dynamic surface colors for light and dark modes. It also features a concentric layout engine for computing nested padding, margins, and border radii for circular interface elements, alongside a design token system for managing global CSS variables. The toolkit covers broad capabi

Framework7 is a mobile user interface framework and single-page application system designed to build responsive web applications with native iOS and Android appearances. It provides a comprehensive library of pre-styled components and a layout engine to create native-style user interfaces across multiple platforms. The framework utilizes a platform-aware theming system that adapts visual styles and color schemes based on detected device settings. It incorporates native mobile behaviors through a dedicated UI kit, including specialized interaction patterns such as pull-to-refresh and swipeable

Primer is a CSS design system framework and utility library used to build consistent user interfaces based on a unified visual language. It provides a collection of CSS rules, utility classes, and pre-defined style sheets for styling standard interface elements. The framework implements frontend visual standardization through a shared set of utility classes and design system rules. This allows for the creation of reusable interface elements and the rapid development of web interface layouts. The system utilizes a BEM-based naming convention, design-token mapping, and CSS variable-based themi

This project is a component-based UI framework and a React Material Design library. It provides a comprehensive set of reusable interface elements that implement Google Material Design specifications to ensure consistent visual styles and behaviors across web applications. The framework enables the construction of professional layouts for enterprise web interfaces and the rapid prototyping of frontend designs. It uses a collection of pre-designed React components to standardize layouts and accelerate the overall development process. The system integrates a styling engine and theme-based inje

Element is a Vue.js UI component library and web UI toolkit. It provides a collection of pre-styled user interface components and modular building blocks used to build web applications. The project includes a customizable CSS theme framework, allowing for the modification of visual styles and brand requirements through theme tools and generators. The toolkit covers frontend component management, custom web theming, and a workflow for rapid prototyping.

Motion Primitives is an animated UI kit and React animation component library designed as a web motion framework. It provides a collection of pre-built, customizable visual components used to implement complex interface animations and transitions within a browser environment. The library focuses on animated user interface design and frontend visual polish. It enables the development of interactive web components and rapid UI prototyping by providing reusable primitives that handle motion effects without requiring custom logic from scratch. The framework integrates Framer Motion for physics-b

Chakra UI is a design system component library and styling framework that provides a foundation for building consistent, accessible web interfaces. It functions as a centralized theme configuration engine, using a design-token-driven architecture to manage visual properties like color palettes and spacing rules as a single source of truth across an entire application. The framework distinguishes itself through a type-safe styling utility that automatically generates TypeScript definitions from theme configurations, ensuring accurate property referencing and editor autocompletion. It employs a

Blueprint is a React UI component library and web design system focused on accessibility and the creation of data-dense interfaces. It provides a standardized framework of visual styles and reusable interface elements for building professional desktop applications. The toolkit is specifically optimized for displaying complex information and large datasets, featuring high-performance interactive data grids for rendering and manipulating data. The library covers a broad range of capability areas, including the construction of form inputs, navigation systems, and content layout management. It a

High-quality, customizable web components for common user interface patterns

This project is a community-driven repository that serves as a comprehensive directory for the design industry. It provides a structured index of software, plugins, and digital assets, helping creative professionals discover and evaluate tools tailored to specific stages of the design process. The collection is maintained through a decentralized, community-driven model where external contributors submit and verify entries to ensure the information remains current. To assist users in navigating the complex ecosystem of design technology, the repository employs a hierarchical taxonomy that orga

Pico is a lightweight, classless CSS framework designed to provide consistent, accessible, and responsive visual defaults for web interfaces. By prioritizing semantic HTML tags, it allows developers to build clean, structured pages without the need for complex class names or heavy dependencies. The framework functions as a comprehensive design system that automatically applies styling to standard elements, ensuring that typography, spacing, and layout remain cohesive across different screen sizes. The framework distinguishes itself through a modular, variable-driven architecture that emphasiz

Rough Notation is a JavaScript annotation and animation library used to draw sketchy, hand-drawn visual marks over web page elements. It functions as a utility for adding organic-looking underlines, boxes, and highlights to HTML elements to create a hand-drawn aesthetic on digital interfaces. The library provides specialized tools for sequencing drawing animations and managing instructional overlays. It supports the creation of hand-drawn circles, brackets, and highlights that can be triggered in a specific order to guide users through a page. The system handles multiline text annotations by

chart.xkcd is a client-side JavaScript library used to generate data visualizations as scalable vector graphics directly in the browser. It functions as a graphing utility that manipulates DOM elements to produce various chart types without requiring server-side dependencies. The library is distinguished by a rendering engine that applies randomized stroke offsets and variable line weights to SVG paths. This process simulates a sketchy, hand-drawn aesthetic for data charts, creating a comic-like visual style. The project supports a variety of visualization formats, including bar, line, circu

roughViz is a JavaScript data visualization library used to create charts with a hand-drawn, sketchy aesthetic. It functions as an SVG charting framework that renders visualizations in the browser, prioritizing the communication of general trends and patterns over absolute precision. The library provides a collection of tools to generate several chart types, including bar, line, pie, donut, and scatter plots, as well as stacked bar charts. These visualizations are produced using a non-linear drawing style to present technical information in an informal, organic appearance.