@lism-css/ui

English | 日本語

What is @lism-css/ui?

@lism-css/ui is an interactive UI component library built on top of lism-css. It provides React and Astro components for frequently used UI patterns such as accordions, modals, and tabs.

All components are based on the layout system and design tokens of Lism CSS.

Available Components

| Component | Description | |-----------|-------------| | Accordion | Expandable content sections using native <details> element | | Alert | Contextual feedback messages with icon and color variants | | Avatar | Circular image display for user profiles | | Badge | Small status labels and counters | | Button | Styled button with variants and sizes | | Callout | Highlighted content blocks for tips, warnings, and notes | | Chat | Chat bubble UI for conversational layouts | | Details | Styled native <details> / <summary> element | | Modal | Dialog overlay with backdrop | | NavMenu | Navigation menu with nested item support | | ShapeDivider | Decorative section dividers with SVG shapes | | Tabs | Tabbed content panels | | DummyText | Placeholder text for prototyping |

Installation

npm i @lism-css/ui lism-css

or

pnpm add @lism-css/ui lism-css

lism-css is a required peer dependency.

Setup

Import the CSS as a global style:

import 'lism-css/main.css';
import '@lism-css/ui/style.css';

For Astro, also add the following to astro.config.js:

export default defineConfig({
  vite: {
    ssr: {
      noExternal: ['lism-css', '@lism-css/ui'],
    },
  },
});

Usage

Each component is exposed as its own deep import path (@lism-css/ui/{react,astro}/<Component>). This is the recommended form — it ensures only the components you actually use are bundled.

A barrel entry (@lism-css/ui/react / @lism-css/ui/astro) is also available for compatibility, but for production builds we recommend the per-component imports shown below.

React

import { Accordion } from '@lism-css/ui/react/Accordion';
import { Button } from '@lism-css/ui/react/Button';
import { Text } from 'lism-css/react';

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Heading>
      <Accordion.Button>FAQ Question</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel>
      <Text>Answer content goes here.</Text>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

<Button href="/about" variant="outline">
  Learn More
</Button>

Astro

---
import { Accordion } from '@lism-css/ui/astro/Accordion';
import { Button } from '@lism-css/ui/astro/Button';
import { Text } from 'lism-css/astro';
---

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Heading>
      <Accordion.Button>FAQ Question</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel>
      <Text>Answer content goes here.</Text>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

<Button href="/about" variant="outline">
  Learn More
</Button>

Relationship to lism-css

Lism CSS is organized into two packages:

• lism-css — Core CSS framework providing layout components (Box, Flex, Stack, Grid, etc.), design tokens, property classes, and the responsive system.
• @lism-css/ui (this package) — Interactive UI components (Accordion, Modal, Tabs, etc.) that extend the core layout system with ready-to-use interface patterns.

You need lism-css installed to use @lism-css/ui.

AI Tool Integration

An MCP server is available for AI coding tools to reference Lism CSS documentation:

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

For more setup options, see the lism-css README.

Documentation

For full documentation, visit lism-css.com.

License

MIT