1 GitHub star = 1 new component.

Star the repo
Data Displaytablepricingcompare

Comparison Table

Feature comparison table with check/cross icons.

FeaturesFreePro
Feature Aโœ…โœ…
Feature BโŒโœ…
Storage10GB100GB

Usage

Copy and paste this code into your React component:

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

<PriceCompareTable>Content</PriceCompareTable>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: 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; }

Quick Info

Category
Data Display
Filename
PriceCompareTable.tsx
Dependencies
None โ€” pure React + CSS
Tags
tablepricingcompare