1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Visualización de Datostablepricingcompare

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 componente React:

tsx
import { PriceCompareTable } from 'react-component-kit-ui/data';

<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/PriceCompareTable.tsx + PriceCompareTable.css:

PriceCompareTable.tsx
'use client';

import './PriceCompareTable.css';

/** PriceCompareTable — ported from astro-component-kit. */
export interface PriceCompareTableProps {
}

export function PriceCompareTable({}: PriceCompareTableProps) {
  return (
    <>
      <div className="c-wrap" data-rk-7759ac="">
        <table data-rk-7759ac="">
          <thead data-rk-7759ac="">
            <tr data-rk-7759ac=""><th data-rk-7759ac="">Features</th><th data-rk-7759ac="">Free</th><th data-rk-7759ac="">Pro</th></tr>
          </thead>
          <tbody data-rk-7759ac="">
            <tr data-rk-7759ac=""><td data-rk-7759ac="">Feature A</td><td data-rk-7759ac="">✅</td><td data-rk-7759ac="">✅</td></tr>
            <tr data-rk-7759ac=""><td data-rk-7759ac="">Feature B</td><td data-rk-7759ac="">❌</td><td data-rk-7759ac="">✅</td></tr>
            <tr data-rk-7759ac=""><td data-rk-7759ac="">Storage</td><td data-rk-7759ac="">10GB</td><td data-rk-7759ac="">100GB</td></tr>
          </tbody>
        </table>
      </div>
    </>
  );
}

export default PriceCompareTable;
PriceCompareTable.css
/* PriceCompareTable — ported from astro-component-kit (data/PriceCompareTable.astro) */

.c-wrap:where([data-rk-7759ac]) { background: #0f172a; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; }
table:where([data-rk-7759ac]) { width: 100%; font-size: 0.85rem; color: #e2e8f0; border-collapse: collapse; }
th:where([data-rk-7759ac]) { 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:where([data-rk-7759ac]) { text-align: left; }
td:where([data-rk-7759ac]) { padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
td:first-child:where([data-rk-7759ac]) { text-align: left; background: rgba(255,255,255,0.02); width: 40%; font-weight: 600; }

Información Rápida

Categoría
Visualización de Datos
Nombre de archivo
PriceCompareTable.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
tablepricingcompare