Getting Started

01 — Installation

Installer Lunar Aurora

Ajoutez Lunar Aurora à votre projet via npm. Aucune dépendance externe requise.

terminal

❯npm install lunar-aurora

Ou via yarn / pnpm :

terminal

❯yarn add lunar-aurora
❯pnpm add lunar-aurora

02 — Import

Importer le framework

Importez le CSS et le module JS dans votre point d'entrée. Fonctionne avec Vite, Webpack, Rollup et tous les bundlers modernes.

main.js

// Styles du framework
import 'lunar-aurora/dist/aurora.min.css'
 
// Module JS (thèmes, composants interactifs)
import LunarAurora from 'lunar-aurora'
 
// Initialisation
LunarAurora.init()

Vous pouvez également utiliser le CDN sans bundler :

index.html

          <link
           rel="stylesheet"
           href="https://unpkg.com/lunar-aurora/dist/aurora.min.css"
          >
        

          <script
           type="module"
           src="https://unpkg.com/lunar-aurora/dist/aurora.esm.js"
          ></script>
        

03 — Premier composant

Vos premiers composants

Tous les composants Lunar Aurora utilisent le préfixe la-. Ajoutez simplement les classes à vos éléments HTML — aucun JS requis pour les composants de base.

Boutons

HTML

          <button
           class="la-btn primary"
          >Primary</button>
        

          <button
           class="la-btn ghost"
          >Ghost</button>
        

          <button
           class="la-btn outline"
          >Outline</button>
        

          <button
           class="la-btn primary lg"
          >Large</button>
        

          <button
           class="la-btn primary sm"
          >Small</button>
        

Card

HTML

<div class="la-card">
  <div class="la-card-header">
    <h3 class="la-card-title">Titre de la card</h3>
  </div>
  <div class="la-card-body">
    <p>Contenu de votre composant card.</p>
  </div>
</div>

Titre de la card

Contenu de votre composant card.

Composant prêt

Aucune configuration JS nécessaire pour les composants statiques.

04 — Thèmes

Changer de thème

Lunar Aurora inclut 30+ thèmes activables via un seul attribut HTML. Ajoutez data-theme="..." sur la balise <html> ou sur n'importe quel conteneur.

HTML

<!-- Thème global sur la page entière -->
<html data-theme="cyberpunk">
 
<!-- Thème local sur un composant -->
<div data-theme="cute">
  <button class="la-btn primary">Kawaii ✨</button>
</div>

Thèmes disponibles :

Dark

Défaut — violet / cyan

dark

Cyberpunk

Néon cyan électrique

cyberpunk

Cute

Rose pastel kawaii

bubble

Pro

Slate sobre et pro

mono-dark

Forest

Vert émeraude naturel

eco-dark

Sunset

Dégradé chaud amber

sunset

Light

Fond clair minimal

light

Aurora

Violet et rose aurora

aurora

Et bien plus encore — retrouvez tous les thèmes sur la page Documentation.

Installer Lunar Aurora

Importer le framework

Vos premiers composants

Changer de thème

Prêt à construire ?