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 for details.
How can I report a bug or request a feature?
Open an issue on the GitHub repository.