Getting Started
インストール
Lism UI は大きく分けて2通りの導入方法ができます。
1. CSS設計のみを導入したい場合
HTMLで組むシンプルなサイト等、JSX形式のコンポーネントが不要であれば、CSSファイルのみを読み込んでください。
@lism-ui/coreパッケージからimportする場合import "@lism-ui/core/css/all.css";<link href="https://cdn.jsdelivr.net/npm/@lism-ui/core/dist/css/all.css" rel="stylesheet" />もちろん、CSSファイルをダウンロードして読み込んでもOKです。
2. パッケージを使ってLism UI をフル活用する場合
ReactやAstroで専用のコンポーネントを使用するためには、コアパッケージをインストールする必要があります。
npm i @lism-ui/corepkg.pr.new を導入してます。
pnpm add https://pkg.pr.new/lism-ui/lism-ui/@lism-ui/core@{commitID}CSSの読み込み
import '@lism-ui/core/css/all.css';例えば、Next.jsであれば、_app.jsやlayout.jsでglobalスタイルとして読み込んでください。
コンポーネントの読み込み
reactベースで、コンポーネントを配布しています。
import { Box, Flex, ... } from '@lism-ui/core';特定の環境に合わせた追加コンポーネントの読み込み
純粋なReactコンポーネントは、@lism-ui/coreに含まれますが、Next.jsやAstroなどの特定のフレームワークに合わせたコンポーネントも準備しています。
Astro
@lism-ui/astroパッケージを追加すると、.astroファイルで構築されたコンポーネントを利用できるようになります。
以下のパッケージを追加でインストールしてください。
npm i @lism-ui/astro@lism-ui/astroから Lism Components をインポートして利用できるようになります。
import { Box, Flex, ... } from '@lism-ui/astro';一部のコンポーネントは、ReactとAstroで利用方法が変わるので注意してください。（各コンポーネントの解説ページで個別に説明していく予定です。）
Next.js (App Router)
準備中@lism-ui/nextパッケージを追加すると、Lism コンポーネントに関する"use client"の記述を省略することができるようになります。
"use client"が必要なものにはすでに記述された状態でimportできるようになります。）
npm i @lism-ui/next@lism-ui/nextから@lism-ui/coreのコードをインポートできるようにするため、next.config.jsのtranspilePackagesに"@lism-ui/next"を追加してください。
const nextConfig = { transpilePackages: ["@lism-ui/next"], // ...};
module.exports = nextConfig;これらの準備により、<Tabs.Root>などの"use client"が必要なコンポーネントも簡単に利用できるようになります。
（Boxなどの普通のコンポーネントも、@lism-ui/nextから同時にimportできます。）
import { Box, Tabs, Tabs.Item } from '@lism-ui/next';
<Tabs.Root> <Tabs.Item label='tab1'> <Box>...</Box> </Tabs.Item> <Tabs.Item label='tab2'> <Box>...</Box> </Tabs.Item></Tabs.Root>