JavaScript design-systems

Open-source JavaScript projects categorized as design-systems | Edit details

Top 11 JavaScript design-system Projects

  • GitHub repo material-ui

    MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.

    Project mention: How to Setup Next App, and MUI5 with Typescript | dev.to | 2022-01-16

    import * as React from 'react'; import Document, { Html, Head, Main, NextScript } from 'next/document'; import createEmotionServer from '@emotion/server/create-instance'; import theme from '../styles/theme'; import createEmotionCache from '../lib/createEmotionCache'; export default class MyDocument extends Document { render() { return ( {/* PWA primary color */} ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const { renderPage: originalRenderPage } = ctx; // You can consider sharing the same emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ // eslint-disable-next-line react/display-name enhanceApp: (App: any) => (props) => , }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents emotion to render invalid HTML. // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map((style) => ( )); return { ...initialProps, // Styles fragment is rendered after the app and page rendering finish. styles: [ ...React.Children.toArray(initialProps.styles), ...emotionStyleTags, ], }; };

    Enter fullscreen mode Exit fullscreen mode

    step 7
    we also need to wrap material UI with the app component, let copy the following lines of code to _app.ts file inside the page folder.

    import * as React from 'react';
    import Head from 'next/head';
    import { AppProps } from 'next/app';
    import { ThemeProvider } from '@mui/material/styles';
    import CssBaseline from '@mui/material/CssBaseline';
    import { CacheProvider, EmotionCache } from '@emotion/react';
    import theme from '../styles/theme';
    import createEmotionCache from '../../src/lib/createEmotionCache';
    
    // Client-side cache, shared for the whole session of the user in the browser.
    const clientSideEmotionCache = createEmotionCache();
    
    interface MyAppProps extends AppProps {
      emotionCache?: EmotionCache;
    }
    
    const App = (props: MyAppProps) => {
      const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
      return (
        
          
            My page
            
          
          
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            
            
          
        
      );
    };
    
    export default App;
    
    
    Enter fullscreen mode Exit fullscreen mode

  • GitHub repo Awesome-Design-Tools

    The best design tools and plugins for everything 👉

    Project mention: How to make nice looking designs when you are bad? Where can you find inspirations for layouts, colors, etc? | reddit.com/r/androiddev | 2021-11-24

    In addition to all these wonderful submissions, you might also want to check out : this repo and this one .

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo evergreen

    🌲 Evergreen React UI Framework by Segment

    Project mention: Is there any commonly used or standard used UI library in React? | reddit.com/r/reactjs | 2021-12-05

    From evergreen : https://evergreen.segment.com/ From uber : https://baseweb.design/

  • GitHub repo base web

    A React Component library implementing the Base design language

    Project mention: Looking for a Material UI alternative | reddit.com/r/reactjs | 2022-01-11

    Base Web! By far the most underrated UI library, which is open sourced and maintained by Uber. Visually it’s unopinionated because it’s meant to be overridden, and has a nice API for overriding every aspect of it with a robust theming config.

  • GitHub repo styled-system

    ⬢ Style props for rapid UI development

    Project mention: TaskEz: Design to Code - Chapter 1 | dev.to | 2021-11-27

    You can read more about styled system here, https://styled-system.com/.

  • GitHub repo style-dictionary

    A build system for creating cross-platform styles.

    Project mention: Introduction to Variabless | reddit.com/r/css | 2021-08-02

    Cool. Can you compare this to https://github.com/amzn/style-dictionary?

  • GitHub repo vue-design-system

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

    Project mention: New and Noteworthy Vue.js Open Source Projects. Part 2 | dev.to | 2021-03-01
  • SonarQube

    Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.

  • GitHub repo theo

    Theo is a an abstraction for transforming and formatting Design Tokens (by salesforce-ux)

    Project mention: Why does Youtube make such excessive use of CSS variables? | reddit.com/r/css | 2021-09-15
  • GitHub repo design-system-react

    Salesforce Lightning Design System for React

    Project mention: Having (More) Fun Creating Components with the Lightning Design System for React | dev.to | 2022-01-05

    In “Having Fun with the Lightning Design System for React”, I created a React application using the Lightning Design Framework for React, quickly adding several components in order to provide an impressive user experience.

  • GitHub repo design-system

    Priceline.com Design System

    Project mention: 5 Underrated React Design Systems for 2021 | dev.to | 2021-02-18

    Github

  • GitHub repo webDevsCom

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

    Project mention: Curated Free Resources of all kinds for Developers | reddit.com/r/opensource | 2021-05-28
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). The latest post mention was on 2022-01-16.

JavaScript design-systems related posts

Index

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

Project Stars
1 material-ui 74,492
2 Awesome-Design-Tools 23,835
3 evergreen 11,397
4 base web 7,286
5 styled-system 7,144
6 style-dictionary 2,135
7 vue-design-system 2,073
8 theo 1,710
9 design-system-react 778
10 design-system 643
11 webDevsCom 547
Find remote jobs at our new job board 99remotejobs.com. There are 28 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
OPS - Build and Run Open Source Unikernels
Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
github.com/nanovms