First component

A smoke test confirms the install, the Tailwind preset, and the design tokens are all wired correctly.

Mount the app

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

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

A minimal page

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@scaler-tech/aurora/button'
import { Banner } from '@scaler-tech/aurora/banner'
import { TextInput } from '@scaler-tech/aurora/input'
import { Tag } from '@scaler-tech/aurora/tag'

const name = ref('')
</script>

<template>
    <main class="max-w-2xl mx-auto px-6 py-12 flex flex-col gap-6">
        <header>
            <p class="caption-sm text-cta mb-2">Aurora install test</p>
            <h1 class="heading-1-semibold text-primary">Smoke test</h1>
        </header>

        <Banner
            variant="success"
            title="Installation complete"
            description="Aurora components and tokens are wired up."
            :closeable="false"
        />

        <div class="flex flex-col gap-2">
            <label class="paragraph-sm-medium text-primary">Your name</label>
            <TextInput v-model="name" placeholder="Type something…" />
        </div>

        <div class="flex flex-wrap gap-2">
            <Tag variant="success" leading-icon="check">Working</Tag>
            <Tag variant="default">Default</Tag>
        </div>

        <div class="flex flex-wrap gap-3">
            <Button>Primary</Button>
            <Button variant="secondary">Secondary</Button>
        </div>
    </main>
</template>

What you should see

Aurora install test

Smoke test

Installation complete

Aurora components and tokens are wired up.

Your name

Working

Default

If anything renders unstyled, the most common culprits are:

• Missing @scaler-tech/aurora/dist/**/*.js in Tailwind's content — Tailwind purges classes it doesn't see referenced
• design-system.css imported after @tailwind base — token CSS variables don't get into the right cascade
• Wrong Tailwind major version — aurora needs Tailwind v3, not v4

Where to go next

• Browse components for the full catalog
• Read foundations for tokens, typography, spacing
• See patterns for how to compose components into common surfaces