Cluster — ARC UI

Components

Cluster

layout

static

<arc-cluster>

Overview

Guidelines

When to use

Use for tag lists, chip groups, and badge collections
Use for button groups that should wrap on narrow screens
Use gap="sm" for dense tag/chip groups; gap="md" for button groups
Use justify="between" for navigation-style layouts with space between items
Combine with Inset for padded containers of clustered items

When not to use

Do not use Cluster for vertical stacking — use Stack instead
Do not use Cluster for fixed-column grids — use Dashboard Grid or Aspect Grid
Do not set large gap values on dense tag lists — it creates excessive whitespace
Do not nest Cluster inside Cluster unless you intentionally want compound wrapping groups
Do not use Cluster for single items — it adds unnecessary wrapper overhead

Features

Flex-wrap layout for natural inline-flow wrapping
Design-token-based gap spacing (xs, sm, md, lg) for consistent rhythm
Configurable alignment via `align` prop (start, center, end)
Configurable justification via `justify` prop (start, center, end, between)
Handles variable-width children gracefully — no fixed column assumptions
Lightweight wrapper with zero JavaScript overhead
CSS part: `cluster` for targeted ::part() styling

Preview

Design Engineering Product Marketing Sales Support Research Operations

Usage

<arc-cluster gap="sm" align="center" justify="start">
  <arc-tag>Design</arc-tag>
  <arc-tag>Engineering</arc-tag>
  <arc-tag>Product</arc-tag>
  <arc-tag>Marketing</arc-tag>
  <arc-tag>Sales</arc-tag>
  <arc-tag>Support</arc-tag>
</arc-cluster>

import { Cluster, Tag } from '@arclux/arc-ui-react';

function TagList() {
  const tags = ['Design', 'Engineering', 'Product', 'Marketing', 'Sales', 'Support'];

  return (
    <Cluster gap="sm" align="center" justify="start">
      {tags.map(tag => <Tag key={tag}>{tag}</Tag>)}
    </Cluster>
  );
}

<script setup>
import { Cluster, Tag } from '@arclux/arc-ui-vue';

const tags = ['Design', 'Engineering', 'Product', 'Marketing', 'Sales', 'Support'];
</script>

<template>
  <Cluster gap="sm" align="center" justify="start">
    <Tag v-for="tag in tags" :key="tag">{{ tag }}</Tag>
  </Cluster>
</template>

<script>
  import { Cluster, Tag } from '@arclux/arc-ui-svelte';

  const tags = ['Design', 'Engineering', 'Product', 'Marketing', 'Sales', 'Support'];
</script>

<Cluster gap="sm" align="center" justify="start">
  {#each tags as tag}
    <Tag>{tag}</Tag>
  {/each}
</Cluster>

import { Component } from '@angular/core';
import { Cluster, Tag } from '@arclux/arc-ui-angular';

@Component({
  imports: [Cluster, Tag],
  template: `
    <Cluster gap="sm" align="center" justify="start">
      @for (tag of tags; track tag) {
        <Tag>{{ tag }}</Tag>
      }
    </Cluster>
  `,
})
export class TagListComponent {
  tags = ['Design', 'Engineering', 'Product', 'Marketing', 'Sales', 'Support'];
}

import { For } from 'solid-js';
import { Cluster, Tag } from '@arclux/arc-ui-solid';

function TagList() {
  const tags = ['Design', 'Engineering', 'Product', 'Marketing', 'Sales', 'Support'];

  return (
    <Cluster gap="sm" align="center" justify="start">
      <For each={tags}>{tag => <Tag>{tag}</Tag>}</For>
    </Cluster>
  );
}

import { Cluster, Tag } from '@arclux/arc-ui-preact';

function TagList() {
  const tags = ['Design', 'Engineering', 'Product', 'Marketing', 'Sales', 'Support'];

  return (
    <Cluster gap="sm" align="center" justify="start">
      {tags.map(tag => <Tag key={tag}>{tag}</Tag>)}
    </Cluster>
  );
}

<!-- See HTML tab after running pnpm generate -->
<div class="arc-cluster">...</div>

<!-- See HTML (Inline) tab after running pnpm generate -->
<div class="arc-cluster" style="display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center">...</div>

API

Prop	Type	Default	Description
`gap`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Spacing between items, mapped to design system spacing tokens. Use sm for dense tag groups, md for button groups.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Vertical alignment of items within each row (maps to align-items).
`justify`	`'start' \| 'center' \| 'end' \| 'between'`	`'start'`	Horizontal distribution of items (maps to justify-content). Use "between" for navigation-style spacing.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight