Layout

Stack

Flex container, vertical by default. The workhorse — most Aura layouts are a Stack of Groups.

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

First

Second

Third

First

Second

Third

First

Second

Third

First

Second

Third

First

Second

Third

Code

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3);width:100%;">
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">First</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Second</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Third</p>
  </div>
</div>

Demo.tsx

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

export default function Demo() {
  return (
    <Stack gap={3} style={{ width: '100%' }}>
      {['First', 'Second', 'Third'].map((label) => (
        <Card key={label}>
          <Typography variant="body">{label}</Typography>
        </Card>
      ))}
    </Stack>
  );
}

Demo.vue

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

<template>
  <Stack :gap="3">
    <div>One</div>
    <div>Two</div>
  </Stack>
</template>

Demo.svelte

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

<Stack gap={3}>
  <div>One</div>
  <div>Two</div>
</Stack>

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

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraStack],
  template: `
    <div auraStack [gap]="3">
      <div>One</div>
      <div>Two</div>
    </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	`'row' \| 'column'`	`'column'`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—	`align-items`.
justify	`string`	—	`justify-content`.
wrap	`boolean`	`false`

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

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

Name	Type	Default	Notes
direction	`'row' \| 'column'`	`'column'`
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—	`align-items`.
justify	`string`	—	`justify-content`.
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-stack	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

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