---
url: https://docs.youcan.shop/celeste-ui/introduction.md
---

# Introduction

Celeste is YouCan's official design system and component library.

It provides a consistent set of tokens, icons, and Vue 3 components that make it straightforward to build interfaces that look and feel at home in the YouCan ecosystem.

## What's included

| Package | Description |
| --- | --- |
| `@youcan/celeste` | Vue 3 component library |
| `@youcan/celeste-tokens` | Design tokens (colors, spacing, typography, etc.) |
| `@youcan/celeste-icons` | Icon set |

Each package can be installed and used independently, but they are designed to work together.

## Key Features

* **Built for YouCan:** Celeste is used internally by the YouCan team and made available to developers building on top of the YouCan platform.

* **Vue 3:** The component library targets Vue 3. Components are built with composability in mind and rely on native HTML APIs wherever possible rather than reinventing them.

* **Design tokens first:** Tokens are the source of truth for visual decisions: Colors, spacing, shadows, and typography are all defined as tokens and consumed by both the component library and your application styles.

## FAQ

**Which frameworks are supported?**

Vue 3 only.

**Can I use this library in my project?**

Celeste is available for applications that integrate with YouCan software or services. See the [license](https://github.com/youcan-shop/celeste/blob/main/LICENSE) for details.

**How can I report a bug or request a feature?**

Open an issue on the [GitHub repository](https://github.com/youcan-shop/celeste/issues/new).