Aurora

Tailwind setup ​

Aurora ships a Tailwind preset (tokens, custom colors, typography utilities) and a CSS file with token definitions. Wire both up before importing components.

Tailwind config ​

js
// tailwind.config.js
import auroraPreset from '@scaler-tech/aurora/tailwind-preset'

/** @type {import('tailwindcss').Config} */
export default {
    presets: [auroraPreset],
    content: [
        './index.html',
        './src/**/*.{vue,js,ts,jsx,tsx}',
        './node_modules/@scaler-tech/aurora/dist/**/*.js',
    ],
}

The third content entry matters: aurora's compiled components contain Tailwind classes that your app's purge pass needs to see. Without it, components render unstyled in production builds.

PostCSS config ​

js
// postcss.config.js
export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

CSS entry ​

Aurora's design tokens live in theme/css/design-system.css and need to be imported before Tailwind's directives so the @layer base { :root { ... } } blocks resolve in the right pass:

css
/* src/style.css (or whatever your entry is) */
@import '@scaler-tech/aurora/theme/css/design-system.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    @apply font-inter bg-primary text-primary;
}

Vue plugins ​

If you use any Popper-based component (Tooltip, Menu, Modal, Drawer, Combobox, …), aurora animates them with the v-motion directive from @vueuse/motion. Register the plugin once at app startup:

ts
// src/main.ts
import { createApp } from 'vue'
import { MotionPlugin } from '@vueuse/motion'
import App from './App.vue'
import './style.css'

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

Skip this if you don't use any of the components listed above.

Fonts ​

Aurora's typography utilities (heading-1-semibold, paragraph-md, caption-sm, …) reference Inter and Manrope. Add them to your app's <head>:

html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Manrope:wght@200..800&display=swap"
/>

If you self-host fonts, just make sure the font-family names match (Inter, Manrope).

Next ​

→ Render your first component to verify everything is wired up.