# List

> A styled ordered or unordered list for grouped item content — not for layout rows.

URL: https://apogee.avaui.dev/docs/list
Last updated: 2026-10-15

A styled ordered or unordered list for grouped item content — not for layout rows.

Last updated October 15, 2026

```astro
<List>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</List>
```

## Add

```sh
npx @ava-ui/apogee add list
```

No Apogee dependencies.

## Usage

```astro
---
import List from '@/components/apogee/List/List.astro'
---
<List>
  <li>First item</li>
  <li>Second item</li>
</List>
```

## API

`@composable` — exposed to Content Editors in AVA. Any other native `<ul>` / `<ol>` attribute passes through (`...rest`).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `as` | `'ul' \| 'ol'` | `'ul'` | Element tag — unordered or ordered list. |
| `marker` | `'default' \| 'none'` | `'default'` | `none` drops the marker and its start indent. |
| `class` | `string` | — | Extra classes, merged last. |

## Variants

`as` × `marker`, every combination:

```astro
<List as="ul">
<li>Unordered</li>
<li>Bulleted</li>
</List>
<List as="ol">
<li>Ordered</li>
<li>Numbered</li>
</List>
<List as="ul" marker="none">
<li>Unordered, no marker</li>
<li>Flush to the edge</li>
</List>
<List as="ol" marker="none">
<li>Ordered, no marker</li>
<li>Flush to the edge</li>
</List>
```

## States

No interactive states — List renders static markup.

## Examples

Nested list, and a list of longer content:

```astro
<List as="ol">
<li>
  Set up the project
  <List marker="none" class="mt-1 ms-4">
    <li>Install dependencies</li>
    <li>Copy the env file</li>
  </List>
</li>
<li>Ship it</li>
</List>
```

## Accessibility

Native semantics, no extra ARIA needed. `<ul>` / `<ol>` with real `<li>` children already gives assistive tech the list role, item count, and position.

## Tokens

| Token | Used for |
| --- | --- |
| `--foreground-neutral-faded` | Marker (bullet / number) colour |

## Do / Don’t

-   **Do** use List for a set of related items where a marker or order carries meaning.
-   **Do** pass `marker="none"` when nesting a List inside a layout that supplies its own bullets or icons.
-   **Don’t** use List for layout rows or navigation — use `Stack` or `Navbar`.
-   **Don’t** put non-`<li>` children directly in the slot — the marker and indent styling target `<li>`.

## Content

-   Keep items short — sentence case, no ending period unless the item is a full sentence.
-   Keep phrasing parallel across items (all start with the same part of speech).

## Related

[

TableA styled, horizontally-scrollable table. Write plain thead/tbody markup — Table only styles it.

](https://apogee.avaui.dev/docs/table)[

DataGridA data table with client-side column sorting and optional row selection.

](https://apogee.avaui.dev/docs/data-grid)[

ProseTypography styling for a block of rich, CMS, or markdown HTML you don't control element by element.

](https://apogee.avaui.dev/docs/prose)