List

Bullet points and numbered lists organize content in a hierarchical fashion, highlighting key elements efficiently.

  • Modern
  • Customizable
  • Responsive
  • Accessible

Installation

Copy-Paste the component code in a .tsx file.

import React from "react"
import {
    list,
    type ListProps as ListVariants,
    type TextWeightProp
} from "@tailus/themer"

type ListSize = ListVariants["size"]
type ListInside = ListVariants["inside"]
type ListSizeProp = ListSize |  {
    initial?: ListSize,
    sm?: ListSize,
    md?: ListSize,
    lg?: ListSize,
    xl?: ListSize,
    xxl?: ListSize,
}
type ListInsideProp = ListInside |  {
    initial?: ListInside,
    sm?: ListInside,
    md?: ListInside,
    lg?: ListInside,
    xl?: ListInside,
    xxl?: ListInside,
}

export interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
    as?: "ul" | "ol",
    children: React.ReactNode,
    className?: string,
    size?: ListSizeProp;
    weight?: TextWeightProp;
    neutral?: boolean;
    inside?: ListInsideProp;
    type?: ListVariants["type"]
}

export const List: React.FC<ListProps> = ({
    size,
    as="ul",
    weight,
    neutral,
    inside,
    type,
    children,
    className,
    ...props
}) => {

    as = as || type === "disc" ? "ul" : "ol"
    const ListElement = as

    if (as === "ul" && type === "decimal") {
        console.warn('Warning: You have set "as" to "ul" and "type" to "decimal". This can cause accessibility issues.');
    } else if (as === "ol" && type === "disc") {
        console.warn('Warning: You have set "as" to "ol" and "type" to "disc". This can cause accessibility issues.');
    }

    return (
        <ListElement className={list({
            size,
            inside,
            type,
            neutral,
            weight,
            className
        })} {...props}>
            {children}
        </ListElement>
    )
}

List.displayName = "List"

Usage

Import the <List/> and start building.

import { List } from "@tailus-ui/typography";
const MyList = () => (
    <List>
        <li>Modern</li>
        <li>Customizable</li>
        <li>Responsive</li>
        <li>Accessible</li>
    </List>
)

Reference

The List component has the following props

Prop
Type
Default
as
enum
ul
type
enum
size ~
enum
base
inside ~
boolean
neutral
boolean
weight ~
enum
className
string
children
ReactNode

Examples

Ordered List

  • Modern
  • Customizable
  • Responsive
  • Accessible
 
const MyList = () => (
    <List as="ol" type="decimal">
        <li>Modern</li>
        <li>Customizable</li>
        <li>Responsive</li>
        <li>Accessible</li>
    </List>
)