Cluster

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

Item 1

Item 2

Item 3

Item 4

Item 5

Code

import { Cluster } from '@ignix-ui/cluster';

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

Installation

CLI

ignix add component cluster

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>
);
}

Usage Examples

import { Cluster } from '@ignix-ui/cluster';

Basic Usage

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>
  );
}

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	React.ReactNode	-	The content to be rendered inside the cluster