🌌 Lanima (Beta version)

Lanima is a high-performance, atomic CSS design system built on top of the UnoCSS engine. It provides a Tailwind-like experience with a specialized "Solar-Tech" aesthetic, featuring deep oceanic blues, vibrant cyans, and warm solar accents.

🚀 Fast by nature. Retro by choice.

✨ Features

• UnoCSS Powered: Instant HMR and zero-runtime CSS generation.
• Solar-Tech Palette: A professionally curated color system (#023047, #219ebc, #fb8500).
• Pixel-Perfect Components: Built-in retro/8-bit UI shortcuts for buttons and inputs.
• Performance: Modern translucent layers with optimized performance.
• Fully Customizable: Use unocss experience to make your own design.

🛠 Installation

Add Lanima to your project:

npm install lanima

Integration for Vite

import { lanimaPlugin } from "lanima";

// Vite config:
export default defineConfig({
  plugins: [
    ...
    lanimaPlugin(),
  ],
});

Theme Components

Buttons

 "btn-retro-light"
 "btn-retro-primary"
 "btn-retro-accent"
 "btn-retro-outlined"

Inputs

"input-primary"
"input-primary-label"

Cards

 "card-retro"
 "card-retro-header"
 "card-retro-content"
 "card-retro-footer"

Example

    <div className="card-retro">
      <div className="card-retro-header">
        <div className="flex items-center gap-2">
          <div className="w-2 h-2 rounded-full bg-green animate-pulse" />
          <span className="text-accent text-xs font-bold uppercase">
            System Online
          </span>
        </div>
      </div>

      <main className="card-retro-content">
        <h3 className="text-xl font-bold text-white mb-2">Node Container</h3>
        <p className="text-primary-light/70 text-sm leading-relaxed">
          Your node is stable now and within optimal latency param.
        </p>
      </main>

      <div className="card-retro-footer flex-col sm:flex-row">
        <button className="btn-retro-light w-full text-3">Reboot</button>
        <button className="btn-retro-primary w-full text-3">Settings</button>
      </div>
    </div>