Szum-Tech design system with tailwindcss support
npm install @szum-tech/design-systemSzum-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:
- light
- dark
- Ready to use Components created based on Radix UI
- Icons collection
- 📚 Features
- 📖 Table of Contents
- 🎯 Getting Started
- ⚙️ Installation
- Tailwindcss Configuration
- CSS file
- Usage
- Components
- Icons
- 🛠️ Developer Info
- Dependencies
- Peer Dependencies
- Documentation
- 📓 Changelog
- 📜 License
@szum-tech/design-system is available as
npm package,
Install tailwindcss and @szum-tech/design-system via npm.
``shellNPM
npm install tailwindcss @szum-tech/design-system
$3
To 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.
$3
Add the following lines to your CSS file:
`css
@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";
`$3
#### Components
All components of the design system, context, hooks, functions, etc., are imported from
@szum-tech/design-system`tsx
import { Button } from "@szum-tech/design-system";
`#### Icons
To use Icons you need to import them from
@szum-tech/design-system/icons`tsx
import { GoogleLogoIcon } from "@szum-tech/design-system/icons";
``!NPM (prod) Dependency Version
!NPM (prod) Dependency Version
!NPM (prod) Dependency Version
!NPM (prod) Dependency Version
!NPM (prod) Dependency Version
!NPM dev or peer Dependency Version
!NPM dev or peer Dependency Version
!NPM dev or peer Dependency Version
!NPM dev or peer Dependency Version
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.