JavaScript design-systems

Open-source JavaScript projects categorized as design-systems

Top 14 JavaScript design-system Projects

  • Awesome-Design-Tools

    The best design tools and plugins for everything πŸ‘‰

  • TW-Elements

    𝙃π™ͺπ™œπ™š collection of Tailwind MIT licensed (free) components, sections and templates 😎

  • Project mention: Open-Source Components for TailwindCSS | news.ycombinator.com | 2024-05-07
  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • evergreen

    🌲 Evergreen React UI Framework by Segment

  • Project mention: Top 23 React UI Component Libraries for Your Next ProjectπŸš€ | dev.to | 2024-05-30

    13. Evergreen

  • styled-system

    β¬’ Style props for rapid UI development

  • Project mention: An Overview of 25+ UI Component Libraries in 2023 | dev.to | 2023-09-10

    KumaUI : Another relatively new contender, Kuma uses zero runtime CSS-in-JS to create headless UI components which allows a lot of flexibility. It was heavily inspired by other zero runtime CSS-in-JS solutions such as PandaCSS, Vanilla Extract, and Linaria, as well as by Styled System, ChakraUI, and Native Base. ### ο»ΏVue

  • style-dictionary

    A build system for creating cross-platform styles.

  • Project mention: Syncing Figma Variables and StyleDictionary with GitHub Actions | dev.to | 2023-08-03

    function getStyleDictionaryConfig(brand) { return { source: [`tokens/brands/${brand}/*.json`, 'tokens/globals/**/*.json'], platforms: { /** * Available platforms: https://amzn.github.io/style-dictionary/#/config?id=platform */ web: { transformGroup: 'web', buildPath: `build/web/${brand}/`, files: [ { destination: 'tokens.scss', format: 'scss/variables', }, ], }, }, } } /** * Build the tokens for each brand. * {@see - Example based on https://github.com/amzn/style-dictionary/tree/main/examples/advanced/multi-brand-multi-platform} */ ['microsoft', 'xbox'].map(function (brand) { ['web'].map(function (platform) { const StyleDictionary = StyleDictionaryPackage.extend( getStyleDictionaryConfig(brand), ) StyleDictionary.buildPlatform(platform) }) })

  • vue-design-system

    An open source tool for building UI Design Systems with Vue.js

  • fractal

    A tool to help you build and document website component libraries and design systems. (by frctl)

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • theo

    Theo is a an abstraction for transforming and formatting Design Tokens

  • Project mention: Eleventy Style Guide Generator with WebC Component Support | dev.to | 2023-08-04

    There are some great well established tools out there that do this, such as Theo and Style Dictionary but for this I turned to the sage advice of Andy Bell via buildexcellentwebsit.es and used Tailwind to run through the token JSON files and generate the CSS variables I can use in my styling.

  • design-system-react

    Salesforce Lightning Design System for React

  • webDevsCom

    :heart_eyes: All kinds of resources for Developers :trident: in one place.

  • web-components

    A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+

  • design-tokens

    A place where OpenTable engineers and designers openly work together (by opentable)

  • awesome-ux-design-styles

    Curated list of UX styleguides and design systems

  • copy-paste-css

    Find inspiration with a list of simple CSS elements for your next project!

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020).

JavaScript design-systems related posts

  • Open-Source Components for TailwindCSS

    1 project | news.ycombinator.com | 7 May 2024
  • A love letter to Apache Echarts

    6 projects | news.ycombinator.com | 18 Feb 2024
  • I built a free Tailwind UI library with Nextjs 13 and made it open source.

    2 projects | /r/nextjs | 27 Nov 2023
  • Eleventy Style Guide Generator with WebC Component Support

    5 projects | dev.to | 4 Aug 2023
  • A STEP BY STEP GUIDE TO CREATING A FULL STACK WEB APP USING NEXT JS AND SUPABASE πŸ™ŒπŸ™ŒπŸ’₯..

    2 projects | dev.to | 9 Jul 2023
  • Tailwind CSS vs Float UI: which one is the best in 2023?

    1 project | dev.to | 24 Jun 2023
  • Top resources for Tailwind CSS for 2023

    4 projects | dev.to | 21 Jun 2023
  • A note from our sponsor - InfluxDB
    www.influxdata.com | 30 May 2024
    Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality. Learn more β†’

Index

What are some of the best open-source design-system projects in JavaScript? This list will help you:

Project Stars
1 Awesome-Design-Tools 32,086
2 TW-Elements 12,714
3 evergreen 12,342
4 styled-system 7,819
5 style-dictionary 3,680
6 vue-design-system 2,168
7 fractal 2,099
8 theo 1,936
9 design-system-react 904
10 webDevsCom 686
11 web-components 412
12 design-tokens 79
13 awesome-ux-design-styles 74
14 copy-paste-css 36

Sponsored
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com