List

Renders an ordered (<ol>) or unordered (<ul>) list. Each item is a ListItem (also available as List.Item). Custom icons can replace the default bullet markers.

Unordered (default)

  • File-based routing
  • Reactive signals
  • SSR-first rendering
  • TypeScript support
<List>
  <List.Item>File-based routing</List.Item>
  <List.Item>Reactive signals</List.Item>
  <List.Item>SSR-first rendering</List.Item>
</List>

Ordered

  1. Install Davaux
  2. Create your first route
  3. Run the dev server
  4. Ship to production
<List type="ordered">
  <List.Item>Install Davaux</List.Item>
  <List.Item>Create your first route</List.Item>
  <List.Item>Run the dev server</List.Item>
</List>

With custom icons

  • ✅Task completed
  • ⏳Task in progress
  • ❌Task failed
<List>
  <List.Item icon="✅">Task completed</List.Item>
  <List.Item icon="⏳">Task in progress</List.Item>
  <List.Item icon="❌">Task failed</List.Item>
</List>

Spacing and size

  • Small items with spacing
  • More readable at small size
  • Good for dense UIs
  • Large items with padding
  • More whitespace between items
  • Good for content-heavy pages
<List spacing="sm" size="sm">
  <List.Item>Small items with spacing</List.Item>
</List>
<List spacing="lg" size="lg" withPadding>
  <List.Item>Large items with padding</List.Item>
</List>

List Props

PropTypeDefaultDescription
type'ordered'|'unordered''unordered'Renders as <ol> or <ul>
size'xs'|'sm'|'md'|'lg'|'xl'|number|string—Font size of list items
spacing'xs'|'sm'|'md'|'lg'|'xl'|string—Vertical gap between list items
withPaddingboolean—Adds left padding to align with surrounding content
centerboolean—Vertically centers custom icons with item text
listStyleTypestring—CSS list-style-type override
classstring—Additional CSS class names
styleobject—Inline styles

ListItem Props

PropTypeDefaultDescription
iconReactNode—Custom icon replacing the default bullet marker
classstring—Additional CSS class names on the <li>
styleobject—Inline styles on the <li>
childrenReactNode—Item content