Introduction

Linea UI is a lightweight SCSS and JavaScript component library built on two core principles: BEM naming and an 8 px vertical rhythm. Styles are organized into CSS cascade layers for predictable specificity, and every component ships with accessible defaults and a small footprint.

Installation

Add Linea UI to your project as a dependency. For local development, use the file: protocol to link the local package directly.

npm install ln

CSS

Import the compiled stylesheet at the root of your application. Four CSS files are available, each self-contained:

All styles are scoped to cascade layers in this order:

@layer reset, tokens, base, layout, blocks, helpers, utilities;

Import the full stylesheet in a bundler:

import 'ln/dist/styles.css';

Or include it directly in HTML:

<link rel="stylesheet" href="path/to/ln/dist/styles.css">

JavaScript

The JS layer is optional and adds behavior only where markup asks for it. You can import the full bundle, which auto-initializes every module on DOMContentLoaded:

import 'ln';

Or include it directly in HTML:

<script type="module" src="path/to/ln/dist/bundle.js"></script>

Individual modules

If you only need a few interactive components, import and initialize their modules individually instead of loading the full bundle:

import { initDialog } from 'ln/js/modules/dialog.js';
import { initDropdown } from 'ln/js/modules/dropdown.js';
import { initTabs } from 'ln/js/modules/tabs.js';

initDialog();
initDropdown();
initTabs();

Available modules:

Theme initialization

To prevent a flash of unstyled content on themed pages, add the theme-init script to <head> before any stylesheet. It reads the stored theme preference from localStorage and applies the data-theme attribute before first paint.

<script src="path/to/ln/dist/theme-init.js"></script>

Icons

Linea UI includes its own SVG icon set. Each icon is a 24 × 24 filled SVG embedded via CSS masks, so icons inherit currentColor and scale with font-size. See the icons page for the full set.

<i class="ln-i-chevron-down"></i>
<i class="ln-i-search"></i>
<i class="ln-i-check"></i>

Include the icon stylesheet alongside the main stylesheet:

<link rel="stylesheet" href="path/to/ln/dist/icons.css">

SCSS source

For custom builds, import the SCSS source directly. This gives you access to all tokens, mixins, and settings at compile time.

@use 'ln/scss' as *;

Or import individual layers:

@use 'ln/scss/tokens';
@use 'ln/scss/base';
@use 'ln/scss/blocks';