List

List keeps native list semantics while giving product surfaces consistent spacing, density, and marker tone.

#Default usage

<List>
  <ListItem>Install package</ListItem>
  <ListItem>Import CSS</ListItem>
  <ListItem>Use components</ListItem>
</List>

#Import

import { List, ListItem } from "@froggdesign/enter-ui-react";

#Variants

#Size

#Tone

#Patterns

#Accessibility

List renders native ul or ol elements, and ListItem renders li. Custom markers are visual pseudo-elements on list items, so screen readers still receive normal list semantics. Keep item text descriptive instead of relying only on marker shape or color.

#API

• variant: unordered or ordered.
• size: sm, md, or lg.
• density: compact, normal, or spacious.
• marker: default, check, dot, dash, or none.
• tone: default, muted, success, warning, error, or info.
• List extends native ul or ol props and supports className.
• ListItem extends native li props and supports className.

#Styling

List uses .eui-list and .eui-list__item with data attributes for variant, size, density, marker, and tone. Custom marker styles are intentionally small and token-driven so lists stay readable in light and dark mode.