読み込み方（インストール）

Lism CSS を使うには、まず CSS ファイルをページに読み込みます。いちばん簡単なのは HTML に1行足す方法です。React・Astro・Next.js で使う方法と、UI 部品の入れ方もこのページにまとめます。

どの方法を選ぶ？#

HTML に1行足す（CDN）#

CDN（ファイルをネットから配ってくれるサービス）の CSS を、HTML の <head> の中で読み込みます。準備はこれだけです。

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

lism-css@1.0.1 の部分が版（バージョン）です。CSS ファイルを自分のパソコンに保存して、そのファイルを読み込んでもかまいません。

ページ全体の例は次のとおりです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/lism-css@1.0.1/dist/css/main.css" rel="stylesheet" />
</head>
<body>
  <p class="-p:20 -bd">Lism のクラスが効きます</p>
</body>
</html>

ひな形から始める（create lism）#

新しいプロジェクトを最初から作るなら、create lism のコマンドがいちばん早い方法です。どのひな形を使うか、どこに作るかは、コマンドを実行したあとに質問されて選べます。

npm create lism@latest

pnpm・yarn（npm と同じ役目の道具）を使う場合は次のとおりです。

pnpm create lism@latest

yarn create lism

このコマンドは lism-cli create と同じ働きをします。

ひな形を先に指定する#

--template を付けると、質問を飛ばして、使うひな形を直接決められます。

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

pnpm create lism@latest --template minimal-astro

yarn create lism --template minimal-astro

選べるひな形#

React・Astro で使う（npm）#

React（.tsx）と Astro（.astro）の部品は、npm のパッケージ lism-css に入っています。

1. パッケージを入れる#

npm i lism-css

pnpm add lism-css

yarn add lism-css

2. CSS を読み込む#

import 'lism-css/main.css';

Next.js（16 以降）では、App Router の場合、いちばん外側のレイアウトのファイル app/layout.tsx に書きます。

3. 部品を読み込む#

React なら lism-css/react、Astro なら lism-css/astro から読み込みます。

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

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

部品の書き方は Lism コンポーネント（React・Astro） で説明しています。

Next.js で使う#

Next.js では、@lism-css/plugin の withLism() を使います。設定ファイル lism.config.js の中身を反映した CSS を作る・型（TypeScript の入力補完の情報）を作る・CSS の読み込みを差しかえる、をまとめてやってくれます。

1. パッケージを入れる#

本体の lism-css と、作るとき（ビルド）だけ使う @lism-css/plugin を入れます。

npm i lism-css
npm i -D @lism-css/plugin

pnpm add lism-css
pnpm add -D @lism-css/plugin

yarn add lism-css
yarn add -D @lism-css/plugin

2. next.config.mjs を withLism() で包む#

import { withLism } from '@lism-css/plugin/next';

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withLism(nextConfig);

Next.js は、読み込んだファイルをその場で作りかえることができません。そこで withLism() が、開発やビルドを始める前に、あなたの設定（lism.config.js）を入れた CSS を .lism-css/css/ の中に用意しておきます。コードの中の import 'lism-css/main.css' は、自動でその用意した CSS を指すようになります。すでに書いてある nextConfig の設定は消えません。

3. CSS と部品を読み込む#

CSS は、App Router の場合 app/layout.tsx（いちばん外側のレイアウト）に書きます。部品は lism-css/react から読み込みます。

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

4. lism.config.js で変える（しなくてもよい）#

プロジェクトのいちばん上のフォルダに lism.config.js を置くと、トークンや Props を足したり変えたりできます。next dev を動かしたまま保存すれば、CSS と型が作り直されます。開発用のサーバーを止めて立て直す必要はありません。

export default {
  tokens: {
    color: {
      // --success を作り、c="success" などで使えるようにする
      success: 'oklch(0.6 0.15 150)',
    },
  },
};

設定できることは lism.config.js で設定する で説明しています。

5. 作られたファイルの扱い#

withLism() は、プロジェクトのいちばん上に lism-env.d.ts を作ります。入力補完を効かせるために、tsconfig.json の include に足し、git にもコミットします。

{
  "include": ["next-env.d.ts", "lism-env.d.ts", "**/*.ts", "**/*.tsx"]
}

いっぽう .lism-css/（作られた CSS）はビルドの出力なので、.gitignore に足して git に入れません。

# .gitignore
.lism-css/

UI 部品を入れる（@lism-css/ui）#

アコーディオン・タブ・モーダルなどの UI 部品は、別のパッケージ @lism-css/ui に入っています。

パッケージとして使う#

npm i @lism-css/ui

pnpm add @lism-css/ui

部品は1つずつ、それぞれのパスから読み込みます。

// React
import { Accordion } from '@lism-css/ui/react/Accordion';
import { Tabs } from '@lism-css/ui/react/Tabs';

// Astro
import { Accordion } from '@lism-css/ui/astro/Accordion';
import { Tabs } from '@lism-css/ui/astro/Tabs';

自分のプロジェクトに写す#

lism-cli ui add を使うと、UI 部品のソースコードを自分のプロジェクトに写せます。写したものは自由に書きかえられます。

# 1つ足す（はじめての時は質問に答えて準備する）
npx lism-cli ui add Accordion

# いくつかまとめて足す
npx lism-cli ui add Accordion Modal Tabs NavMenu

# 全部足す
npx lism-cli ui add --all

部品の名前は、読み込むときと同じ書き方（NavMenu のように単語の頭を大文字にする形）がおすすめです。大文字・小文字・-・_ の違いは区別されないので、navmenu や nav-menu と書いても同じ部品になります。

CSS ファイルの種類#

lism-css には、使いみちのちがう CSS ファイルが4つ入っています。ふだんは main.css を使います。

@layer（CSS の強さの順番を決める仕組み）については CSS のレイヤーと強さの順番、それぞれのファイルのちがいは CSS ファイルの種類 で説明しています。

使わない CSS を消す（CSS Purge）#

公開するものを作るときに、使っていない Lism のクラスを取りのぞいて CSS を軽くできます。@lism-css/plugin の Vite・Astro 用のプラグイン lismCss() に purge: true を渡すと有効になります。手順は 使わない CSS を消す（CSS Purge） を見てください。

AI のツールと一緒に使う#

Claude Code・Cursor・Codex などの AI のコーディングツールに、Lism の書き方を教える仕組みもあります。

• AI Skills（AI に書き方を教える）：プロジェクトにファイルを置いて、設計のルールを AI に伝える
• MCP サーバー：部品・Props・トークンの情報を、AI がその場で調べられるようにする

次に読むページ#

• はじめてのページを作る：読み込んだ Lism で、実際にページを組み立てる