Cluster

A wrap-friendly horizontal group with consistent gap and alignment

DesignEngineeringProductMarketingOperationsResearchCustomer Success

import { Cluster } from '@/components/cluster';

const Chip = ({ children }: { children: React.ReactNode }) => (
  <span className="rounded-full border border-border bg-background-secondary px-3 py-1 text-foreground-secondary text-sm">
    {children}
  </span>
);

export default function ClusterPreview() {
  return (
    <Cluster className="max-w-md">
      <Chip>Design</Chip>
      <Chip>Engineering</Chip>
      <Chip>Product</Chip>
      <Chip>Marketing</Chip>
      <Chip>Operations</Chip>
      <Chip>Research</Chip>
      <Chip>Customer Success</Chip>
    </Cluster>
  );
}

Dependencies

Slot

Source Code

import type { VariantProps } from 'cva';

import { Slot } from '@/components/slot';
import { cn, cva } from '@/lib/utils/classnames';

const clusterStyle = cva({
  base: 'flex flex-wrap',
  variants: {
    align: {
      start: 'items-start',
      center: 'items-center',
      end: 'items-end',
      stretch: 'items-stretch',
      baseline: 'items-baseline',
    },
    justify: {
      start: 'justify-start',
      center: 'justify-center',
      end: 'justify-end',
      between: 'justify-between',
    },
    gap: {
      none: 'gap-0',
      xs: 'gap-1',
      sm: 'gap-2',
      md: 'gap-4',
      lg: 'gap-6',
      xl: 'gap-8',
    },
  },
  defaultVariants: {
    align: 'center',
    justify: 'start',
    gap: 'sm',
  },
});

interface ClusterProps
  extends React.ComponentPropsWithRef<'div'>,
    VariantProps<typeof clusterStyle> {
  asChild?: boolean;
}

const Cluster = ({
  ref,
  className,
  align,
  justify,
  gap,
  asChild,
  ...rest
}: ClusterProps) => {
  const Comp = asChild ? Slot : 'div';
  return (
    <Comp
      ref={ref}
      className={cn(clusterStyle({ align, justify, gap }), className)}
      {...rest}
    />
  );
};

export type { ClusterProps };
export { Cluster, clusterStyle };

Server component. No 'use client' — layout primitive; no hooks or own handlers.

Cluster lays out a row of items that wrap onto multiple lines while keeping a consistent gap. Use it for tag lists, filter chips, button rows, and metadata rows — anywhere Flex would need flex-wrap plus a gap to express intent.

Anatomy


          <Cluster>
  <Badge>Design</Badge>
  <Badge>Engineering</Badge>
  <Badge>Product</Badge>
</Cluster>

API Reference

Cluster

Extends the div element.

Prop	Default	Type
`align`	`"center"`	`"start""center""end""stretch""baseline"`
`justify`	`"start"`	`"start""center""end""between"`
`gap`	`"sm"`	`"none""xs""sm""md""lg""xl"`
`asChild`	-	`boolean`

Examples

Default

DesignEngineeringProductMarketingOperationsResearchCustomer Success

import { Cluster } from '@/components/cluster';

const Chip = ({ children }: { children: React.ReactNode }) => (
  <span className="rounded-full border border-border bg-background-secondary px-3 py-1 text-foreground-secondary text-sm">
    {children}
  </span>
);

export default function ClusterPreview() {
  return (
    <Cluster className="max-w-md">
      <Chip>Design</Chip>
      <Chip>Engineering</Chip>
      <Chip>Product</Chip>
      <Chip>Marketing</Chip>
      <Chip>Operations</Chip>
      <Chip>Research</Chip>
      <Chip>Customer Success</Chip>
    </Cluster>
  );
}

Checkbox

Color Picker