Lists

Lists are plain <ul> and <ol> elements; there is no List component. The reset in @arun-dev/ui/components.css styles them in two ways.

Markup	Use it for	Markers and indent
<ul>	Items in running text, in no particular order	Bullets, indented by --space-lg
<ol>	Steps or a ranking, in order	Numbers, indented by --space-lg
<ul role="list">	A list used as layout: a nav, a row of tags, cards in a grid	None, and no indent — style it yourself

• Bullets for items in no particular order
• Nested lists indent again
  • and change their marker

1. Numbers for steps that go in order
2. Each item counts up from the last

• React
• CSS
• Accessibility

import { Chip, Stack } from '@arun-dev/ui';

export default function ListsBasics() {
  return (
    <Stack gap="md">
      {/* In running text: bullets and numbers are part of the content, so the reset keeps them. */}
      <ul>
        <li>Bullets for items in no particular order</li>
        <li>
          Nested lists indent again
          <ul>
            <li>and change their marker</li>
          </ul>
        </li>
      </ul>
      <ol>
        <li>Numbers for steps that go in order</li>
        <li>Each item counts up from the last</li>
      </ol>

      {/* As layout: role="list" drops the markers and the indent, and keeps the list announced
          as a list in Safari. */}
      <ul role="list" aria-label="Tags" style={{ display: 'flex', gap: 'var(--space-2xs)' }}>
        <Chip render={<li />}>React</Chip>
        <Chip render={<li />}>CSS</Chip>
        <Chip render={<li />}>Accessibility</Chip>
      </ul>
    </Stack>
  );
}

Playground

• Design
• Engineering
• Product

<ul>
  <li>Design</li>
  <li>Engineering</li>
  <li>Product</li>
</ul>

Lists as layout

A nav, a row of tags or a set of cards is still a list, because people using a screen reader hear how many items there are. It just isn’t drawn as one. Add role="list": the reset drops its markers and indent, and VoiceOver in Safari, which can stop announcing a list styled with list-style: none, keeps announcing it as a list.

A Stack or a Grid rendered as a list drops the markers itself. Give it role="list" too, for Safari:

<Stack direction="row" gap="2xs" wrap render={<ul role="list" aria-label="Tags" />}>
  <Chip render={<li />}>React</Chip>
  <Chip render={<li />}>CSS</Chip>
</Stack>

Breadcrumb and Pagination render their own lists and need nothing.

Notes

• The space between list items is the browser’s. For more, put the items’ content in a Stack, or set a gap on the list.
• Before @arun-dev/ui 5.0.0, the reset removed the markers from every list. When upgrading, add role="list" to the lists used as layout.