TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Innovaccer Design System

    A React-based UI toolkit for building Web Applications.

    🚀 Get Up and Running

    💡 If your app runs on Innovaccer UI engine you don't need following two steps, please see Using Components section bellow.

    There are two main steps to use a component in your project:

    1. Installing component library using npm or yarn.
    2. Loading stylesheet.

    Installing component library:

    Run the following command using npm to add the component library to your project:

    npm install @innovaccer/design-system

    Adding style:

    As this component library is part of a framework-agnostic design system used at Innovaccer the styling is done with CSS using CSS variables for theming and BEM methodology for reusable and modular styling. So it requires you to include CSS in your project by either importing or serving it as a static file. The complete stylesheet is published as part of the component library at path @innovaccer/design-system/css.

    Import style at your app's root.

    import '@innovaccer/design-system/css';

    Using design system font:

    The css sets the font family as 'Nunito Sans' for the body. To add this font in your project you need to load this font. The recommended way to do it is by adding the following google font cdn link to your app's head.

    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">

    Updating Font:

    If you don't add the font described above font family will not be affected by css. However, if you want to update the font family update it via the following css variable.


    Reset Styles

    As BEM is used reset.css is not used and no style reset is done.

    Polyfill for IE

    For css variables to work on IE we use a polyfill at runtime to achieve dynamic theming through variables. Please add the following polyfill in your page.

    <script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
        onlyLegacy: true

    Using Components

    Available components along with live code editor and API documentation can be found here. Components can be imported as mentioned below:

    } from '@innovaccer/design-system'


    We have created a tutorial to guide you in creating an awesome app with Innovaccer Design System components. Please find it here.

    How to run locally?

    #clone repository
    git clone https://github.com/innovaccer/design-system.git
    #install dependencies
    npm install
    #start development server
    npm run dev




    Code of Conduct

    We expect everyone participating in the community to abide by our Code of Conduct. Please read it. Please follow it. We work hard to build each other up and create amazing things together. 💪💜

    🤝 How to Contribute

    Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the community! 💪💜

    Check out our Contributing Guide for ideas on contributing and setup steps for getting our repositories up and running on your local machine.

    A note on how this repository is organized

    This repository is codebase for all and we publish it to NPM as package.


    We are currently only accepting bug fixes.

    📝 License

    Licensed under the MIT License.

    💜 Thanks

    Thanks to our many contributors.


    npm i @innovaccer/charts

    DownloadsWeekly Downloads






    Unpacked Size

    2.77 MB

    Total Files


    Last publish


    • aregee
    • satyam.yadav