Getting Started

aura installs in under a minute. No config required.

1. Install

npm install useaura
# or
pnpm add useaura
# or
yarn add useaura

2. Import the CSS

<!-- In your HTML -->
<link rel="stylesheet" href="node_modules/useaura/dist/forma.css" />

/* Or in JS/TS */
import 'useaura/css'

3. Write attributes

<div surface="glass" tone="primary" density="spacious" radius="xl">
  Hello, forma.
</div>

<div layout="row" gap="md" adaptive>
  <button surface="solid" tone="primary" density="compact" radius="full" motion="expressive">
    Get started
  </button>
  <button surface="ghost" density="compact" radius="full" motion="expressive">
    Learn more
  </button>
</div>

Optional: Token overrides

Override any design token at runtime by calling init():

import { init } from 'useaura'

init({
  tokens: {
    tone: { primary: '#your-brand-color' },
    surface: { glass: { blur: '20px' } },
  }
})

With Vite (zero runtime)

// vite.config.ts
import forma from 'useaura/vite'

export default {
  plugins: [forma()]
}

Attribute reference →