@szum-tech/design-system NPM

Szum-Tech Design System

GitHub release (latest by date)

npm

Design system supported by tailwindcss library, it allows the creation of applications supporting light and dark themes, shares UI React Components and a color palette in compliance with the Szum-Tech standards.

Installation

Szum-Tech Design System is available as an npm package.

npm:

npm install @szum-tech/design-system
npm install -D tailwindcss

yarn:

yarn add @szum-tech/design-system
yarn add -D tailwindcss

Configuration

After installing the @szum-tech/design-system package in accordance with paragraph Installation, during Tailwind initialization, follow these steps:

1. Add preset to `tailwind.config.js` file

Add path to @szum-tech/design-system UI Components files and add preset file to Tailwind configuration

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["...", "./node_modules/@szum-tech/design-system/{components,hooks,contexts}/**/*{js,ts,jsx,tsx}"],
  theme: {
    extend: {}
  },
  plugins: [],
  presets: [require("@szum-tech/design-system/theme/main-preset")]
};

2. Import theme styles to CSS file with Tailwind directives

Import CSS file from @szum-tech/design-system/theme with colors palette for dark and light theme and default styles (see file with theme styles)

@import "@szum-tech/design-system/theme/global.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

Getting started

Theme Provider

ThemeProvider relies on the context feature of React to handle theme mode and pass it to components, so you need to make sure ThemeProvider is the parent of the components you are trying to customize.

Here is an example of a basic app using ThemeProvider component:

import * as React from "react";

import { ThemeProvider } from "@szum-tech/design-system";

function Providers({ children }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}