Premium Pricing Tables

import { PremiumPricingTable } from '@html5x/pricing-tables-react';

function App() {
  return (
    <PremiumPricingTable
      tableId={1}
      theme="glass"
      customization={{
        primaryColor: '#6366f1',
        fontFamily: 'Inter'
      }}
      onPlanSelect={(plan) => {
        console.log('Selected plan:', plan);
      }}
    />
  );
}

<template>
  <PremiumPricingTable
    :table-id="1"
    theme="glass"
    :customization="customConfig"
    @plan-select="handlePlanSelect"
  />
</template>

<script>
import { PremiumPricingTable } from '@html5x/pricing-tables-vue';

export default {
  components: { PremiumPricingTable },
  data() {
    return {
      customConfig: {
        primaryColor: '#6366f1',
        fontFamily: 'Inter'
      }
    };
  }
};
</script>

import { Component } from '@angular/core';
import { PricingTablesModule } from '@html5x/pricing-tables-angular';

@Component({
  selector: 'app-pricing',
  template: `
    <premium-pricing-table
      [tableId]="1"
      theme="glass"
      [customization]="customConfig"
      (planSelect)="onPlanSelect($event)">
    </premium-pricing-table>
  `
})
export class PricingComponent {
  customConfig = {
    primaryColor: '#6366f1',
    fontFamily: 'Inter'
  };
}

// Initialize premium pricing table
const pricingTable = new PremiumPricingTables({
  container: '#pricing-container',
  tableId: 1,
  theme: 'glass',
  customization: {
    primaryColor: '#6366f1',
    fontFamily: 'Inter'
  },
  callbacks: {
    onPlanSelect: (plan) => {
      console.log('Plan selected:', plan);
    },
    onCustomize: (config) => {
      console.log('Customization changed:', config);
    }
  }
});

// Render the table
pricingTable.render();