List | fromsrc

Enhanced list formatting options.

Checklist

Task list with check/x icons:

mdx

<CheckList>
  <CheckItem checked>completed task</CheckItem>
  <CheckItem checked>another done</CheckItem>
  <CheckItem checked={false}>not done yet</CheckItem>
</CheckList>

completed task
another done
not done yet

Bullet list

Simple bullets:

mdx

<BulletList>
  <BulletItem>first item</BulletItem>
  <BulletItem>second item</BulletItem>
  <BulletItem>third item</BulletItem>
</BulletList>

first item
second item
third item

Number list

Numbered items with styled badges:

mdx

<NumberList>
  <NumberItem number={1}>first step</NumberItem>
  <NumberItem number={2}>second step</NumberItem>
  <NumberItem number={3}>third step</NumberItem>
</NumberList>

first step
second step
third step

Props

Checkitem

prop	type	default	description
checked	boolean	true	Show check or x
children	ReactNode	-	Item content

Numberitem

prop	type	default	description
number	number	-	Item number
children	ReactNode	-	Item content

Enhanced list formatting options.

Checklist

Task list with check/x icons:

mdx

<CheckList>
  <CheckItem checked>completed task</CheckItem>
  <CheckItem checked>another done</CheckItem>
  <CheckItem checked={false}>not done yet</CheckItem>
</CheckList>

completed task
another done
not done yet

Bullet list

Simple bullets:

mdx

<BulletList>
  <BulletItem>first item</BulletItem>
  <BulletItem>second item</BulletItem>
  <BulletItem>third item</BulletItem>
</BulletList>

first item
second item
third item

Number list

Numbered items with styled badges:

mdx

<NumberList>
  <NumberItem number={1}>first step</NumberItem>
  <NumberItem number={2}>second step</NumberItem>
  <NumberItem number={3}>third step</NumberItem>
</NumberList>

first step
second step
third step

Props

Checkitem

prop	type	default	description
checked	boolean	true	Show check or x
children	ReactNode	-	Item content

Numberitem

prop	type	default	description
number	number	-	Item number
children	ReactNode	-	Item content