@szum-tech/design-system v2.2.0

📚 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

⚙️ Installation

@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-system

Tailwindcss Configuration

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.

CSS file

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";

Usage

Components

All components of the design system, context, hooks, functions, etc., are imported from @szum-tech/design-system

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

Icons

To use Icons you need to import them from @szum-tech/design-system/icons

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

🛠️ Developer Info

Dependencies

Peer Dependencies

Documentation

Szum-Tech Design System

📓 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.