import { Tabs, Tab, Cards, Card,Callout } from 'nextra/components'

# Quick start

## Features

- Pure CSS component, versatile and lightweight
- **0** runtime, all work is done at compile time
- Can be used in combination with `tailwindcss`, what you write is what you get
- Extensible including, but not limited to, themes, colors, types, sizes, shapes... everything can be customized

## Install `@icestack/ui`

{/* prettier-ignore-start */}
<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
   <Tab>
```bash
pnpm install -D @icestack/ui @icestack/tailwindcss
```
</Tab>
   <Tab>
```bash
npm install -D @icestack/ui @icestack/tailwindcss
```
</Tab>
   <Tab>
```bash
yarn add -D @icestack/ui @icestack/tailwindcss
```
</Tab>
   <Tab>
```bash
bun add -D @icestack/ui @icestack/tailwindcss
```
</Tab>
</Tabs>

{/* prettier-ignore-end */}
`@icestack/ui` will be downloaded and installed locally, and a command `icestack` will be registered

## Initialize configuration file

After installing `@icestack/ui`, execute:

```bash
npx icestack init --mode preset
```

This command will generate an `icestack.config.cjs` file in the current execution directory. The default content is as follows:

```js filename="icestack.config.cjs"
/**
  * @type {import('@icestack/ui').Config}
  */
const config = {
   outdir: './my-ui'
}

module.exports=config
```

### Build style

You can configure your own styles and options in `config`, and then execute:

```bash
npx icestack build
```

<Callout type="info">
You can register `icestack build` into your `package.json`:
```json
{
    "scripts": {
     "build:ui": "icestack build"
   },
}
```
</Callout>

This command will build the product in the `'./my-ui'` directory under the current configuration file. Then you can directly import these `css` and `js` files, but give them to `tailwindcss` for use. Also a good choice.

## Used as tailwindcss plugin

### Configuration

Register the `icestackPlugin` plug-in in `tailwind.config.js` and pass a `loadDirectory` parameter to locate the location where the product was just generated:

```js filename="tailwind.config.js"
const path = require('node:path')
const { icestackPlugin } = require('@icestack/tailwindcss')

/** @type {import('tailwindcss').Config} */
module.exports = {
   // ...
   plugins: [
     icestackPlugin({
       // Absolute path to the loading directory
       loadDirectory: path.resolve(__dirname, 'my-ui'),
       // Whether to inject tailwindcss theme config
       // When true, the generator's primary success warning colors will enter the tailwindcss.theme.extend configuration
       //You can only use bg-primary / text-success
       //Default value: false
       loadConfig: true
       // ...
     })
   ]
}
```

Then as long as we run the project normally, we can directly use all the `CSS` components in the `my-ui` directory!

<Callout type="info">
You can find the default [all components list](/components/overview) directly here and copy `html` directly

If your `class` naming conflicts with the default scheme, you can set [`postcss.prefix`](/config/postcss#postcssprefix) to add a prefix to avoid conflicts.
</Callout>


