Data Display tagsclouddata

Metric Tag Cloud

Visual group of tags or keywords for categorization.

React Astro Next.js Vue Svelte

Usage

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

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

<TagCloudData>Content</TagCloudData>
--- import { MetricTagCloud } from 'astro-component-kit'; --- <TagCloudData>Content</TagCloudData>

Manual Installation

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

astro 
---
---
<div class="t-cloud">
  <span class="t-pill">React</span>
  <span class="t-pill t-active">Astro</span>
  <span class="t-pill">Next.js</span>
  <span class="t-pill">Vue</span>
  <span class="t-pill">Svelte</span>
</div>
<style>
  .t-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .t-pill { padding: 4px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; color: #94a3b8; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
  .t-pill:hover, .t-active { background: #6366f1; color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(99,102,241,0.3); }
</style>
--- --- <div class="t-cloud"> <span class="t-pill">React</span> <span class="t-pill t-active">Astro</span> <span class="t-pill">Next.js</span> <span class="t-pill">Vue</span> <span class="t-pill">Svelte</span> </div> <style> .t-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; } .t-pill { padding: 4px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; color: #94a3b8; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: 0.2s; } .t-pill:hover, .t-active { background: #6366f1; color: #fff; border-color: transparent; box-shadow: 0 4px 10px rgba(99,102,241,0.3); } </style>

Quick Info

Category
Data Display
Filename
MetricTagCloud.astro
Dependencies
None — pure Astro + CSS
Tags
tagsclouddata