Photonix

List

Lists are continuous, vertical indexes of text or images. Item content is flexible with various leading and trailing extensions.

Preview

Release notesUpdated 2 minutes ago
Sync progress
Storage used
42 GB
Usage
"use client";

import { List, ListItem } from '@photonix/ultimate';
import { DocumentOutline, SettingsOutline } from '@photonix/icons';

export default function ListBasicExample() {
    return (
        <List>
            <ListItem content="Release notes" description="Updated 2 minutes ago" leadingType="icon" leadingIcon={<DocumentOutline />} trailingType="chevron" divider />
            <ListItem content="Sync progress" progress={68} leadingType="icon" leadingIcon={<SettingsOutline />} divider />
            <ListItem content="Storage used" trailingType="text" trailingText="42 GB" />
        </List>
    );
}

Component API

List

Prop
Type
Default
Description
children
React.ReactNode
-
List items
className
string
-
Additional class name
variant
"default" | "outlined" | "elevated"
'default'
Visual variant of the list container - default: transparent, no border - outlined: border and radius - elevated: shadow and background
width
string | number
-
Custom width

ListItem

Prop
Type
Default
Description
content
string
-
Main content text
description
string
-
Description text (body medium, secondary color)
progress
number
-
Progress value (0-100), shows progress bar instead of description
leadingType
"icon" | "avatar" | "image" | "none"
'none'
Leading element type
leadingIcon
React.ReactNode
-
Leading icon element (when leadingType is 'icon')
avatarSrc
string
-
Avatar props (when leadingType is 'avatar')
avatarName
string
-
imageSrc
string
-
Image src (when leadingType is 'image')
trailingType
"text" | "none" | "chevron" | "text-chevron" | "switch" | "checkbox" | "check" | "actions" | "spinner"
'none'
Trailing element type
trailingText
string
-
Trailing text (when trailingType is 'text' or 'text-chevron')
trailingVariant
"body-md" | "body-lg"
'body-md'
Typography variant for trailing text
switchChecked
boolean
-
Switch checked state
onSwitchChange
((checked: boolean) => void)
-
Switch onChange handler
checkboxChecked
boolean
-
Checkbox checked state
checkboxIndeterminate
boolean
-
Checkbox indeterminate state
onCheckboxChange
((checked: boolean) => void)
-
Checkbox onChange handler
isSelected
boolean
-
Check icon visible (for single select)
actionIcons
React.ReactNode[]
[]
Action icons (when trailingType is 'actions')
onActionClick
((index: number) => void)
-
Action icon click handlers
trailing
React.ReactNode
-
Custom trailing content
onClick
(() => void)
-
Click handler for the list item
disabled
boolean
false
Disabled state
divider
boolean
false
Show bottom divider
multiline
boolean
false
Allow description to wrap to multiple lines instead of truncating
className
string
-
Additional class name

Variants

Leading Elements

Visualize your data with icons, avatars, or detailed images.

System Settings
A
Alex SmithMaintainer
Project ThumbnailLast edited 5m ago
Leading Elements
"use client";

import { List, ListItem } from '@photonix/ultimate';
import { StarOutline } from '@photonix/icons';

export default function ListLeadingExample() {
    return (
        <List variant="outlined">
            <ListItem content="System Settings" leadingType="icon" leadingIcon={<StarOutline size={24} />} divider />
            <ListItem content="Alex Smith" description="Maintainer" leadingType="avatar" avatarName="Alex Smith" divider />
            <ListItem content="Project Thumbnail" description="Last edited 5m ago" leadingType="image" imageSrc="https://picsum.photos/80/80?random=1" />
        </List>
    );
}

Trailing Elements

Actions, indicators, and controls for each row.

Profile Settings
Cloud Status
Connected
Auto-SaveSave changes automatically
Trailing Elements
"use client";

import { List, ListItem } from '@photonix/ultimate';

export default function ListTrailingExample() {
    return (
        <List variant="outlined">
            <ListItem content="Profile Settings" trailingType="chevron" divider />
            <ListItem content="Cloud Status" trailingType="text-chevron" trailingText="Connected" divider />
            <ListItem content="Auto-Save" description="Save changes automatically" trailingType="switch" switchChecked />
        </List>
    );
}

Actions & Loading

Inline actions for quick tasks and loading indicators for async states.

Presentation.pdf2.4 MB
Syncing DataPlease wait...
Actions & Loading
"use client";

import { List, ListItem } from '@photonix/ultimate';
import { DocumentOutline, DownloadOutline, DuplicateOutline, TrashOutline } from '@photonix/icons';

export default function ListActionsLoadingExample() {
    return (
        <List variant="outlined">
            <ListItem
                content="Presentation.pdf"
                description="2.4 MB"
                leadingType="icon"
                leadingIcon={<DocumentOutline size={24} />}
                trailingType="actions"
                actionIcons={[<DownloadOutline />, <DuplicateOutline />, <TrashOutline />]}
                divider
            />
            <ListItem content="Syncing Data" description="Please wait..." trailingType="spinner" />
        </List>
    );
}

Progress & Multiline

Show status bars and handle long content gracefully.

Uploading Image
C
Feedback from ClientThe current design looks great, but could we try a slightly darker blue for the primary action button to improve accessibility?
Progress & Multiline
"use client";

import { List, ListItem } from '@photonix/ultimate';

export default function ListProgressMultilineExample() {
    return (
        <List variant="outlined">
            <ListItem content="Uploading Image" progress={65} leadingType="image" imageSrc="https://picsum.photos/80/80?random=2" divider />
            <ListItem
                content="Feedback from Client"
                description="The current design looks great, but could we try a slightly darker blue for the primary action button to improve accessibility?"
                leadingType="avatar"
                avatarName="Client"
                multiline
            />
        </List>
    );
}

Selection Modes

Standard selection controls for single or multiple item management.

Multiple SelectionCheckbox interaction
Single SelectionCheckmark indicator
Selection Modes
"use client";

import { List, ListItem } from '@photonix/ultimate';

export default function ListSelectionExample() {
    return (
        <List variant="outlined">
            <ListItem content="Multiple Selection" description="Checkbox interaction" trailingType="checkbox" checkboxChecked={false} divider />
            <ListItem content="Single Selection" description="Checkmark indicator" trailingType="check" isSelected />
        </List>
    );
}

List Containers

Three visual variants to match different UI contexts.

DEFAULT (TRANSPARENT)

Item 1
Item 2

ELEVATED (WITH SHADOW)

Item 1
Item 2
List Containers
"use client";

import { Box, List, ListItem, Stack, Text } from '@photonix/ultimate';

export default function ListContainersExample() {
    return (
        <Stack gap="xl">
            <Box>
                <Text variant="label-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>DEFAULT (TRANSPARENT)</Text>
                <List variant="default">
                    <ListItem content="Item 1" trailingType="chevron" divider />
                    <ListItem content="Item 2" trailingType="chevron" />
                </List>
            </Box>
            <Box>
                <Text variant="label-sm" color="secondary" style={{ marginBottom: '8px', display: 'block' }}>ELEVATED (WITH SHADOW)</Text>
                <List variant="elevated">
                    <ListItem content="Item 1" trailingType="chevron" divider />
                    <ListItem content="Item 2" trailingType="chevron" />
                </List>
            </Box>
        </Stack>
    );
}

On this page

Preview
Component API
Variants
Leading Elements
Trailing Elements
Actions & Loading
Progress & Multiline
Selection Modes
List Containers
Photonix UI - React Components, Templates & Figma Design System