Cirrus Stratus Design System

Appearance

Installation ​

Package Manager ​

Install the Cirrus Stratus System using your preferred package manager:

bash
pnpm add @ci/stratus-components
bash
npm install @ci/stratus-components
bash
yarn add @ci/stratus-components

Peer Dependencies ​

Make sure you have Vue 3 installed as a peer dependency:

bash
pnpm add vue@^3.4.0

Import Styles ​

Import the CSS styles in your main application file:

typescript
// main.ts
import '@ci/stratus-components/stratus-components.css'
import '@ci/stratus-components/app.css'

Global Registration ​

Register components globally in your Vue application:

typescript
// main.ts
import { createApp } from 'vue'
import { CButton, CCard, CInput } from '@ci/stratus-components'
import App from './App.vue'

const app = createApp(App)

app.component('CButton', CButton)
app.component('CCard', CCard)
app.component('CInput', CInput)

app.mount('#app')

Local Registration ​

Or import components locally in your components:

vue
<script setup lang="ts">
import { CButton } from '@ci/stratus-components'
</script>

<template>
  <CButton variant="primary">Click me!</CButton>
</template>

TypeScript Support ​

The design system includes full TypeScript support out of the box. Component props and events are fully typed.