Layout layoutflexspacing

Horizontal Cluster

Auto-wrapping flex row for buttons, badges, or list items.

Component preview not available for: cluster-horizontal

Ensure the filename matches ClusterHorizontal.astro

Usage

Copy the full block below to use this component with its imports.

---
import { HorizontalCluster } from 'astro-component-kit';
---

<ClusterHorizontal>Content</ClusterHorizontal>

If you are not using the npm package, create a new file src/components/lib/HorizontalCluster.astro and paste the following code:

---
---
<div class="cluster"><slot /></div>
<style>
  .cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
</style>