---
url: https://docs.youcan.shop/celeste-ui/installation.md
---
# Installation

## Installing the packages

Install `@youcan/celeste` along with its peer dependency:

::: code-group

```bash [npm]
npm install @youcan/celeste @youcan/celeste-tokens
```

```bash [yarn]
yarn add @youcan/celeste @youcan/celeste-tokens
```

```bash [pnpm]
pnpm add @youcan/celeste @youcan/celeste-tokens
```

```bash [bun]
bun add @youcan/celeste @youcan/celeste-tokens
```

:::

## Including the styles

Import the design tokens and component styles at the top level of your application:

```js
import '@youcan/celeste-tokens/tokens.css';
import '@youcan/celeste/assets/celeste.css';
```

## Icons (optional)

The icon package can be installed separately if you need it standalone:

::: code-group

```bash [npm]
npm install @youcan/celeste-icons
```

```bash [yarn]
yarn add @youcan/celeste-icons
```

```bash [pnpm]
pnpm add @youcan/celeste-icons
```

```bash [bun]
bun add @youcan/celeste-icons
```

:::