Flux

Item stack ​

The item stack renders a vertical list of Items with no gap between them, creating a cohesive grouped list appearance.

StatusActive
CreatedJanuary 1, 2025
UpdatedMarch 7, 2026

Slots

default
The items to stack vertically.

Examples ​

Rich list

A stack of items with media, content and actions forms a cohesive list.

Report.pdf2.4 MB · PDF document
Photos128 items · Folder
Backup.zip512 MB · Archive

<template>
    <FluxPane style="width: min(100%, 480px)">
        <FluxItemStack>
            <FluxItem
                v-for="file in files"
                :key="file.name">
                <FluxItemMedia
                    is-center
                    :size="40">
                    <FluxBoxedIcon
                        :color="file.color"
                        :name="file.icon"
                        :size="40"/>
                </FluxItemMedia>

                <FluxItemContent is-center>
                    <strong>{{ file.name }}</strong>
                    <span style="font-size: .875rem; opacity: .6">{{ file.meta }}</span>
                </FluxItemContent>

                <FluxItemActions is-center>
                    <FluxAction
                        icon="ellipsis-v"
                        aria-label="More actions"/>
                </FluxItemActions>
            </FluxItem>
        </FluxItemStack>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import type { FluxColor, FluxIconName } from '@flux-ui/types';
    import { FluxAction, FluxBoxedIcon, FluxItem, FluxItemActions, FluxItemContent, FluxItemMedia, FluxItemStack, FluxPane } from '@flux-ui/components';

    const files: { name: string; meta: string; icon: FluxIconName; color: FluxColor }[] = [
        {name: 'Report.pdf', meta: '2.4 MB · PDF document', icon: 'file-lines', color: 'danger'},
        {name: 'Photos', meta: '128 items · Folder', icon: 'folder', color: 'primary'},
        {name: 'Backup.zip', meta: '512 MB · Archive', icon: 'database', color: 'info'}
    ];
</script>

Snippet ​

vue
<template>
    <Preview>
        <FluxPane style="width: min(100%, 420px)">
            <FluxItemStack>
                <FluxItem
                    v-for="item in items"
                    :key="item.label">
                    <FluxItemContent is-center>
                        <strong>{{ item.label }}</strong>
                        <span style="font-size: .875rem; opacity: .6">{{ item.value }}</span>
                    </FluxItemContent>
                </FluxItem>
            </FluxItemStack>
        </FluxPane>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxItem, FluxItemContent, FluxItemStack, FluxPane } from '@flux-ui/components';

    const items = [
        {label: 'Status', value: 'Active'},
        {label: 'Created', value: 'January 1, 2025'},
        {label: 'Updated', value: 'March 7, 2026'}
    ];
</script>

Used components ​