# Components URL: /docs/components Comprehensive collection of billing and subscription management components with production-ready features. *** title: Components description: Comprehensive collection of billing and subscription management components with production-ready features. ----------------------------------------------------------------------------------------------------------------------- ### Pricing Components Professional pricing table components designed for conversion optimization and clear feature presentation. | Component | Description | | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | **[Pricing Table One](/docs/components/pricing-table/pricing-table-one)** | Essential pricing table with classic and minimal theme variants | | **[Pricing Table Two](/docs/components/pricing-table/pricing-table-two)** | Advanced pricing table with enhanced layouts and feature comparison | | **[Pricing Table Three](/docs/components/pricing-table/pricing-table-three)** | Enterprise-grade pricing table with custom styling and advanced features | | **[Pricing Table Four](/docs/components/pricing-table/pricing-table-four)** | Modern gradient pricing table with contemporary design and smooth animations | | **[Pricing Table Five](/docs/components/pricing-table/pricing-table-five)** | Modern pricing table with contact us plan | | **[Pricing Table Six](/docs/components/pricing-table/pricing-table-six)** | Contemporary pricing table featuring gradient styling, smooth animations, and an enterprise-focused plan | | **[Pricing Table Seven](/docs/components/pricing-table/pricing-table-seven)** | Feature-comparison pricing table with aligned cards and user slider for comprehensive plan comparison | ### Subscription Management Comprehensive subscription management interfaces for billing dashboards and user account management. | Component | Description | | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | **[Manage Subscription](/docs/components/manage-subscription)** | Complete subscription dashboard with billing history and account details | | **[Invoice History](/docs/components/invoice-history)** | Read-only table showing past invoices and receipts | | **[Usage Table](/docs/components/usage-table)** | Per-model LLM usage with token counts, cache reads, and API cost | | **[Update Plan Card](/docs/components/update-plan/update-plan-card)** | Inline plan upgrade interface with feature comparison and pricing | | **[Update Plan Dialog](/docs/components/update-plan/update-plan-dialog)** | Modal dialog for seamless plan changes with confirmation flow | | **[Limited Offer Dialog](/docs/components/limited-offer-dialog)** | Time-sensitive promotional offers with customizable content and call-to-action buttons | | **[Proration Preview](/docs/components/proration-preview)** | Interactive billing adjustment preview for subscription plan changes with cost breakdowns | ### Payment Processing Comprehensive payment method selection and processing interfaces for secure checkout experiences. | Component | Description | | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | **[Payment Details](/docs/components/payment-details)** | Complete payment details form with card details, billing information, country selection, and validation | | **[Payment Details Two](/docs/components/payment-details-two)** | Complete payment details form with card details, billing information, country selection, built with React Hook Form and custom validation | | **[Payment Success Dialog](/docs/components/payment-success-dialog)** | Success confirmation modal with confetti animation and next steps | | **[Payment Method Selector](/docs/components/payment-method-selector)** | Interactive payment method selector supporting cards, digital wallets, UPI, and BNPL services | | **[Payment Card](/docs/components/payment-card)** | A comprehensive final payment interface for processing transactions with card details, billing information, and visual card preview | ### Cancellation Management Thoughtfully designed cancellation flows with retention strategies and user feedback collection. | Component | Description | | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | | **[Cancel Subscription Dialog](/docs/components/cancel-subscription/cancel-subscription-dialog)** | Comprehensive cancellation flow with feedback collection and retention offers | | **[Cancel Subscription Card](/docs/components/cancel-subscription/cancel-subscription-card)** | Compact cancellation interface for quick subscription termination | ### Billing & Usage Analytics Visual usage meters and analytics components for displaying quotas, limits, and consumption data. | Component | Description | | ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | **[Billing Screen](/docs/components/billing-screen)** | Complete billing dashboard with credit balance, plan details, and interactive credit card visual | | **[Usage Meter Linear](/docs/components/usage-meter/usage-meter-linear)** | Horizontal progress bar for displaying usage percentages and limits | | **[Usage Meter Circle](/docs/components/usage-meter/usage-meter-circle)** | Circular progress indicator for API limits and storage consumption | | **[Detailed Usage Table](/docs/components/detailed-usage-table)** | Detailed usage table for showing API calls, tokens, and storage consumption | | **[Billing Setting](/docs/components/billing-setting)** | Billing Setting component with Tabbed navigation for billing preferences, payment method, invoices and usage limits | | **[Billing Settings 2](/docs/components/billing-settings-2)** | Inline billing preferences form with currency, tax ID, and email toggles | | **[Upcoming Charges](/docs/components/upcoming-charges)** | Preview of upcoming billing cycle charges with itemized breakdown | ### Marketing & Promotion Engagement components for announcements, promotions, and user onboarding experiences. | Component | Description | | ----------------------------------------- | -------------------------------------------------------------------- | | **[Top Banner](/docs/components/banner)** | Promotional banner with multiple variants for announcements and CTAs | ## Technical Specifications ### Core Features * **Full TypeScript Support** - Complete type safety with IntelliSense * **Theme Integration** - Automatic light/dark mode with CSS variables * **Responsive Design** - Mobile-first approach with breakpoint optimization * **Accessibility Compliance** - WCAG 2.1 AA standards with screen reader support * **Customizable Styling** - CSS variables and prop-based theming system * **Comprehensive Documentation** - Usage examples, API reference, and best practices ### Integration & Compatibility * **React 18+** with hooks support * **Next.js 13+** App Router compatibility * **shadcn/ui** design system integration * **Tailwind CSS** utility-first styling * **npm/pnpm/yarn** package manager support ## Resources * **[Quick Start Guide](/docs/quick-start)** - Installation and initial setup * **[API Reference](/docs/interfaces)** - TypeScript interfaces and data structures * **[Theming Guide](/docs/theming)** - Customization and brand integration * **[Contributing Guide](/docs/contribution-open-source)** - Development and contribution guidelines