Edit page


The List aligns content into an organized list.

Basic Usage

To implement the List component, you need to import it first:

import { List, ListItem } from '@react-ui-org/react-ui';

And use it:

See API for all available options.

General Guidelines

  • Wrap your items into the ListItem component. This ensures your content is properly spaced and aligned with other List elements. Do not try to put any custom HTML or React components directly into the List layout without wrapping it with the ListItem first.

  • For forms, use rather the FormLayout component which is designed specifically for that purpose.

List Alignment

You can simply set the list alignment by specifying the align option.

👉 At the current stage of development, React UI is RTL aware so switching to a fully RTL-compatible behavior in the future should be painless. That's why the alignment values are called rather start than left and end instead of right.

Auto Width

For cases when you prefer the list items to keep their original width and don't want them to expand over the full width of the parent of the list, there is the autoWidth option. It shrinks the list according to its longest item. However, the root div always behaves as a full-width block element (unless you put it inside a flex or grid layout).


Prop nameTypeDefaultRequiredDescription
align'start' │ 'end''start'false

Horizontal alignment of list items.


If true, the list items will take up only as much horizontal space as necessary.


Individual ListItems.

ListItem API

A wrapper for individual list items.

Prop nameTypeDefaultRequiredDescription

Content of the list item.


Custom PropertyDescription
--rui-List__row-gapGap between list items