1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datos tablepricingcompare

Comparison Table

Tabla comparativa de planes con columnas destacadas e iconos de verificación.

FeaturesFreePro
Feature A✅✅
Feature B❌✅
Storage10GB100GB

Uso

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

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

<PriceCompareTable>Content</PriceCompareTable>
--- import { ComparisonTable } from 'astro-component-kit'; --- <PriceCompareTable>Content</PriceCompareTable>

Instalación Manual

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

astro 
---
---
<div class="c-wrap">
  <table>
    <thead>
      <tr><th>Features</th><th>Free</th><th>Pro</th></tr>
    </thead>
    <tbody>
      <tr><td>Feature A</td><td>✅</td><td>✅</td></tr>
      <tr><td>Feature B</td><td>❌</td><td>✅</td></tr>
      <tr><td>Storage</td><td>10GB</td><td>100GB</td></tr>
    </tbody>
  </table>
</div>
<style>
  .c-wrap { background: #0f172a; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
  table { width: 100%; font-size: 0.85rem; color: #e2e8f0; border-collapse: collapse; }
  th { padding: 1rem; background: rgba(255, 255, 255, 0.05); color: #fff; text-align: center; font-weight: 800; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  th:first-child { text-align: left; }
  td { padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
  td:first-child { text-align: left; background: rgba(255,255,255,0.02); width: 40%; font-weight: 600; }
</style>
--- --- <div class="c-wrap"> <table> <thead> <tr><th>Features</th><th>Free</th><th>Pro</th></tr> </thead> <tbody> <tr><td>Feature A</td><td>✅</td><td>✅</td></tr> <tr><td>Feature B</td><td>❌</td><td>✅</td></tr> <tr><td>Storage</td><td>10GB</td><td>100GB</td></tr> </tbody> </table> </div> <style> .c-wrap { background: #0f172a; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; } table { width: 100%; font-size: 0.85rem; color: #e2e8f0; border-collapse: collapse; } th { padding: 1rem; background: rgba(255, 255, 255, 0.05); color: #fff; text-align: center; font-weight: 800; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } th:first-child { text-align: left; } td { padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; } td:first-child { text-align: left; background: rgba(255,255,255,0.02); width: 40%; font-weight: 600; } </style>

Información Rápida

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