https://github.com/janszewczyk/design-system
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.
https://github.com/janszewczyk/design-system
design-system javascript react react-components semantic-release storybook szum-tech tailwindcss theme tsup typescript
Last synced: 30 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/janszewczyk/design-system
- Owner: JanSzewczyk
- License: mit
- Created: 2022-10-30T14:22:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-28T09:32:43.000Z (12 months ago)
- Last Synced: 2024-05-29T18:28:02.903Z (11 months ago)
- Topics: design-system, javascript, react, react-components, semantic-release, storybook, szum-tech, tailwindcss, theme, tsup, typescript
- Language: TypeScript
- Homepage: https://janszewczyk.github.io/design-system
- Size: 1.55 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
@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](https://tailwindcss.com/) 4+ configuration, custom color palettes and more
- Support for two themes:
- `light`
- `dark`
- Ready to use [Components](#components) created based on [Radix UI](https://www.radix-ui.com/)
- [Icons collection](#icons)
## 📖 Table of Contents
- [📚 Features](#-features)
- [📖 Table of Contents](#-table-of-contents)
- [🎯 Getting Started](#-getting-started)
- [⚙️ Installation](#-installation)
- [Tailwindcss Configuration](#tailwindcss-configuration)
- [CSS file](#css-file)
- [Usage](#usage)
- [Components](#components)
- [Icons](#icons)
- [🛠️ Developer Info](#-developer-info)
- [Dependencies](#dependencies)
- [Peer Dependencies](#peer-dependencies)
- [Documentation](#documentation)
- [📓 Changelog](#-changelog)
- [📜 License](#-license)
## 🎯 Getting Started
### ⚙️ Installation
[@szum-tech/design-system](https://www.npmjs.com/package/@szum-tech/design-system) is available as
[npm package](https://www.npmjs.com/package/@szum-tech/design-system),
Install `tailwindcss` and `@szum-tech/design-system` via npm.
```shell
# 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](https://tailwindcss.com/docs/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:
```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";
```
### Usage
#### 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";
```
## 🛠️ Developer Info
### Dependencies
### Peer Dependencies
### Documentation
[Szum-Tech Design System](https://janszewczyk.github.io/design-system)
## 📓 Changelog
The [changelog](https://github.com/JanSzewczyk/design-system/blob/main/CHANGELOG.md) is regularly updated to reflect
what's changed in each new release.
## 📜 License
This project is licensed under the terms of the
[MIT license](https://github.com/JanSzewczyk/design-system/blob/main/LICENSE).