Content blocks

Bulleted & numbered list

Bulleted and numbered list items. Markers change with nesting depth: • ◦ ▪ for bullets, 1. a. i. for numbers, cycling every three levels.

•
First item
•
Second item
1.
Step one
2.
Step two

Usage

  • Use bulleted lists for items without an order, numbered lists for steps or rankings.
  • Nest items for sub-points; markers change per depth automatically (• ◦ ▪, 1. a. i.).
  • Pass index to numbered items when you render them yourself; BlockRenderer numbers runs for you.
  • Don’t use a list for actionable items; use To-do instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/BulletednumberedlistExample.tsx
import { BlockContent, BulletedListItem, NumberedListItem, rt } from '@krackedui/motion';

export function BulletedNumberedListExample() {
  return (
    <BlockContent>
      <BulletedListItem text={rt('First item')} spacing={{ bottom: false }} />
      <BulletedListItem text={rt('Second item')} spacing={{ top: false }} />
      <NumberedListItem index={1} text={rt('Step one')} spacing={{ bottom: false }} />
      <NumberedListItem index={2} text={rt('Step two')} spacing={{ top: false }} />
    </BlockContent>
  );
}

Examples

Nesting markers

Pass depth for the marker style; nested items go in children with spacing={{ nested: true }}.

•
Depth 0
◦
Depth 1
▪
Depth 2
1.
Depth 0
a.
Depth 1
i.
Depth 2
ii.
Depth 2, second

From a block tree

BlockRenderer computes depth, index and spacing for you.

1.
Plan
a.
Draft
b.
Review
2.
Build
3.
Ship

API Reference

BulletedListItem

Based on <div> and supports its props. Adds:

PropTypeDefault
text
RichText
renderLeaf
LeafRenderer
depth
number
0
spacing
{ top?: boolean; bottom?: boolean; nested?: boolean }
color
BlockColor
"default"
children
ReactNode

NumberedListItem

Based on <div> and supports its props. Adds:

PropTypeDefault
text
RichText
renderLeaf
LeafRenderer
index
number
1
depth
number
0
spacing
{ top?: boolean; bottom?: boolean; nested?: boolean }
color
BlockColor
"default"
children
ReactNode

bulletFor / numberFor

Marker helpers: bulletFor(depth) and numberFor(index, depth).

PropTypeDefault
depth
number
index
number

Accessibility

  • Markers are decorative (contentEditable={false}, in a separate box); the list semantics are visual. Use role="list" / role="listitem" via props if you need them announced.
© 2026 Motion. Internal documentation.