List

Lists are continuous, vertical indices of text or images.

import {QList, QListItem} from "@qui/react"

Examples

Showcase

Use the label, description, and secondaryText properties to customize each item. Should you need more control over the rendered content, you can provide a ReactNode instead of a string.

LabelDescription

Seconday Text

LabelDescription

Seconday Text

LabelDescription

Seconday Text

import {ReactNode} from "react"

import {QList, QListItem} from "@qui/react"

export default function Showcase(): ReactNode {
  return (
    <div className="grid justify-center gap-4">
      <QList>
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
        />
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
        />
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
        />
      </QList>
    </div>
  )
}

Icons

Icons are available via the startIcon and endIcon properties.

Start IconDescription

Secondary Text

End IconDescription

Secondary Text

Both IconsDescription

Secondary Text

import {ReactNode} from "react"

import {Box, ChevronRight} from "lucide-react"

import {QList, QListItem} from "@qui/react"

export default function Icons(): ReactNode {
  return (
    <div className="grid justify-center gap-4">
      <QList>
        <QListItem
          description="Description"
          label="Start Icon"
          secondaryText="Secondary Text"
          startIcon={Box}
        />
        <QListItem
          description="Description"
          endIcon={ChevronRight}
          label="End Icon"
          secondaryText="Secondary Text"
        />
        <QListItem
          description="Description"
          endIcon={ChevronRight}
          label="Both Icons"
          secondaryText="Secondary Text"
          startIcon={Box}
        />
      </QList>
    </div>
  )
}

Sizes

Use the size property to adjust the padding and font size of text elements.

LabelDescription

Seconday Text

LabelDescription

Seconday Text

LabelDescription

Seconday Text

LabelDescription

Seconday Text

LabelDescription

Seconday Text

LabelDescription

Seconday Text

LabelDescription

Seconday Text

LabelDescription

Seconday Text

LabelDescription

Seconday Text

import {ReactNode} from "react"

import {Box} from "lucide-react"

import {QList, QListItem} from "@qui/react"

export default function Sizes(): ReactNode {
  return (
    <div className="grid justify-center gap-4">
      <QList size="s">
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
      </QList>
      <QList size="m">
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
      </QList>
      <QList size="l">
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
        <QListItem
          description="Description"
          label="Label"
          secondaryText="Seconday Text"
          startIcon={Box}
        />
      </QList>
    </div>
  )
}

Content Customization

Should you need to render dynamic content, supply ReactNode to the startContent and endContent properties.

Label

Seconday Text

LabelDescription

Badge

LabelDescription

Secondary Text

import {ReactNode} from "react"

import {QAvatar, QBadge, QList, QListItem} from "@qui/react"

export default function Sizes(): ReactNode {
  return (
    <div className="grid justify-center gap-4">
      <QList>
        <QListItem
          label="Label"
          secondaryText="Seconday Text"
          startContent={<QAvatar color="brand" content="QC" />}
        />
        <QListItem
          description="Description"
          endContent={
            <div className="flex items-center">
              <QBadge color="informative">Badge</QBadge>
            </div>
          }
          label="Label"
        />
        <QListItem
          description="Description"
          disabled
          label="Label"
          secondaryText="Secondary Text"
        />
      </QList>
    </div>
  )
}

API – List Item

Input

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
description Optional description text shown below the label.	ReactNode
disabled If true, the item is disabled.	boolean	false
endContent Optional template content, placed at the right end of the list item.	ReactNode
endIcon lucide-react icon, positioned at the far end of the list item.	\| LucideIcon \| ReactNode
hideSeparator If true, the bottom separator is hidden.	boolean
id HTML id attribute, applied to the root element.	string
label Label text – the list item's primary message.	ReactNode
role HTML role attribute applied to the root element.	string	'listitem'
secondaryText Label rendered at the far end of the list item, opposite of the label and description.	ReactNode
size The size of the list item and its contents. This value overrides the list size if defined	\| 's' \| 'm' \| 'l'
startContent Optional template content, placed at the start of the list item.	ReactNode
startIcon lucide-react icon, positioned before the label.	\| LucideIcon \| ReactNode
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

description

Type

ReactNode

Description

Optional description text shown below the label.

disabled

Type

boolean

Default

false

Description

If true, the item is disabled.

endContent

Type

ReactNode

Description

Optional template content, placed at the right end of the list item.

endIcon

Type

| LucideIcon
| ReactNode

Description

lucide-react icon, positioned at the far end of the list item.

hideSeparator

Type

boolean

Description

If true, the bottom separator is hidden.

Type

string

Description

HTML id attribute, applied to the root element.

label

Type

ReactNode

Description

Label text – the list item's primary message.

role

Type

string

Default

'listitem'

Description

HTML role attribute applied to the root element.

secondaryText

Type

ReactNode

Description

Label rendered at the far end of the list item, opposite of the label and description.

size

Type

| 's'
| 'm'
| 'l'

Description

The size of the list item and its contents. This value overrides the list size if defined

startContent

Type

ReactNode

Description

Optional template content, placed at the start of the list item.

startIcon

Type

| LucideIcon
| ReactNode

Description

lucide-react icon, positioned before the label.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

API – List

Input

Name & Description	Option(s)	Default
as The component used for the root node. It can be a React component or element.	\| ElementType \| ComponentType	'div'
className The className property of the Element interface gets and sets the value of the class attribute of the specified element.	string
role HTML role attribute applied to the root element.	string	'list'
size Applies a default size to each list item in this list. Note that each list item's size, if configured, will override this value.	\| 's' \| 'm' \| 'l'	'm'
style The style global attribute contains CSS styling declarations to be applied to the element.	CSSProperties

Type

| ElementType
| ComponentType

Default

'div'

Description

The component used for the root node. It can be a React component or element.

className

Type

string

Description

The className property of the Element interface gets and sets the value of the class attribute of the specified element.

role

Type

string

Default

'list'

Description

HTML role attribute applied to the root element.

size

Type

| 's'
| 'm'
| 'l'

Default

'm'

Description

Applies a default size to each list item in this list. Note that each list item's size, if configured, will override this value.

style

Type

CSSProperties

Description

The style global attribute contains CSS styling declarations to be applied to the element.

Link