Layout

Flex

Flex container, horizontal by default. Same knobs as Stack, but direction accepts every CSS flex-direction.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Billing

Code

index.html

<div class="aura-card" style="width:100%;">
  <div class="aura-flex" style="--aura-dir:row;--aura-gap:var(--space-4);--aura-align:center;--aura-justify:space-between;">
    <h3 class="aura-text aura-text--h3" style="">Billing</h3>
    <button type="button" class="aura-btn aura-btn--primary">Upgrade</button>
  </div>
</div>

Demo.tsx

import { Button, Card, Flex, Typography } from '@ilomee/aura-react';

export default function Demo() {
  return (
    <Card style={{ width: '100%' }}>
      <Flex justify="space-between" align="center">
        <Typography variant="h3">Billing</Typography>
        <Button variant="primary">Upgrade</Button>
      </Flex>
    </Card>
  );
}

Demo.vue

<script setup lang="ts">
import { Flex } from '@ilomee/aura-vue';
</script>

<template>
  <Flex justify="space-between" align="center">
    <span>Title</span>
    <button>Action</button>
  </Flex>
</template>

Demo.svelte

<script lang="ts">
  import { Flex } from '@ilomee/aura-svelte';
</script>

<Flex justify="space-between" align="center">
  <span>Title</span>
  <button>Action</button>
</Flex>

Used as [auraFlex] — a directive you put on your own element.

demo.component.ts

import { AuraFlex } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraFlex],
  template: `
    <div auraFlex justify="space-between" align="center">
      <span>Title</span>
      <button>Action</button>
    </div>
  `,
})
export class DemoComponent {}

A directive — you choose the element, so there is no as input.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
as	`ElementType`	`'div'`	Rendered element.
direction	`CSSProperties['flexDirection']`	`'row'`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—
justify	`string`	—
wrap	`boolean`	`false`

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
direction	`CSSProperties['flexDirection']`	`'row'`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—
justify	`string`	—
wrap	`boolean`	`false`

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
direction	`CSSProperties['flexDirection']`	`'row'`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—
justify	`string`	—
wrap	`boolean`	`false`

Name	Type	Default	Notes
direction	`CSSProperties['flexDirection']`	`'row'`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—
justify	`string`	—
wrap	`boolean`	`false`

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-flex	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

direction: var(--aura-dir, row)
gap: var(--aura-gap, var(--space-4))
align: var(--aura-align, stretch)
justify: var(--aura-justify, flex-start)
wrap: var(--aura-wrap, nowrap)