Installation

This guide explains how to set up and use Lism CSS.

CSS-only setup

For simple HTML sites or other cases where you only need the CSS file, you can use it via CDN.

<link href="https://cdn.jsdelivr.net/npm/lism-css@0.16.0/dist/css/main.css" rel="stylesheet" />

You can also download the CSS file and load it locally.

Quick start

The fastest way to start from scratch is using create lism. The template and output directory can be chosen through interactive prompts.

pnpm create lism@latest

npm create lism@latest

yarn create lism

This is equivalent to lism create from lism-cli.

Specify a template

Pass --template to skip the interactive prompt and choose a template directly.

pnpm create lism@latest --template astro-minimal

npm create lism@latest -- --template astro-minimal

yarn create lism --template astro-minimal

Available templates

Use React/Astro components

React (.jsx) and Astro (.astro) components are distributed as an npm package.

1. Install the package

npm i lism-css

pnpm add lism-css

yarn add lism-css

2. Import the CSS

import 'lism-css/main.css';

For example, in Next.js, import it in _app.js or layout.js.

3. Import components

import { Box, Flex, ... } from 'lism-css/react';

import { Box, Flex, ... } from 'lism-css/astro';

Installing Lism UI

UI components such as accordions, tabs, and modals are provided as a separate package, @lism-css/ui.

Use as a package

npm i @lism-css/ui

pnpm add @lism-css/ui

// Example: importing React components
import { Accordion, Tabs, Button } from '@lism-css/ui/react';

// Example: importing in .astro
import { Accordion, Tabs, Button } from '@lism-css/ui/astro';

Copy to your project with the CLI

Using lism-cli’s lism ui add, you can copy UI component source code directly into your project and customize it freely. Component names are specified in PascalCase — the same form you use when importing.

# Add a component (interactive setup on first run)
npx lism-cli ui add Accordion

# Add multiple components at once
npx lism-cli ui add Accordion Modal Tabs NavMenu

# Add all components
npx lism-cli ui add --all

Case, hyphens, and underscores are ignored when resolving names, so NavMenu / navmenu / nav-menu / nav_menu all resolve to the same component.

AI Tool Integration

Set up AI coding tools (Claude Code, Cursor, Codex, etc.) to work effectively with Lism CSS.

• Skills — Place a file in your project to communicate design rules to AI agents
• MCP Server — AI tools can reference component, Props, and token information in real time