Tailwind Resources Logo Tailwind Resources
Design System screenshot

Design System

Author Avatar Theme by Janszewczyk
Updated: 11 Jan 2026
12 Stars

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.

Github Live Preview

Categories

React Vite Radix ui Templates & themes

Overview

The Szum-Tech Design System is a design system supported by the Tailwindcss library. It allows the creation of applications that support light and dark themes. The design system includes UI React Components and a color palette that complies with Szum-Tech standards.

Features

  • Support for light and dark themes
  • UI React Components
  • Compliant color palette

Installation

To install the Szum-Tech Design System, follow these steps:

  1. Install the design system package using npm or yarn:

    npm install @szum-tech/design-system

    or

    yarn add @szum-tech/design-system

  2. During Tailwind initialization, modify the tailwind.config.js file:

    • Add the path to @szum-tech/design-system UI Components files.
    • Add the preset file to Tailwind configuration.

  3. Import the theme styles to a CSS file with Tailwind directives:

    • Import the CSS file from @szum-tech/design-system/theme which includes the colors palette for the dark and light themes and default styles.

Summary

The Szum-Tech Design System is a design system supported by the Tailwindcss library. It allows the creation of applications with light and dark themes and provides UI React Components and a compliant color palette. To install the design system, use npm or yarn and configure Tailwind accordingly.