Installing Luxa CSS

Install Luxa manually or via CDN for a dependency-free setup, or use NPM.

On this page

Choose the method that best suits your project:

CDN (quickest)

Add one of these lines to your HTML <head>:

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

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

Manual download

  1. Download the latest version;
  2. Extract the CSS file you need;
  3. Link it in your HTML <head>.

Note: The GitHub repository includes documentation, making it larger than the NPM package.

Package manager

Install using your preferred package manager:

npm install luxacss

pnpm add luxacss

bun add luxacss
Usage with JavaScript bundlers (e.g., Webpack, Rollup)

Import the CSS file in your JavaScript entry point:

import "luxacss";

The package manager method is recommended for projects using modern JavaScript frameworks or build tools, as it allows for better integration and customization.

Usage with Sass

If you’re using Sass in your project, you can import Luxa CSS like this:

@use "luxacss";
// or
@use "luxacss" as *;

This allows you to use Luxa CSS variables, mixins, and functions in your Sass files.

Usage with Next.js

For Next.js projects, you can import Luxa CSS in your _app.js or layout.js file:

import "luxacss";

Customization

To customize Luxa CSS variables or use specific parts of the library, you can import individual modules:

// Import other modules as needed
@use "luxacss/variables" as vars;
@use "luxacss/grid" as grid;

Choose the method that best fits your development workflow and project requirements. 😊

Getting Help

Need help? Open an issue. I'll be happy to help. 🎈