The Vue component library you were waiting for

Celeste UI is a library with predesigned Vue 3 components still in development. If you want to help finish this project, please follow the CONTRIBUTING guide.

Table of contents

• Documentation
• Installation
• Usage

Documentation

A documentation is still being developed. For now, you can check out the deployed storybook build here.

Installation

First, install the necessary packages. This library uses @emotion/css to handle the component styles, so it must also be installed:

NPM

npm install celeste-ui @emotion/css

Yarn

yarn add celeste-ui @emotion/css

Finally, install the Lato font. For this, you can use Google Web Fonts:

link

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">

@import

<style>
  @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
</style>

Usage

To start using the components, please follow these steps:

1. Wrap your application with the CThemeProvider

<template>
  <CThemeProvider>
    <!-- The rest of your app -->
  </CThemeProvider>
</template>
<script setup lang="ts">
import { CThemeProvider } from 'celeste-ui';
</script>

1. Now you can start using components like so!:

<template>
  <CButton>Click me!</CButton>
</template>
<script setup lang="ts">
import { CButton } from 'celeste-ui';
</script>