# Introduction

## Preface

As you can intuitively extract from the name, this is another UI-related project.

Nowadays, UI frameworks have become as numerous as the stars, and some have already occupied an extremely stable position in the industry, such as `mui`/`antd`/`element`/`vuetify`, which has almost become the first in `react`/`vue` framework for consideration.

So why write such a `@icestack/ui`?

## What is `@icestack/ui`

`@icestack/ui` is not essentially a UI framework. It is essentially a `UI CSS paradigm` management generator, which consists of a large number of plug-ins that compile `CSS`. You can understand it as a set of style tool chains.

Through it, you can quickly generate a set of your own `CSS` framework! Of course, you can use the default set of `paradigms' provided internally, and override or extend it.

You can also freely control the performance characteristics of all `CSS` paradigms based on configuration items, including but not limited to:

### (Add/subtract/overwrite/modify) color types for all components

For example: the buttons have `default`, `primary`, `success`, `warning`, `error` ... by default. You can add other colors and declare them `hover/focus/active`, etc. Waiting state

### (Add/reduce/overwrite/modify) the size, shape, style of the component...

For example: The default button sizes are `xs`, `sm`, `md`, `lg`. You can add `xl`, `2xl`, `3xl` and other sizes to it, or There are shapes like `round` and `circle`, you can add a `square`...

### (Add/Reduce/Overwrite/Modify) System Theme

For example: By default, there are only 2** system themes `light`/`dark`. You can add more themes for unified management.

### Add new `CSS` components to this system

You can easily add your own components into this system.

Furthermore, the `CSS` results generated by this generator are very minimally intrusive. By default, it does not carry any `css reset/normalize/preflight` styles and will only inject some calculated `CSS` variables globally.

Its generation results are also very intuitive. You can use it to customize the desired `UI` behavior and then re-encapsulate it, or extract it into a `preset` to share it in multiple projects.

## Writing motivation

This project is an idea that came up when I was using `daisyui`. I wanted to manage all styles, themes, and component styles in a unified way, and expand and cover them at any time.

So the `IceStack` project was born, so the built-in default default writing method is similar to `daisyui`, because it is really easy to use!

## Inspired projects

This project was inspired by `tailwindcss`, `daisyui`, `sass`, `postcss`, `antd` and other projects and ideas.