Cluster

Overview

The Cluster component is a layout primitive that helps you group related items with consistent spacing and alignment. It's particularly useful for navigation bars, button groups, tags, and other UI elements that need to be grouped together.

Preview

Preview

Item 1

Item 2

Item 3

Item 4

Item 5

Code

<Cluster 
  spacing="normal"
  align="center"
  justify="start"
>
  {items.map((item) => (
    <div 
      key={item} 
    >
      Item {item}
    </div>
  ))}
</Cluster>

Installation

npm

npx @mindfiredigital/ignix-ui add cluster

yarn

yarn add @mindfiredigital/ignix-ui

pnpm

pnpm add @mindfiredigital/ignix-ui

manual

import { type ReactNode } from "react";
import { cn } from "../../../../utils/cn";

export type ClusterSpacing = "none" | "small" | "normal" | "large";
export type ClusterAlign = "start" | "center" | "end" | "stretch" | "baseline";
export type ClusterJustify =
| "start"
| "center"
| "end"
| "between"
| "around"
| "evenly";

export interface ClusterProps {
spacing?: ClusterSpacing;
align?: ClusterAlign;
justify?: ClusterJustify;
wrap?: boolean;
className?: string;
children: ReactNode;
}

const spacingClasses: Record<ClusterSpacing, string> = {
none: "gap-0",
small: "gap-2",
normal: "gap-4",
large: "gap-8",
};

const alignClasses: Record<ClusterAlign, string> = {
start: "items-start",
center: "items-center",
end: "items-end",
stretch: "items-stretch",
baseline: "items-baseline",
};

const justifyClasses: Record<ClusterJustify, string> = {
start: "justify-start",
center: "justify-center",
end: "justify-end",
between: "justify-between",
around: "justify-around",
evenly: "justify-evenly",
};

export function Cluster({
spacing = "normal",
align = "center",
justify = "start",
wrap = true,
className,
children,
}: ClusterProps) {
return (
<div
  className={cn(
    "flex",
    spacingClasses[spacing],
    alignClasses[align],
    justifyClasses[justify],
    wrap ? "flex-wrap" : "flex-nowrap",
    className
  )}
>
  {children}
</div>
);
}

Props

Prop	Type	Default	Description
spacing	'none' | 'small' | 'normal' | 'large'	'normal'	Controls the spacing between items in the cluster
align	'start' | 'center' | 'end' | 'stretch' | 'baseline'	'center'	Controls the cross-axis alignment of items
justify	'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'	'start'	Controls the main axis alignment of items
wrap	boolean	true	Whether items should wrap to the next line when they don't fit
className	string	''	Additional CSS classes to apply to the container
children	ReactNode	-	The content to be rendered inside the cluster

Usage Examples

Basic Usage

import { Cluster } from '@mindfiredigital/ignix';

function TagList() {
  return (
    <Cluster>
      {['React', 'TypeScript', 'JavaScript', 'CSS', 'HTML'].map((tag) => (
        <span key={tag} className="px-3 py-1 bg-gray-100 rounded-full text-sm">
          {tag}
        </span>
      ))}
    </Cluster>
  );
}