Szum-Tech design system.
Design system supported by Tailwind CSS 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.
- Predefined Tailwind CSS 4+ configuration, custom color palettes and more
- Support for two themes:
lightdark
- Ready to use Components created based on Radix UI
- Icons collection
@szum-tech/design-system is available as npm package,
Install tailwindcss and @szum-tech/design-system via npm.
# NPM
npm install tailwindcss @szum-tech/design-system
# YARN
yarn add tailwindcss @szum-tech/design-system
# PNPM
pnpm add tailwindcss @szum-tech/design-system
# BUN
bun add tailwindcss @szum-tech/design-systemTo configure Tailwind CSS, follow the Installation section in the Tailwind CSS documentation.
On this page, you can find all the necessary information for integrating Tailwind in various ways - you can choose the one that suits you best.
Add the following lines to your CSS file:
@import "tailwindcss";
/* Use the @import directive to inline import CSS file with predefined styles */
@import "@szum-tech/design-system/tailwind/global.css";
/* Use the @source directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection */
@source "../node_modules/@szum-tech/design-system";All components of the design system, context, hooks, functions, etc., are imported from @szum-tech/design-system
import { Button } from "@szum-tech/design-system";To use Icons you need to import them from @szum-tech/design-system/icons
import { GoogleLogoIcon } from "@szum-tech/design-system/icons";
The changelog is regularly updated to reflect what's changed in each new release.
This project is licensed under the terms of the MIT license.