インストール

Lism CSSを利用するための手順を解説します。

CSS設計のみを導入する

シンプルなHTMLサイトの場合など、CSSファイルのみを読み込む場合はCDN経由で利用できます。

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

もちろん、CSSファイルをダウンロードして読み込んでもOKです。

クイックスタート

ゼロからセットアップする場合は create lism を使うのが最短です。テンプレートと出力先は対話プロンプトで選択できます。

pnpm create lism@latest

npm create lism@latest

yarn create lism

lism-cli の lism create と等価です。

テンプレートを指定して実行する

--template オプションを付けると、対話プロンプトをスキップしてテンプレートを直接指定できます。

pnpm create lism@latest --template astro-minimal

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

yarn create lism --template astro-minimal

利用可能なテンプレート

React/Astro コンポーネントを使用する

React(.tsx)、Astro(.astro)形式のコンポーネントを lism-cssとしてnpmパッケージで配布しています。

1. パッケージ(lism-css)のインストール

npm i lism-css

pnpm add lism-css

yarn add lism-css

2. CSS(main.css)の読み込み

import 'lism-css/main.css';

例：Next.jsであれば、_app.jsやlayout.jsでimportしてください。

3. コンポーネントの読み込み

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

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

Lism UI の導入

アコーディオンやタブ、モーダルなどのUIコンポーネントは、別パッケージ @lism-css/ui として提供しています。

パッケージとして利用する

npm i @lism-css/ui

pnpm add @lism-css/ui

// Reactコンポーネントをインポートする例
import { Accordion } from '@lism-css/ui/react/Accordion';
import { Tabs } from '@lism-css/ui/react/Tabs';
import { Button } from '@lism-css/ui/react/Button';

// .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';

// 一括 import も動作はしますが、推奨はしません
import { Accordion, Tabs, Button } from '@lism-css/ui/react';

CLI でプロジェクトにコピーする

lism-cli の lism ui add を使うと、UIコンポーネントのソースコードを自分のプロジェクトにコピーし、自由にカスタマイズできます。コンポーネント名は import するときと同じ PascalCase で指定します。

# コンポーネントを追加（初回は対話形式でセットアップ）
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 / nav_menu のいずれでも同じコンポーネントに解決されます。

AIツール連携

AIコーディングツール（Claude Code, Cursor, Codex など）で Lism CSS を効率よく扱うためのセットアップも用意しています。

• Skills — プロジェクトにファイルを配置し、AIに設計ルールを伝える
• MCP Server — AIツールがコンポーネント・Props・トークンの情報をリアルタイムに参照できる