Layout

Group

A row that wraps. For tag lists, button rows, anything that should reflow rather than overflow.

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

design-system tokens react vue svelte angular css a11y monorepo

design-systemtokensreactvuesvelteangularcssa11ymonorepo

design-system tokens react vue svelte angular css a11y monorepo

design-systemtokensreactvuesvelteangularcssa11ymonorepo

Code

index.html

<div class="aura-group" style="--aura-gap:var(--space-3);">
  <span class="aura-chip">design-system</span>
  <span class="aura-chip">tokens</span>
  <span class="aura-chip">react</span>
  <span class="aura-chip">vue</span>
  <span class="aura-chip">svelte</span>
  <span class="aura-chip">angular</span>
  <span class="aura-chip">css</span>
  <span class="aura-chip">a11y</span>
  <span class="aura-chip">monorepo</span>
</div>

Demo.tsx

import { Chip, Group } from '@ilomee/aura-react';

const TAGS = ['design-system', 'tokens', 'react', 'vue', 'svelte', 'angular', 'css', 'a11y', 'monorepo'];

export default function Demo() {
  // A Group wraps rather than overflows — resize the page to watch it reflow.
  return (
    <Group>
      {TAGS.map((tag) => (
        <Chip key={tag}>{tag}</Chip>
      ))}
    </Group>
  );
}

Demo.vue

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

<template>
  <Group>
    <Chip v-for="tag in tags" :key="tag">{{ tag }}</Chip>
  </Group>
</template>

Demo.svelte

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

<Group>
  {#each tags as tag}
    <Chip>{tag}</Chip>
  {/each}
</Group>

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

demo.component.ts

import { AuraGroup, AuraChip } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraGroup, AuraChip],
  template: `
    <div auraGroup>
      @for (tag of tags; track tag) {
        <aura-chip>{{ tag }}</aura-chip>
      }
    </div>
  `,
})
export class DemoComponent {
  tags = ['ai', 'design', 'css'];
}

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.
gap	`number \| string`	`3`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
gap	`number \| string`	`3`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
gap	`number \| string`	`3`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—

Name	Type	Default	Notes
gap	`number \| string`	`3`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
align	`string`	—

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

Tokens and rules

components.css

gap: var(--aura-gap, var(--space-3))
align: var(--aura-align, center)
wrap: всегда — в этом весь смысл