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

init writes src/assets/index.css as CSS-first Tailwind v4 and installs tw-animate-css. It does not create a tailwind.config.js. Import that file from the app entry:

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

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

The stylesheet starts like this:

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-primary: var(--primary);
  --radius-lg: var(--radius);
}

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>