List - rafty/ui Docs

List is used to display list items. It renders a <ul> element by default.

This is made using native ol, ul & li html tags, making all native props available for use.

Anatomy

Import all parts and piece them together.

import { List, ListItem, OrderedList, UnorderedList } from "@rafty/ui";

<List>
  <ListItem />
</List>
<OrderedList>
  <ListItem />
</OrderedList>
<UnorderedList>
  <ListItem />
</UnorderedList>

Usage

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet

<List>
  <ListItem>
    Lorem ipsum dolor sit amet
  </ListItem>
  <ListItem>
    Consectetur adipiscing elit
  </ListItem>
  <ListItem>
    Integer molestie lorem at massa
  </ListItem>
  <ListItem>
    Facilisis in pretium nisl aliquet
  </ListItem>
</List>

Ordered List

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet

<OrderedList>
  <ListItem>
    Lorem ipsum dolor sit amet
  </ListItem>
  <ListItem>
    Consectetur adipiscing elit
  </ListItem>
  <ListItem>
    Integer molestie lorem at massa
  </ListItem>
  <ListItem>
    Facilisis in pretium nisl aliquet
  </ListItem>
</OrderedList>

UnOrdered List

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet

<UnorderedList>
  <ListItem>
    Lorem ipsum dolor sit amet
  </ListItem>
  <ListItem>
    Consectetur adipiscing elit
  </ListItem>
  <ListItem>
    Integer molestie lorem at massa
  </ListItem>
  <ListItem>
    Facilisis in pretium nisl aliquet
  </ListItem>
</UnorderedList>

Unstyled

Pass isUnstyled to remove style in list.

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Assumenda, quia temporibus eveniet a libero incidunt suscipit
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
Quidem, ipsam illum quis sed voluptatum quae eum fugit earum

<List>
  <ListItem
    className="flex items-center gap-2 text-xl font-bold "
    isUnstyled
  >
    <CheckCircleIcon
      className="stroke-2"
      height={16}
      width={16}
    />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </ListItem>
  <ListItem className="flex items-center gap-2">
    <CheckCircleIcon
      className="stroke-2"
      height={16}
      width={16}
    />
    Assumenda, quia temporibus eveniet a libero incidunt suscipit
  </ListItem>
  <ListItem className="flex items-center gap-2">
    <CheckCircleIcon
      className="stroke-2"
      height={16}
      width={16}
    />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
  <ListItem className="flex items-center gap-2">
    <CheckCircleIcon
      className="stroke-2"
      height={16}
      width={16}
    />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
</List>