List

A pure CSS grouped-list container — no JS behavior. Renders a <ul role="list">; compose rows inside with ListItem/ListText. ListItem wraps only .list-item (the <li>) — the row itself (.list-row, icon/avatar, trailing value/chevron) is hand-written markup, since a <div>/<button>/<a> row needs that element’s own native semantics.

Usage

import { List, ListItem, ListText } from '@mav-labs-inc/mavkit-react'
 
<List aria-label="General settings">
  <ListItem>
    <div className="list-row">
      <div className="list-body"><ListText>Wi-Fi</ListText></div>
      <span className="list-value">Scope Office</span>
    </div>
  </ListItem>
</List>

Examples

Basic

Set hasIcon/hasAvatar on List to match whichever leading slot the rows use — it sizes the separator inset.

Multiline rows

Props

List

Renders a <ul role="list"> and accepts every native <ul> attribute in addition to the props below.

ListItem

Also accepts every native <li> attribute.

ListText

Also accepts every native <span> attribute.

Styling a custom element as a list

import { listClasses } from '@mav-labs-inc/mavkit-react'
 
<ol className={listClasses({ hasIcon: true })}>…</ol>