ListStyle

Use <ListStyle> to style Markdown, HTML, or JSX lists inside a wrapper.

Playground

Styled lists

Try marker styles for nested lists before using them in a deck.

Open with a clear story
Show the workflow
- MDX source
- Presenter view
Export and share

<ListStyle bullets={[<CheckIcon />, <CircleIcon />]}>
  <ul>...</ul>
</ListStyle>

By default it removes native markers:

import { ListStyle } from '@honeydeck/honeydeck'

<ListStyle>
  - No marker
  - Still aligned
</ListStyle>

Pass bullets to render custom markers:

import { ListStyle } from '@honeydeck/honeydeck'
import { CheckIcon, CircleIcon } from 'lucide-react'

<ListStyle bullets={[<CheckIcon />, <CircleIcon />]}>
  - Level one uses a check icon
    - Level two uses a circle icon
</ListStyle>

<ListStyle bullets={["→", "–", "·"]}>
  - Level one
    - Level two
      - Level three
</ListStyle>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	List content to style.
`bullets`	`ReactNode \| ReactNode[] \| false \| "none" \| null`	`undefined`	Marker config. Omit it, pass `false`, `"none"`, or `null` for markerless lists.
`className`	`string`	—	Custom class for the wrapper.
`style`	`CSSProperties`	—	Inline style for the wrapper.

Behavior

Native list markers are removed for all nested lists in the wrapper.
A single bullets value is reused for every nesting level.
An array uses one marker per nesting level.
Deeper levels reuse the last configured marker.
Custom markers apply to authored list elements passed as children.

ListStyle

ListStyle

Styled lists

Props

Behavior

On this page