Installation

This guide walks you through setting up and using 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.

↓

Load 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

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

Available templates

Template	Description
`astro-minimal`	Minimal Astro-based setup

Use React/Astro components

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

1. Install the package

↓

Install the package

npm i lism-css

2. Import the CSS

↓

Import as a global style

import 'lism-css/main.css';

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

3. Import components

↓

Import individual components

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

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

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

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

Per-component imports are recommended

You can also import multiple components at once from @lism-css/ui/react / @lism-css/ui/astro, but depending on your build environment, code and CSS for unused components may end up bundled. For production builds, we recommend importing each component from its deep path as shown above.

// Bulk import works, but is not recommended
import { Accordion, Tabs, Button } from '@lism-css/ui/react';

Copy to your project with the CLI

With lism-cli’s lism ui add, you can copy UI component source code directly into your project and customize it freely. Specify component names 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

Name resolution is case-insensitive and ignores hyphens and underscores, 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