Installation steps

Initialize SIGMA-UI

In your existing Vite-Vue project, run the following command to config SIGMA-UI (learn more in: CLI docs > init):

npx sigma-ui init

And follow the steps in your terminal.

Check styles import

Make sure you are importing the global styles file that was created / modified by the init command:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/index.css'

createApp(App).mount('#app')

Check tsconfig

Make sure your tsconfig.json is configured correctly so that SIGMA-UI CLI commands can resolve alias paths and install components into your components dir:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Add components

You can now start adding components to your project (learn more in: CLI docs > add):

npx sigma-ui add button

The command above will add the Button component to your project. You can then import and use it like this:

<script setup lang="ts">
import { Button } from '@/components/ui/button'
</script>

<template>
  <Button>Click me</Button>
</template>