1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos tagsclouddata

Metric Tag Cloud

Nube de etiquetas con recuentos numéricos de elementos para categorización rápida.

React Astro Next.js Vue Svelte

Uso

Copia y pega este código directamente en tu página de Astro:

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

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

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/MetricTagCloud.astro:

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>

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
MetricTagCloud.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
tagsclouddata