Data Display tablepricingcompare

Comparison Table

Grid layout for comparing plan features side-by-side.

FeaturesFreePro
Feature A✅✅
Feature B❌✅
Storage10GB100GB

Usage

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

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

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

Manual Installation

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

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>

Quick Info

Category
Data Display
Filename
ComparisonTable.astro
Dependencies
None — pure Astro + CSS
Tags
tablepricingcompare