import { Meta } from '@storybook/addon-docs/blocks'

<Meta title="Introduction/Getting Started" />

# Getting Started with Blocks UI

This guide walks you through installing Blocks UI and configuring your project to work with our design system.

> **Note:** Blocks UI is still in early development. As it evolves, these instructions may be updated or simplified.

---

## 1. Installation

To install Blocks UI, you need to install both the component library and the icons package. Run one of the following commands in your project:

**Using pnpm:**

```bash
pnpm install @chainlink/blocks @chainlink/blocks-icons
```

**Using npm:**

```bash
npm install @chainlink/blocks @chainlink/blocks-icons
```

**Using Yarn:**

```bash
yarn add @chainlink/blocks @chainlink/blocks-icons
```

> **Note:** Both packages are required. The `@chainlink/blocks` package contains the UI components, while `@chainlink/blocks-icons` provides the icon library that components use internally.

## 2. Tailwind CSS Setup

Extend your Tailwind configuration so that all necessary classes are processed. For example, in your tailwind.config.ts or tailwind.config.js:

```js
// tailwind.config.ts
import baseConfig from '@chainlink/blocks/src/theme/base'

export default baseConfig
```

This setup ensures that Tailwind CSS picks up the styles from Blocks UI.

## 3. Import Global Styles

Ensure that the global styles from Blocks UI are applied across your application. Import the global stylesheet high in your app (for example, in your `layout.ts`):

```js
// layout.ts (or your main app entry point)
import '@chainlink/blocks/src/theme/globals.css'
```