JavaScript design-systems

Open-source JavaScript projects categorized as design-systems
Edit details
Topics: React JavaScript Design CSS HacktoberFest
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.io
featured

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: 500 open-source components for TailwindCSS | dev.to | 2023-10-30

    I'd like to share my latest discovery with you. TW Elements is currently, the most popular 3rd party UI kit for TailwindCSS with over 10k Github stars. It's a huge collection of stunning components made with attention to the smallest detail. Forms, cards, buttons, and hundreds of others. All components have dark mode and very intuitive theming options. The project is supported by an engaged community on GitHub, I recommend you check it out and join one of the many discussions. You will find installation instructions here, and you can track the progress of the project live here. The project was kickstarted by @mdbootstrap, a group of open-source developers behind MDB UI Kit - a high-quality UI kit for Bootstrap, and also behind MDB GO - hosting and deployment platform. I highly recommend you to check it out!

  • 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 GitHub Repositories for UI Components | dev.to | 2024-01-05

    πŸ” Site ⭐ GitHub

  • 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

  • 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

  • 90% of people who use Tailwind CSS don't know these 6 simple tricks

    1 project | dev.to | 21 Jun 2023
  • A note from our sponsor - SurveyJS
    surveyjs.io | 7 May 2024
    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. 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 31,834
2 TW-Elements 12,662
3 evergreen 12,327
4 styled-system 7,807
5 style-dictionary 3,659
6 vue-design-system 2,168
7 fractal 2,099
8 theo 1,936
9 design-system-react 903
10 webDevsCom 683
11 web-components 400
12 design-tokens 79
13 awesome-ux-design-styles 74
14 copy-paste-css 35

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