Fluxo UIFluxo UIv0.4.1

Shimmer

Skeleton loading placeholders that communicate progress to users while content loads. Use them to replace real content during async operations.

ShimmerDiv — Basic Block

Flexible shimmer block

The base building block for custom skeleton layouts.

import { ShimmerDiv } from 'fluxo-ui';

<ShimmerDiv height={20} width="60%" borderRadius={4} />
<ShimmerDiv height={14} width="90%" borderRadius={4} />
<ShimmerDiv height={14} width="75%" borderRadius={4} />

Profile / Card Skeleton

Custom card layout

Combine ShimmerDiv blocks to create any skeleton layout.

<div className="flex gap-4">
  <ShimmerDiv width={56} height={56} borderRadius="50%" />
  <div className="flex-1 space-y-2">
    <ShimmerDiv height={16} width="50%" borderRadius={4} />
    <ShimmerDiv height={12} width="80%" borderRadius={4} />
  </div>
</div>

ShimmerFeed

Feed / list skeleton

Pre-built skeleton for card feeds and list views with avatar and content lines.

import { ShimmerFeed } from 'fluxo-ui';

{isLoading && <ShimmerFeed />}
{!isLoading && <FeedList items={items} />}

ShimmerTable

Table skeleton

Skeleton for data tables with configurable rows and columns.

import { ShimmerTable } from 'fluxo-ui';

{isLoading && <ShimmerTable rows={5} columns={6} showHeader />}
{!isLoading && <DataTable rows={data} columns={columns} />}

ShimmerBarChart

Bar chart skeleton

Skeleton for bar chart visualizations while data loads.

import { ShimmerBarChart } from 'fluxo-ui';

{isLoading && <ShimmerBarChart bars={7} showXAxis showYAxis />}
{!isLoading && <BarChart data={chartData} />}

ShimmerPieChart

Pie chart skeleton

Skeleton for pie chart visualizations with optional legends.

import { ShimmerPieChart } from 'fluxo-ui';

{isLoading && <ShimmerPieChart legendsCount={4} legendPosition="right" />}
{!isLoading && <PieChart data={chartData} />}

Donut chart skeleton

Donut (doughnut) variant with center hole.

<ShimmerPieChart doughnut legendsCount={3} legendPosition="bottom" />

API Reference

ShimmerDiv

width
string | number

Width of the shimmer block. Accepts CSS values (e.g. "100%", 200) or a number treated as pixels.

height
string | number

Height of the shimmer block.

borderRadius
string | number

Border radius of the shimmer block. Useful for circle avatars or pill shapes.

level
1 | 2 | 3 | 4 | 5 | 6"2"

Background contrast level. Higher levels are darker.

animation
'shimmer' | 'pulse'"'shimmer'"

Animation style: a sweeping highlight ('shimmer') or a soft fade ('pulse').

loadingLabel
string

Visually-hidden text announced by screen readers (e.g., 'Loading content').

repeat
number

When set, render N stacked copies (typical for list shimmers). Adds a flex-column wrapper with a configurable gap.

gap
string | number"'0.5rem'"

Spacing between repeated shimmers (when `repeat` is set).

className
string

Additional CSS classes applied to the root element.

ShimmerTable

rows
number"5"

Number of skeleton rows to render.

columns
number"4"

Number of skeleton columns to render.

showHeader
boolean"true"

Whether to show the skeleton header row.

ShimmerBarChart

bars
number"6"

Number of bars to display in the skeleton chart.

showXAxis
boolean"true"

Whether to render placeholder labels below the bars.

showYAxis
boolean"true"

Whether to render placeholder labels to the left of the chart.

Features

ShimmerDiv

Base building block for any custom skeleton layout with full size and radius control

ShimmerFeed

Pre-built skeleton for card feeds and list views with configurable structure

ShimmerTable

Skeleton for data tables with configurable rows, columns, and header visibility

ShimmerBarChart

Skeleton for bar chart visualizations with configurable bar count and axis labels

Animated

Smooth shimmer animation communicates loading state clearly to users

Theming

Full dark/light + 5 brand themes via CSS variables — zero extra config

Accessibility

Skeleton elements use ARIA roles to convey loading state to screen readers