@szum-tech/design-system
v3.11.0TypeScript
Szum-Tech design system with tailwindcss support
193/weekUpdated 3 days agoMITUnpacked: 552.0 KB
Published by Jan Szewczyk
npm install @szum-tech/design-system@szum-tech/design-system
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.
---
📚 Features
- 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
📖 Table of Contents
- 📚 Features
- 📖 Table of Contents
- 🎯 Getting Started
- ⚙️ Installation
- Tailwindcss Configuration
- CSS file
- Usage
- Components
- Icons
- 🛠️ Developer Info
- Dependencies
- Peer Dependencies
- Documentation
- 📓 Changelog
- 📜 License
🎯 Getting Started
$3
@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
YARN
yarn add tailwindcss @szum-tech/design-system
PNPM
pnpm add tailwindcss @szum-tech/design-system
BUN
bun add 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
tsx
import { Button } from "@szum-tech/design-system";
`#### Icons
To use Icons you need to import them from
tsx
import { GoogleLogoIcon } from "@szum-tech/design-system/icons";
``🛠️ Developer Info
$3
!NPM (prod) Dependency Version
!NPM (prod) Dependency Version
!NPM (prod) Dependency Version
!NPM (prod) Dependency Version
!NPM (prod) Dependency Version
$3
!NPM dev or peer Dependency Version
!NPM dev or peer Dependency Version
!NPM dev or peer Dependency Version
!NPM dev or peer Dependency Version
$3
📓 Changelog
The changelog is regularly updated to reflect
what's changed in each new release.
📜 License
This project is licensed under the terms of the
MIT license.