Lism CSS
Docs
Search

Lism

A general-purpose component that accepts a wide range of props from the Lism CSS design system. When no props are specified, it simply renders a <div>.

Nearly all components in the Lism package are built on top of <Lism>.

↓
Output example of <Lism>
Lism content
<Lism p="20" fw="bold" c="blue" bgc="base-2" bdrs="20">
  Lism content
</Lism>

Import

import { Lism } from 'lism-css/react';

Lism Props

The Lism CSS-specific props that <Lism> accepts (Lism Props) are documented in a dedicated page.

Lism Props

A reference for the Lism CSS-specific props accepted by <Lism>-family components.

Prop types when wrapping <Lism> in Astro

When you build a custom component in Astro that wraps <Lism>, compose its prop type with an intersection type (&) instead of interface extends.

import { Lism } from 'lism-css/astro';
import type { ComponentProps } from 'astro/types';


type LismProps = ComponentProps<typeof Lism>;


// OK: compose with an intersection type
type Props = LismProps & {
  class?: string;
};

The prop type of Lism includes a union type whose accepted properties change depending on the value of layout. Because of this, extending it with interface extends results in a TypeScript error like the following.

// Not allowed: interface extends results in an error
interface Props extends LismProps {
  class?: string;
}
// Error: An interface can only extend an object type or intersection of
// object types with statically known members.

This constraint isn’t unique to <Lism>. Components such as <Text> and <Wrapper> that accept the layout prop include the same union type in their prop types, so apply the same intersection-type composition when wrapping them as well.

On the other hand, layout components with a fixed layout, such as <Cluster> and <Stack>, don’t include a union type in their prop types, so interface extends also works for them. That said, we recommend using intersection types consistently so the same approach works for every component.

getLismProps()

If you can’t use <Lism> — for example, because you can’t pass an external component to as — you can use getLismProps() to convert Lism Props into className and style.

import getLismProps from 'lism-css/lib/getLismProps';


function MyComponent({ children }) {
  // Convert Lism Props into className and style
  const lismProps = getLismProps({ p: '20', fz: 'l', c: 'red' });
  // → { className: '-p:20 -fz:l -c', style: { '--c': 'var(--red)' } }


  return <div {...lismProps}>{children}</div>;
}

Props other than Lism Props (such as href) are passed through to the return value as-is.

Among paths that point directly to files under lism-css/lib/, lism-css/react/, or lism-css/astro/, only lism-css/lib/getLismProps is part of the public API. Everything else is internal and may change even in a minor version update. Import components from lism-css/react or lism-css/astro.

© 2026 Lism CSS.