Lism Props

The props specific to Lism CSS that <Lism>-family components accept are called Lism Props.

`as`

Specifies the HTML tag or external component to render. Defaults to div.

↓

Example of specifying an HTML tag

<Lism as="p">Lorem ipsum texts...</Lism>

↓

<p>Lorem ipsum texts...</p>

By passing an external component, you can have <Lism> delegate rendering to that component.

↓

Example: rendering Lism’s <Media> component using Next.js’s <Image>

import Image from 'next/image';

<Media as={Image} src="..." p="20" bd />

Lism Props (p and bd in the example above) are processed first to produce className and style, which are then forwarded to the component specified by as. This lets you apply Lism Props to non-Lism components.

`className`

The standard prop for attaching class names to a component. Use it for c-- base classes (Component Class) or any other external styles.

The old dedicated lismClass / variant slots have been removed. BEM modifier expansion is now handled by the buildModifierClass helper in @lism-css/ui on the UI-component side.

↓

Example

<Lism p="10" className="c--myComponent">Lorem ipsum texts...</Lism>

↓

<div class="c--myComponent -p:10">Lorem ipsum texts...</div>

`set` / `util`

set specifies Set Class entries (set--{value}),
util specifies Utility Class entries (u--{value}).

↓

Example

<Lism set="var:bxsh" util="cbox">...</Lism>

↓

<div class="set--var:bxsh u--cbox">...</div>

Multiple values

Both props accept space-separated values.

<Lism set="var:hov" hasTransition util="cbox trim">...</Lism>

Excluding with `-` prefix

Prefix a value with - to exclude that identifier. This is useful when you want to remove a class that has been applied internally by a component.

{/* Exclude set="plain" (set--plain) that MyButton applies by default */}
<MyButton set="-plain">...</MyButton>

{/* Exclude u--trim and add u--cbox */}
<MyCallout util="-trim cbox">...</MyCallout>

`layout` / `atomic`

layout and atomic are props for specifying Layout Primitive classes (l--*) and Atomic Primitive classes (a--*), respectively.

For example, specifying layout='flow' outputs the l--flow class, and specifying atomic='divider' outputs the a--divider class.

↓

Example

<Lism layout="flow">Lorem ipsum texts...</Lism>
<Lism atomic="divider" />

↓

<div class="l--flow">Lorem ipsum texts...</div>
<div class="a--divider"></div>

Some layout / atomic values enable additional dedicated processing.

Example 1: layout="withSide" accepts sideW / mainW
Example 2: atomic="spacer" accepts w / h as space tokens

Trait Props

Props corresponding to Trait Classes (is--* / has--*).

Prop	Output class	Purpose
`isWrapper(='{s\|l}')`	`is--wrapper` + `-contentSize:{s\|l}`	Content width restriction
`isLayer`	`is--layer`	Absolute positioned layer (inset:0)
`isBoxLink`	`is--boxLink`	Make entire box clickable
`isCoverLink`	`is--coverLink`	Link with a clickable area covering the parent element
`isContainer`	`is--container`	Container query target
`isSide`	`is--side`	Side element
`isSkipFlow`	`is--skipFlow`	Skip Flow spacing
`hasTransition`	`has--transition`	Sets `transition` properties via CSS variables
`hasGutter`	`has--gutter`	Reserves a unified horizontal gutter (`--gutter-size`)
`hasSnap`	`has--snap`	Sets `scroll-snap-*` properties via CSS variables
`hasMask`	`has--mask`	Sets `mask` property via CSS variables

For an overview of Trait Classes, see the following.

Trait Class

Learn about Trait Classes: is--* for declaring roles and has--* for attaching features.

CSS Props

Props corresponding to Property Class (-{prop}:{value}).

Use the same shortened CSS property names as the {prop} part (e.g., font-size → fz, padding → p).

The output format is determined by the value specified via prop={value}:

Value	Output format	Example
Token / preset value	`-{prop}:{value}` class	`fz='l'` → `-fz:l`
`true`	`-{prop}` class only (no variable)	`bd` → `-bd`
Value starting with `:`	Forced utility class	`p=':hoge'` → `-p:hoge`
Other values (BP-supported)	`-{prop}` class + `--{prop}` variable	`fz='20px'` → `-fz` + `--fz:20px`
Other values (BP-unsupported)	Direct `style` attribute output	`o='0.7'` → `opacity:0.7`
Other values (variable-only)	`--{prop}` variable only	`bdw='2px'` → `--bdw:2px`

Notes

BP-supported properties: Properties that can switch values at breakpoints. See the BP column in Property Class.
Variable-only properties: Properties like bds, bdc, bdw, keycolor that always output only CSS variables (--{prop}).
When a matching token exists but has no dedicated class, the value is output as a CSS variable. (e.g., c='red' → class="-c" + style="--c:var(--red)")

Code examples

↓

Token value → class only

<Lism fz="l" p="20">...</Lism>
// → <div class="-fz:l -p:20">...</div>

↓

Color token (no dedicated class) → class + CSS variable

<Lism c="red">...</Lism>
// → <div class="-c" style="--c:var(--red)">...</div>

↓

true → class only (no variable)

<Lism p bdrs>contents</Lism>
// → <div class="-p -bdrs">contents</div>

Use this to define the variable value in CSS or to inherit it from a parent element.

↓

Variable-only property → CSS variable only

<Lism bd bdc="#000" bdw="2px">...</Lism>
// → <div class="-bd" style="--bdc:#000;--bdw:2px">...</div>

↓

BP-supported property with custom value → class + CSS variable

<Lism fz="20px">contents</Lism>
// → <div class="-fz" style="--fz:20px">contents</div>

↓

BP-unsupported property with custom value → direct style output

<Lism o="0.75">contents</Lism>
// → <div style="opacity:0.75">contents</div>

Force output as a class with `:`

Even if no corresponding Property Class exists, prefixing a value with : will output the string after it as a class name.

<Lism p=":hoge">...</Lism>
// → <div class="-p:hoge">...</div>

Define the class in your CSS and use it wherever needed.

.-p\:hoge {
  /* ... your styles ... */
}

Using className='-p:hoge' also works, but passing it as a CSS Prop via : ensures consistent output ordering.

Responsive syntax

BP-supported properties can specify values per breakpoint (sm, md) using arrays or objects.

↓

Example 1: array syntax (base → sm → md)

<Lism p={['20', '30', '5rem']}>...</Lism>

↓

Example 2: skip intermediate breakpoints (@md only)

<Lism p={[null, null, '40']}>...</Lism>

Whether a value actually changes at a breakpoint depends on whether that property supports responsive behavior. Check the BP (short for breakpoint) column in Property Class to see which properties are supported.

For properties that do not support responsive behavior by default (i.e., no CSS is provided), you can add support via SCSS customization.

`exProps`

Accepts, as an object, any props you want to bypass Lism Props processing for.

This is handy when a prop name of the external component specified via as conflicts with a Lism Prop name, and you want to explicitly mark it as belonging to the external component.

↓

Example

<Icon as={Hoge} exProps={{ size: '1em' }} p="10" fz="l">
  ...
</Icon>

This way, the Lism Icon component processes p and fz, while the external component Hoge reliably receives size. (In this particular example, exProps is not strictly necessary since Lism does not currently process size, but explicitly marking external component props ensures no future conflicts.)

Class output order

The class attribute generated by <Lism> is output in the following order:

[className (including c--)] [a--] [l--] [set--] [is-- / has--] [u--] [-]

#	Prop	Example
1	User-defined class (`className` / `class`)	`c--box`, `z--header`, `hoge`
2	`atomic`	`a--icon`, `a--divider`
3	`layout`	`l--flex`, `l--columns`
4	`set`	`set--var:hov`
5	`isXxxx` / `hasXxxx` (Trait)	`is--wrapper`, `is--layer`, `has--transition`
6	`util`	`u--cbox`, `u--trim`
7	`prop={value}`	`-p:20`, `-bgc:base-2`, `-hov:-c`

The -flow:{size} class produced by layout="flow" is treated as a layout-primitive-specific configuration class, so it is emitted alongside the primitive group right after l--flow.

The c--* class can be placed anywhere inside className, but we recommend writing it at the front for readability.

The order within the class attribute does not affect the CSS cascade (specificity or source order). This ordering is purely for readability and consistency.

Lism Props

as

className

set / util

Multiple values

Excluding with - prefix

layout / atomic

Trait Props

CSS Props

Code examples

Force output as a class with :

Responsive syntax

exProps

Class output order

`as`

`className`

`set` / `util`

Excluding with `-` prefix

`layout` / `atomic`

Force output as a class with `:`

`exProps`