React UI - Kelviq Documentation

1. Overview

The kelviq React UI SDK provides a complete React-based solution for integrating dynamic, customizable pricing tables and paywalls into web applications. It handles fetching offering data, displaying pricing plans with multiple billing periods, managing subscriptions, and processing checkouts with full localization support.

2. Installation

Install the SDK using npm or yarn:

npm install @kelviq/react-ui
# or
yarn add @kelviq/react-ui

3. Quick Start

Basic Setup

Note: You must import the CSS file for the components to be styled correctly.

import { KelviqProvider, KQPricingTable } from '@kelviq/react-ui';
import '@kelviq/react-ui/dist/kq-react-ui.css';

function App() {
  return (
    <KelviqProvider
      accessToken="YOUR_ACCESS_TOKEN"
      productId="YOUR_PRODUCT_ID"
      customerId="OPTIONAL_CUSTOMER_ID"
    >
      <KQPricingTable />
    </KelviqProvider>
  );
}

With Custom Event Handling

import { KelviqProvider, KQPricingTable } from '@kelviq/react-ui';
import '@kelviq/react-ui/dist/kq-react-ui.css';

function App() {
  const handleCustomPriceClick = (details) => {
    console.log('Custom price plan clicked:', details);
    // Handle custom pricing logic
  };

  return (
    <KelviqProvider
      accessToken="YOUR_ACCESS_TOKEN"
      productId="YOUR_PRODUCT_ID"
      customerId="OPTIONAL_CUSTOMER_ID"
    >
      <KQPricingTable
        onCustomPriceClick={handleCustomPriceClick}
        customStyles={{
          style: {
            cardBackgroundColor: '#ffffff',
            buttonBackgroundColor: '#007bff',
            titleColor: '#333333'
          }
        }}
      />
    </KelviqProvider>
  );
}

4. Core Components

4.1. `KelviqProvider`

The top-level provider component that initializes the SDK and manages the global state.

Required Props

Prop	Type	Description
`accessToken`	`string`	Your kelviq access token
`productId`	`string`	The unique identifier of the product to display the offering for

Optional Props

Prop	Type	Default	Description
`customerId`	`string`	`undefined`	Customer identifier for personalized pricing
`environment`	`sandbox\|production`	’production’	The environment to use. If you want to use the sandbox, you must provide this.
`checkoutSuccessUrl`	`string`	`window.location.href`	URL to redirect after successful checkout
`apiConfig`	`KelviqAPIConfig`	`{}`	Advanced API configuration options

API Configuration Options

interface KelviqAPIConfig {
  onError?: (error: Error) => void;
  maxRetries?: number; // Default: 3
  timeout?: number; // Default: 5000ms
  backoffBaseDelay?: number;
  offeringApiUrl?: string;
  subscriptionApiUrl?: string;
  checkoutApiUrl?: string;
}

4.2. `KQPricingTable`

The main pricing table component that displays all plans and handles user interactions.

Props

Prop	Type	Default	Description
`customStyles`	`PricingTableStyle`	`{}`	Style overrides (colors, typography, layout). Any field you omit falls back to the SDK defaults.
`pricingOptions`	`Partial<PricingOptions>`	`DEFAULT_PRICING_OPTIONS`	Price-formatting options (decimals, currency symbol/code, localization). Partial objects are merged with the defaults.
`customActionButton`	`CustomActionButton`	`undefined`	Custom button component
`customCheckIcon`	`React.ReactNode`	`undefined`	Custom check icon
`customUnCheckIcon`	`React.ReactNode`	`undefined`	Custom uncheck icon
`customTooltipIcon`	`React.ReactNode`	`undefined`	Custom tooltip icon
`onCustomPriceClick`	`(details: PlanClickDetails) => void`	`undefined`	Callback for custom price plans
`renderActionButtonAfter`	`features \| price`	`price`	Render the action button after the features or the price
`insertElements.*`	`InsertElements`	`{}`	Insert custom elements anywhere in the pricing table
`insertElements.beforePlanName`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements before the plan name
`insertElements.afterPlanName`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements after the plan name
`insertElements.beforePlanDescription`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements before the plan description
`insertElements.afterPlanDescription`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements after the plan description
`insertElements.beforePrice`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements before the price
`insertElements.afterPrice`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements after the price
`insertElements.beforeFeatures`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements before the features
`insertElements.afterFeatures`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements after the features
`insertElements.beforeActionButton`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements before the action button
`insertElements.afterActionButton`	`(plan: OfferingPlan, activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements after the action button
`insertElements.beforeSwitch`	`(activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements before the switch
`insertElements.afterSwitch`	`(activePeriod: ChargePeriodEnum) => JSX.Element`	`undefined`	Insert custom elements after the switch

Example Usage

<KQPricingTable
  onCustomPriceClick={(details) => {
    console.log('Custom plan selected:', details.plan.displayName);
    // Handle custom pricing logic
  }}
  customStyles={{
    style: {
      cardBackgroundColor: '#f8f9fa',
      buttonBackgroundColor: '#28a745',
      buttonColor: '#ffffff',
      titleColor: '#212529'
    },
    typography: {
      titleFontSize: 24,
      titleFontWeight: '600'
    },
    layout: {
      gap: 20,
      minWidth: 280,
      maxWidth: 400
    }
  }}
  insertElements={{
    afterPrice: (plan) => {
        if(plan.shouldHighlight) {
            return <div>Most popular plan</div>;
        }
        return null;
    }
  }}
/>

4.3. `KQPlan`

Renders a list of pricing plans with billing period switching.

Props

Prop	Type	Required	Description
`plans`	`OfferingPlan[]`	Yes	Array of plans to display
`pricingOptions`	`PricingOptions`	Yes	Price-formatting options
`billingPeriods`	`BillingPeriod[]`	Yes	Available billing periods
`countryCode`	`string`	Yes	Country code for localization
`currencyCode`	`string`	Yes	Currency code (e.g., “USD”)
`currencySymbol`	`string`	Yes	Currency symbol (e.g., ”$“)
`currencyConversionRate`	`number`	Yes	Currency conversion rate
`pricingLocale`	`string`	Yes	Locale for price formatting
`onPlanClick`	`(details: PlanClickDetails) => void`	Yes	Plan selection callback
`customStyles`	`PricingTableStyle`	No	Custom styling
`customActionButton`	`CustomActionButton`	No	Custom button component
`actionButtonLoadingPlanIdentifier`	`string`	No	Loading state for specific plan
`noStyles`	`boolean`	No	Disable default styling

4.4. `KQPlanItem`

Displays a single pricing plan card.

Props

Prop	Type	Required	Description
`plan`	`OfferingPlan`	Yes	Plan data to display
`pricingOptions`	`PricingOptions`	Yes	Price-formatting options
`period`	`ChargePeriodEnum`	Yes	Current billing period
`countryCode`	`string`	Yes	Country code
`currencyCode`	`string`	Yes	Currency code
`currencySymbol`	`string`	Yes	Currency symbol
`currencyConversionRate`	`number`	Yes	Conversion rate
`pricingLocale`	`string`	Yes	Locale for formatting
`onKQPlanItemClick`	`(details: PlanClickDetails) => void`	Yes	Click handler
`customActionButton`	`CustomActionButton`	No	Custom button
`actionButtonText`	`string`	No	Button text
`actionButtonLoading`	`boolean`	No	Loading state
`actionButtonDisabled`	`boolean`	No	Disabled state
`isActive`	`boolean`	No	Active plan indicator
`successText`	`string`	No	Success message
`noStyles`	`boolean`	No	Disable styling

4.5. `KQPrice`

Renders formatted price display with currency and period information.

Props

Prop	Type	Required	Description
`price`	`number`	Yes	Price amount
`countryCode`	`string`	Yes	Country code
`currencyCode`	`string`	Yes	Currency code
`currencySymbol`	`string`	Yes	Currency symbol
`currencyConversionRate`	`number`	Yes	Conversion rate
`pricingLocale`	`string`	Yes	Locale for formatting
`period`	`ChargePeriodEnum`	Yes	Billing period
`showDecimal`	`boolean`	Yes	Show decimal places
`showCurrencySymbol`	`boolean`	Yes	Show currency symbol
`showCurrencyCode`	`boolean`	Yes	Show currency code
`minimumFractionDigits`	`number`	Yes	Minimum decimal places
`maximumFractionDigits`	`number`	Yes	Maximum decimal places

4.6. `KQFeatures`

Renders the features list for a plan.

Props

Prop	Type	Required	Description
`features`	`OfferingFeature[]`	Yes	Array of features
`period`	`ChargePeriodEnum`	Yes	Current billing period
`customCheckIcon`	`React.ReactNode`	No	Custom check icon
`customUnCheckIcon`	`React.ReactNode`	No	Custom uncheck icon
`customTooltipIcon`	`React.ReactNode`	No	Custom tooltip icon
`onUsageChange`	`(featureId: string, quantity: number) => void`	No	Usage change handler

Feature tooltips are controlled per-feature by the displayTooltipDescription flag on each feature in the offering data, configured in your kelviq dashboard — there is no global tooltip prop.

5. Data Types

Core Types

// Billing periods
enum ChargePeriodEnum {
  ONE_TIME = 'ONE_TIME',
  MONTHLY = 'MONTHLY',
  YEARLY = 'YEARLY',
  WEEKLY = 'WEEKLY',
  DAILY = 'DAILY',
  THREE_MONTHS = 'THREE_MONTHS',
  SIX_MONTHS = 'SIX_MONTHS'
}

// Price types
enum PriceTypeEnum {
  FREE = 'FREE',
  PAID = 'PAID',
  CUSTOM = 'CUSTOM'
}

// Price models
enum PriceModelEnum {
  FLAT = 'FLAT',
  PACKAGE = 'PACKAGE',
  TIERED = 'TIERED',
  VOLUME = 'VOLUME'
}

// Plan structure
interface OfferingPlan {
  id: string;
  name: string;
  displayName: string;
  displayDescription: string;
  identifier: string;
  isArchived: boolean;
  features: OfferingFeature[];
  price: OfferingPlanPrice;
  shouldHighlight: boolean;
  enabled: boolean;
}

// Plan click details
interface PlanClickDetails {
  plan: OfferingPlan;
  chargePeriod: ChargePeriodEnum;
  usageMap: Record<string, number>;
}

// Pricing table style
interface PricingTableStyle {
  style: PricingTableColorConfig;
  typography: PricingTableTypographyConfig;
  layout: PricingTableLayoutConfig;
}

// Price-formatting options (passed via the `pricingOptions` prop)
interface PricingOptions {
  localization: boolean;        // use the offering's locale/currency formatting
  showDecimal: boolean;         // show decimal places
  minimumDecimalDigits: number; // minimum decimal places
  maximumDecimalDigits: number; // maximum decimal places
  showCurrencySymbol: boolean;  // show the currency symbol (e.g. $)
  showCurrencyCode: boolean;    // show the currency code (e.g. USD)
}

Color Configuration

interface PricingTableColorConfig {
  primaryColor: string;
  primaryHoverColor: string;
  onPrimaryColor: string;
  secondaryColor: string;
  cardBackgroundColor: string;
  billingSwitchBackgroundColor: string;
  billingSwitchColor: string;
  billingSwitchSelectedColor: string;
  titleColor: string;
  descriptionColor: string;
  priceColor: string;
  priceUnitColor: string;
  pricePeriodColor: string;
  featureColor: string;
  dividerColor: string;
  buttonBackgroundColor: string;
  buttonColor: string;
  buttonHoverBackgroundColor: string;
  advancedMode: boolean;
}

Typography Configuration

interface PricingTableTypographyConfig {
  titleFontSize: number;
  titleFontWeight: string;
  descriptionFontSize: number;
  descriptionFontWeight: string;
  priceFontSize: number;
  priceFontWeight: string;
  priceUnitFontSize: number;
  priceUnitFontWeight: string;
  featureFontSize: number;
  featureFontWeight: string;
  pricePeriodFontSize: number;
  pricePeriodFontWeight: string;
}

Layout Configuration

interface PricingTableLayoutConfig {
  minWidth: number;
  maxWidth: number;
  gap: number;
  align: 'start' | 'center' | 'end';
  tierSelectionType: 'switch' | 'tabs';
}

6. Styling and Customization

6.1. CSS Variables

The SDK uses CSS variables for styling. You can override these in your CSS:

:root {
  /* Card & Background */
  --kq-card-bg: #ffffff;
  --kq-card-border-width: 1px solid;
  --kq-card-border-color: 1px solid;

  /* Text Colors */
  --kq-title-color: #171923;
  --kq-description-color: #718096;
  --kq-feature-color: #171923;

  /* Price Colors */
  --kq-price-color: #171923;
  --kq-price-unit-color: #171923;
  --kq-price-period-color: #718096;

  /* Button Colors */
  --kq-button-bg: #1A202C;
  --kq-button-hover-bg: #1A202C;
  --kq-button-color: #F7FAFC;

  /* Billing Switch Colors */
  --kq-billing-switch-bg: #1A202C;
  --kq-billing-switch-color: #F7FAFC;
  --kq-billing-switch-selected-color: #F7FAFC;

  /* UI Elements */
  --kq-divider-color: #E2E8F0;
  --kq-tooltip-bg: #2D3748;
  --kq-tooltip-color: #ffffff;

  /* Typography - Title */
  --kq-title-size: 24px;
  --kq-title-weight: 600;

  /* Typography - Description */
  --kq-description-size: 16px;
  --kq-description-weight: 400;

  /* Typography - Price */
  --kq-price-size: 28px;
  --kq-price-weight: 700;
  --kq-price-unit-size: 32px;
  --kq-price-unit-weight: 700;
  --kq-price-period-size: 16px;
  --kq-price-period-weight: 400;

  /* Typography - Feature */
  --kq-feature-size: 14px;
  --kq-feature-weight: 400;

  /* Layout */
  --kq-min-width: 360px;
  --kq-max-width: 400px;
  --kq-gap: 24px;
  --kq-align: center;
}

6.2. Custom Styles Object

const customStyles: PricingTableStyle = {
  style: {
    cardBackgroundColor: '#ffffff',
    buttonBackgroundColor: '#28a745',
    buttonColor: '#ffffff',
    titleColor: '#212529',
    descriptionColor: '#6c757d',
    priceColor: '#000000',
    featureColor: '#495057'
  },
  typography: {
    titleFontSize: 24,
    titleFontWeight: '600',
    descriptionFontSize: 14,
    descriptionFontWeight: '400',
    priceFontSize: 32,
    priceFontWeight: '700'
  },
  layout: {
    gap: 24,
    minWidth: 300,
    maxWidth: 450,
    align: 'center'
  }
};

6.3. Price Formatting

How prices are formatted is configured entirely in the SDK via the pricingOptions prop. Pass only the fields you want to change — the rest fall back to DEFAULT_PRICING_OPTIONS:

<KQPricingTable
  pricingOptions={{
    showDecimal: true,
    minimumDecimalDigits: 0,
    maximumDecimalDigits: 2,
    showCurrencySymbol: true,
    showCurrencyCode: false,
    localization: true,
  }}
/>

Defaults (DEFAULT_PRICING_OPTIONS):

{
  localization: true,
  showDecimal: true,
  minimumDecimalDigits: 0,
  maximumDecimalDigits: 2,
  showCurrencySymbol: true,
  showCurrencyCode: false,
}

6.4. Custom Action Button

const CustomButton: CustomActionButton = ({ onClick, children, plan, disabled }) => (
  <button
    onClick={onClick}
    disabled={disabled}
    className="my-custom-button"
    style={{
      backgroundColor: plan.shouldHighlight ? '#ff6b35' : '#007bff',
      color: '#ffffff',
      padding: '12px 24px',
      border: 'none',
      borderRadius: '6px',
      cursor: disabled ? 'not-allowed' : 'pointer'
    }}
  >
    {children}
  </button>
);

<KQPricingTable customActionButton={CustomButton} />

6.5. noStyles Mode

For complete styling control, use the noStyles prop:

<KQPricingTable noStyles={true} />

6.6. CSS Class Reference

The kelviq React UI components use consistent CSS class names that you can target for custom styling. All classes are prefixed with kq- to avoid naming conflicts.

CSS Class Hierarchy

.kq-plan                          /* Root container */
├── .kq-plan-switch              /* Billing period switcher */
│   └── .kq-switch               /* Switch wrapper */
│       └── .kq-switch-button    /* Individual switch buttons */
│           └── .kq-promo-caption /* Discount badges (20%, etc.) */
├── .kq-plan-items              /* Plans container */
    └── .kq-plan-item           /* Individual plan card */
        ├── .kq-plan-item-header /* Plan title section */
        │   ├── .kq-plan-item-heading    /* Plan name */
        │   └── .kq-plan-item-subheading /* Plan description */
        ├── .kq-plan-item-price /* Price section */
        │   ├── .kq-price-container      /* Price wrapper */
        │   │   ├── .kq-price-currency   /* Currency container */
        │   │   │   ├── .kq-price-currency-symbol /* $ symbol */
        │   │   │   └── .kq-price-currency-code   /* USD text */
        │   │   ├── .kq-price-integer    /* Main price number */
        │   │   ├── .kq-price-decimal-separator /* Decimal point */
        │   │   └── .kq-price-decimal    /* Decimal digits */
        │   └── .kq-plan-item-price-period /* /month text */
        ├── .kq-separator           /* Divider line */
        ├── .kq-plan-item-features  /* Features section */
        │   └── .kq-features-list   /* Features list */
        │       └── .kq-features-list-item /* Individual features */
        │           ├── .kq-tooltip-wrapper /* Feature tooltips */
        │           │   └── .kq-tooltip      /* Tooltip content */
        │           ├── .kq-feature-quantity-input /* Quantity number input */
        │           ├── .kq-feature-quantity-input-unit /* Input unit label */
        │           └── .kq-feature-quantity-select-container /* Quantity dropdown */
        │               ├── .kq-feature-quantity-select /* Select element */
        │               └── .kq-feature-quantity-select-arrow /* Dropdown arrow */
        └── .kq-plan-item-button    /* CTA button */

7. Advanced Features

7.1. Usage-Based Pricing

The SDK supports metered billing and tiered pricing:

// Features with usage tracking
const features = [
  {
    identifier: 'api_calls',
    displayName: 'API Calls',
    priceModel: PriceModelEnum.VOLUME,
    charges: [
      {
        chargePeriod: ChargePeriodEnum.MONTHLY,
        tiers: [
          { flatAmount: 0, unitAmount: 0.01, upTo: 1000 },
          { flatAmount: 10, unitAmount: 0.008, upTo: 10000 },
          { flatAmount: 82, unitAmount: 0.005, upTo: null }
        ]
      }
    ]
  }
];

7.2. Custom Price Plans

Handle custom pricing plans with the onCustomPriceClick callback:

<KQPricingTable
  onCustomPriceClick={(details) => {
    // Open contact form or custom pricing modal
    openCustomPricingModal(details.plan);
  }}
/>

7.3. Subscription Management

The SDK automatically handles subscription updates:

New Subscriptions: Redirects to checkout
Plan Upgrades/Downgrades: Updates existing subscription
Free Plan Upgrades: Handles free trial to paid conversion

7.4. Error Handling

<KelviqProvider
  accessToken="YOUR_TOKEN"
  productId="YOUR_PRODUCT_ID"
  apiConfig={{
    onError: (error) => {
      console.error('kelviq Error:', error);
      // Show user-friendly error message
      showErrorMessage('Unable to load pricing. Please try again later.');
    },
    maxRetries: 3,
    timeout: 10000
  }}
>
  <KQPricingTable />
</KelviqProvider>

8. Complete Example

import React from 'react';
import {
  KelviqProvider,
  KQPricingTable,
  PricingTableStyle
} from '@kelviq/react-ui';

const App: React.FC = () => {
  const customStyles: PricingTableStyle = {
    style: {
      cardBackgroundColor: '#ffffff',
      buttonBackgroundColor: '#007bff',
      buttonColor: '#ffffff',
      buttonHoverBackgroundColor: '#0056b3',
      titleColor: '#212529',
      descriptionColor: '#6c757d',
      priceColor: '#000000',
      featureColor: '#495057',
      dividerColor: '#dee2e6',
      billingSwitchBackgroundColor: '#f8f9fa',
      billingSwitchColor: '#6c757d',
      billingSwitchSelectedColor: '#007bff'
    },
    typography: {
      titleFontSize: 24,
      titleFontWeight: '600',
      descriptionFontSize: 14,
      descriptionFontWeight: '400',
      priceFontSize: 32,
      priceFontWeight: '700',
      priceUnitFontSize: 16,
      priceUnitFontWeight: '400',
      featureFontSize: 14,
      featureFontWeight: '400',
      pricePeriodFontSize: 14,
      pricePeriodFontWeight: '400'
    },
    layout: {
      gap: 24,
      minWidth: 300,
      maxWidth: 450,
      align: 'center'
    }
  };

  const handleCustomPriceClick = (details) => {
    console.log('Custom plan selected:', details.plan.displayName);
    // Open contact form or pricing calculator
    window.open('/contact', '_blank');
  };

  return (
    <div className="app">
      <header>
        <h1>Choose Your Plan</h1>
        <p>Select the perfect plan for your needs</p>
      </header>
      
      <KelviqProvider
        accessToken="your-access-token"
        productId="your-product-id"
        customerId="optional-customer-id"
        checkoutSuccessUrl="https://yourapp.com/success"
        apiConfig={{
          onError: (error) => {
            console.error('Pricing Error:', error);
          },
          timeout: 10000
        }}
      >
        <KQPricingTable
          customStyles={customStyles}
          onCustomPriceClick={handleCustomPriceClick}
        />
      </KelviqProvider>
    </div>
  );
};

export default App;

9. API Endpoints

The SDK uses the following default API endpoints:

Product Offering API: https://api.kelviq.com/api/v1/monetization/product-offering/{productId}/
Checkout API: https://api.kelviq.com/api/v1/checkout/
Subscription API: https://api.kelviq.com/api/v1/subscriptions

You can override these in the apiConfig:

<KelviqProvider
  apiConfig={{
    offeringApiUrl: 'https://your-api.com/offerings',
    checkoutApiUrl: 'https://your-api.com/checkout',
    subscriptionApiUrl: 'https://your-api.com/subscriptions'
  }}
>

10. Troubleshooting

Common Issues

Loading State: Ensure your accessToken and productId are correct
Styling Issues: Check CSS variable overrides and custom styles
API Errors: Verify API endpoints and network connectivity
TypeScript Errors: Ensure all required props are provided

Debug Mode

Enable console logging for debugging:

<KelviqProvider
  apiConfig={{
    onError: (error) => {
      console.log('kelviq Debug:', {
        error: error.message,
        productId: 'your-product-id',
        timestamp: new Date().toISOString()
      });
    }
  }}
>

Using the Sandbox

If you want to use the sandbox, you need to set the environment option to sandbox in the KelviqProvider.

<KelviqProvider 
  accessToken="YOUR_ACCESS_TOKEN"
  productId="YOUR_PRODUCT_ID"
  environment="sandbox">
    {/* Your app components */}
</KelviqProvider>

12. Support

For technical support and questions:

Documentation: docs.kelviq.com
Email: support@kelviq.com

​1. Overview

​2. Installation

​3. Quick Start

​Basic Setup

​With Custom Event Handling

​4. Core Components

​4.1. KelviqProvider

​Required Props

​Optional Props

​API Configuration Options

​4.2. KQPricingTable

​Props

​Example Usage

​4.3. KQPlan

​Props

​4.4. KQPlanItem

​Props

​4.5. KQPrice

​Props

​4.6. KQFeatures

​Props

​5. Data Types

​Core Types

​Color Configuration

​Typography Configuration

​Layout Configuration

​6. Styling and Customization

​6.1. CSS Variables

​6.2. Custom Styles Object

​6.3. Price Formatting

​6.4. Custom Action Button

​6.5. noStyles Mode

​6.6. CSS Class Reference

​CSS Class Hierarchy

​7. Advanced Features

​7.1. Usage-Based Pricing

​7.2. Custom Price Plans

​7.3. Subscription Management

​7.4. Error Handling

​8. Complete Example

​9. API Endpoints

​10. Troubleshooting

​Common Issues

​Debug Mode

​Using the Sandbox

​12. Support

1. Overview

2. Installation

3. Quick Start

Basic Setup

With Custom Event Handling

4. Core Components

4.1. `KelviqProvider`

Required Props

Optional Props

API Configuration Options

4.2. `KQPricingTable`

Props

Example Usage

4.3. `KQPlan`

Props

4.4. `KQPlanItem`

Props

4.5. `KQPrice`

Props

4.6. `KQFeatures`

Props

5. Data Types

Core Types

Color Configuration

Typography Configuration

Layout Configuration

6. Styling and Customization

6.1. CSS Variables

6.2. Custom Styles Object

6.3. Price Formatting

6.4. Custom Action Button

6.5. noStyles Mode

6.6. CSS Class Reference

CSS Class Hierarchy

7. Advanced Features

7.1. Usage-Based Pricing

7.2. Custom Price Plans

7.3. Subscription Management

7.4. Error Handling

8. Complete Example

9. API Endpoints

10. Troubleshooting

Common Issues

Debug Mode

Using the Sandbox

12. Support