Recipes

ProgressCard

Card with a progress bar whose colour crosses a threshold, plus an optional action row. Values are clamped to 0–100.

rendered by aura-react

Onboarding

70%

7 of 10 steps done

Storage

94%

94 GB of 100 GB used

Code

Demo.tsx

import { Badge, Card, Grid, Progress, Stack, Typography } from '@ilomee/aura-react';

const CARDS = [
  { id: 'onboarding', title: 'Onboarding', note: '7 of 10 steps done', value: 70, tone: 'warning' },
  { id: 'storage', title: 'Storage', note: '94 GB of 100 GB used', value: 94, tone: 'success' },
] as const;

// A Card, a Progress and a Badge. The threshold that picks the tone is the caller's rule, and it
// was the only thing the recipe knew that this does not.
export default function Demo() {
  return (
    <Grid cols={{ base: 1, md: 2 }} gap={4} style={{ width: '100%' }}>
      {CARDS.map((card) => (
        <Card key={card.id}>
          <Stack gap={2}>
            <Stack direction="row" justify="space-between" align="center" gap={3}>
              <Typography variant="h3">{card.title}</Typography>
              <Badge tone={card.tone}>{card.value}%</Badge>
            </Stack>
            <Typography variant="body" tone="muted">
              {card.note}
            </Typography>
            <Progress value={card.value} label={card.title} />
          </Stack>
        </Card>
      ))}
    </Grid>
  );
}

This is an example, not a component — no package ships it, and there is nothing to import. It is built from primitives that each of the four packages does ship, so the same composition works in every stack; copy it into your own component and it is yours to change.

Props

No props: the composition takes what you give the primitives inside it. Their props are on their own pages.

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-card	base	Required. A modifier does nothing without it.