Installation

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

There are two main approaches to getting started.

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/dist/css/main.css" rel="stylesheet" />

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

Using dedicated 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 it 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';

Note when importing .astro files

Directly importing .astro files from inside node_modules may not work and could require additional configuration. If you encounter a “Directory import ’…’ is not supported resolving ES modules …” error, add "lism-css" to vite.ssr.noExternal in your astro.config.js.

↓

astro.config.js

import { defineConfig } from "astro/config";

export default defineConfig({
  // ...other settings
  vite: {
    ssr: {
      noExternal: ["lism-css"],
    },
  },
});

(We are investigating whether this can be resolved by improving the package distribution method…)

AI Tool Integration (MCP)

An MCP server is available that allows AI coding tools to reference the Lism CSS documentation and API.

claude mcp add lism-css -- npx -y @lism-css/mcp

For details, see GitHub - @lism-css/mcp.