Getting Started

Start including production-ready CSS from Luxa CSS and efficiently streamline your development.

On this page

Luxa CSS is a starting point for a clean and lightweight design system that aims for minimalism, speed, and ease of maintenance.

By adopting Luxa CSS, you can steer clear of complex and hard-to-adjust CSS structures. This choice leads to a more efficient development process and enhances your project’s performance.

There are three ways to get started:

Install manually

Download the latest version and link the CSS in the <head> of your website.

Install from CDN

Alternatively, using a CDN, you can easily include Luxa CSS in your project. Choose the version that suits your needs:

<!-- 🦣 Expanded - 8KB -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/luxonauta/luxacss@latest/dist/expanded/luxa.css"
/>

<!-- 🦐 Compressed - 6KB -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/luxonauta/luxacss@latest/dist/compressed/luxa.min.css"
/>

Install with a package manager

npm i luxacss

pnpm i luxacss

bun i luxacss

Then import it into your main layout/page:

import "luxacss";

Or, import Luxa into your .scss file with @use:

@use "luxacss";