Topics / #web-components

Web-components projects on GitHub

Libraries and design systems built on Web Components custom elements.

As of , the most-starred Web-components projects on GitHub are storybook (91.3K stars), openui (22.6K stars) and polymer (22K stars). GitHub.Locker tracks 20 Web-components repositories with 320K stars combined. The fastest-growing on October 16 was ascii, with +22 stars in a day.

20Projects
320KStars in total
+56Stars in a day

Hot right now

Most stars gained in a day · Oct 16

The all-time top

20 projects · by stars

  1. #1 · storybookjs/storybook

    storybook

    Storybook is a frontend workshop for building, documenting, and testing UI components in isolation, used by thousands of teams for UI development, testing, and documentation.

    91.3K
  2. #2 · wandb/openui

    openui

    OpenUI is an open-source tool from W&B that turns a text description into live-rendered UI: describe a component, watch it render, ask for changes, and convert the result to React, Svelte, Web Components and more.

    22.6K
  3. #3 · Polymer/polymer

    polymer

    Polymer is Google's original open-source library for building Web Components — encapsulated, reusable custom HTML elements that work just like standard HTML tags in web applications. This repo holds the current stable release, Polymer 3.0.

    22K
  1. 4

    lit

    21.9Klit/lit · TypeScript

    Lit is a small open-source library for building fast, lightweight web components — reusable custom HTML elements that work in any modern browser or alongside any framework.

  2. 5

    fluentui

    20.3Kmicrosoft/fluentui · TypeScript

    Fluent UI web is Microsoft's collection of utilities, React components, and web components for building web applications, and the design system behind Microsoft 365, Office, and Edge.

  3. 6

    trix

    20Kbasecamp/trix · JavaScript

    Trix is a free, open-source WYSIWYG rich text editor for web applications, built by 37signals (the creators of Ruby on Rails) and used in Basecamp. It is made for everyday writing: messages, comments, articles, and lists.

  4. 7

    uikit

    18.5Kuikit/uikit · HTML

    UIkit is a lightweight and modular front-end framework for building fast, powerful web interfaces with ready-made CSS and JavaScript components.

  5. 8

    amphtml

    14.9Kampproject/amphtml · JavaScript

    AMP is a web component framework for easily creating user-first websites, stories, ads, emails and more.

  6. 9

    shoelace

    13.8Kshoelace-style/shoelace · TypeScript

    Shoelace is a forward-thinking library of web components — ready-made UI building blocks you can drop into any web page or app. The project has since been sunset in favor of its successor, Web Awesome.

  7. 10

    omi

    13.3KTencent/omi · TypeScript

    Omi is a lightweight Web Components framework from Tencent that adds JSX, function components, routing, suspense, directives and signal-driven reactivity on top of native custom elements and Shadow DOM.

  8. 11

    tui.calendar

    12.7Knhn/tui.calendar · TypeScript

    TOAST UI Calendar is a full-featured JavaScript calendar component that renders monthly, weekly, and daily views with drag-and-drop scheduling, provided as a plain JS library plus official React and Vue wrapper components.

  9. 12

    material-web

    11.3Kmaterial-components/material-web · SCSS

    Material Web (@material/web) is Google's library of web components implementing Material 3, the latest version of their open-source design system, for building accessible web UIs.

  10. 13

    perspective

    11.3Kperspective-dev/perspective · Rust

    Perspective is an interactive data visualization and analytics component built for large, real-time and streaming datasets. It ships as a Custom Element UI (grid, charts, pivots) backed by a streaming query engine that runs in-browser via WebAssembly or server-side in Python, Node.js and Rust.

  11. 14

    wired-elements

    10.8Krough-stuff/wired-elements · TypeScript

    Wired Elements is a collection of custom web components styled to look hand-drawn, useful for wireframes, mockups, or just a sketchy fun UI look.

  12. 15

    semi-design

    10.4KDouyinFE/semi-design · TypeScript

    Semi Design is a comprehensive design system and React UI library: 80+ production-quality components kept stable since 2019, plus tooling that connects design and code — a Figma Design-to-Code plugin and a DSM platform for custom design tokens.

  13. 16

    mingcute-icons

    1.7Kmingcute-design/mingcute-icons · TypeScript

    MingCute Icons is an open-source icon library with 1,663 icons in Core Regular and Core Filled styles (3,326 total definitions), distributed as packages for React, Vue, React Native, Svelte, SolidJS, vanilla JS, web components, SVG, and WOFF2 fonts.

  14. 17

    microlighter

    1.1Kdavatron5000/microlighter · JavaScript

    MicroLighter is a tiny, dependency-free syntax highlighter for the web. It colors code using the CSS Custom Highlight API and TextMate grammars, with no runtime dependencies and about 2 KiB compressed.

  15. 18

    pwa-install

    957khmyznikov/pwa-install · TypeScript

    An install dialog for Progressive Web Apps: a Web Component that shows an 'Install app' or Add to Home Screen/Dock prompt in browsers that lack a native one, like Safari, Firefox or Opera.

  16. 19

    ascii

    893bas3line/ascii · TypeScript

    ascii is a TypeScript library of 216 animated ASCII art pieces for web pages, usable in React, Next.js, Astro, plain HTML, terminals, and GitHub READMEs.

  17. 20

    loadersz-core

    163lumberjacque/loadersz-core · TypeScript

    loadersz is a dependency-free Canvas loading-animation library for the browser, shipped as a native Web Component with a small imperative TypeScript API and 150 switchable motion states.

Often tagged together