ENRU
Guide

Getting started

Aura is two layers: a token package that ships the CSS, and a thin component library per framework. The components render class names — the visual layer lives in the tokens, once, for everyone.

1. Install

# nothing to install — link the two stylesheets and write markup
npm i @ilomee/aura-core
npm i @ilomee/aura-react @ilomee/aura-core react react-dom
npm i @ilomee/aura-vue @ilomee/aura-core vue
npm i @ilomee/aura-svelte @ilomee/aura-core svelte
npm i @ilomee/aura-angular @ilomee/aura-core @angular/core @angular/common

@ilomee/aura-core and your framework are peer dependencies — not bundled into this package. You import from it directly in the next step, so without it installed nothing renders correctly.

2. Load the stylesheets — once

The components ship no styles of their own. Without these imports you get correct markup with no appearance.

<link rel="stylesheet" href="node_modules/@ilomee/aura-core/dist/tokens.css" />
<link rel="stylesheet" href="node_modules/@ilomee/aura-core/dist/components.css" />
<link rel="stylesheet" href="node_modules/@ilomee/aura-core/dist/animations.css" /><!-- optional -->
import '@ilomee/aura-core/css';            // CSS variables — required
import '@ilomee/aura-core/components.css'; // component + layout + type classes — required
import '@ilomee/aura-core/animations.css'; // optional
import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';
import '@ilomee/aura-core/animations.css'; // optional
import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';
import '@ilomee/aura-core/animations.css'; // optional
/* In angular.json "styles", or a global stylesheet. */
@import '@ilomee/aura-core/css';
@import '@ilomee/aura-core/components.css';
@import '@ilomee/aura-core/animations.css'; /* optional */

3. Use it

<html data-theme="light" data-accent="aqua">
  <div class="aura-stack" style="--aura-gap: var(--space-4)">
    <h1 class="aura-text aura-text--h1">Aura</h1>
    <button class="aura-btn aura-btn--primary">Get started</button>
    <button class="aura-btn">Cancel</button>
  </div>
</html>
import { AuraProvider, Button, Stack, Typography } from '@ilomee/aura-react';

export function App() {
  return (
    <AuraProvider defaultTheme="light" defaultAccent="aqua">
      <Stack gap={4}>
        <Typography variant="h1">Aura</Typography>
        <Button variant="primary">Get started</Button>
      </Stack>
    </AuraProvider>
  );
}
<script setup lang="ts">
import { AuraProvider, Button, Stack, Typography } from '@ilomee/aura-vue';
</script>

<template>
  <AuraProvider default-theme="light" default-accent="aqua">
    <Stack :gap="4">
      <Typography variant="h1">Aura</Typography>
      <Button variant="primary">Get started</Button>
    </Stack>
  </AuraProvider>
</template>
<script lang="ts">
  import { AuraProvider, Button, Stack, Typography } from '@ilomee/aura-svelte';
</script>

<AuraProvider theme="light" accent="aqua">
  <Stack gap={4}>
    <Typography variant="h1">Aura</Typography>
    <Button variant="primary">Get started</Button>
  </Stack>
</AuraProvider>
import { Component } from '@angular/core';
import { AuraTheme, AuraButton, AuraText, AuraStack } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  selector: 'app-root',
  imports: [AuraTheme, AuraButton, AuraText, AuraStack],
  template: `
    <div auraTheme theme="light" accent="aqua">
      <div auraStack [gap]="4">
        <h1 auraText variant="h1">Aura</h1>
        <button auraButton variant="primary">Get started</button>
      </div>
    </div>
  `,
})
export class AppComponent {}

Without a component library

The classes are the real API. If you would rather not install a component package, import the two stylesheets and write the markup yourself — this is exactly what every framework package emits.

<html data-theme="dark" data-accent="iris">
  <button class="aura-btn aura-btn--primary">Create</button>
  <div class="aura-card aura-card--raised">…</div>
</html>

Next

Browse componentsSee the tokensCheck framework parity