Components

Pre-built UI components for common upsell scenarios.

UpsellGate

Wraps features and shows an upgrade prompt when blocked:

import { UpsellGate } from '@upsellsdk/react'

function AnalyticsPage() {
  return (
    <UpsellGate feature="analytics">
      <AnalyticsDashboard />
    </UpsellGate>
  )
}

Props

Prop	Type	Required	Description
feature	string	Yes	Feature key to check
children	ReactNode	Yes	Content to show when allowed
fallback	ReactNode	No	Custom blocked UI

LimitBar

Shows usage progress with an upgrade CTA:

import { LimitBar } from '@upsellsdk/react'

function ProjectsPage({ projects }) {
  return (
    <div>
      <LimitBar
        feature="projects"
        current={projects.length}
        limit={5}
        label="projects"
      />
      <ProjectList projects={projects} />
    </div>
  )
}

Props

Prop	Type	Required	Description
feature	string	Yes	Feature key
current	number	Yes	Current usage
limit	number	Yes	Usage limit
label	string	No	Display label

UpgradeModal

Pre-built pricing/plan selection modal:

import { UpsellProvider, UpgradeModal } from '@upsellsdk/react'

function App() {
  return (
    <UpsellProvider config={...}>
      <YourApp />
      <UpgradeModal />
    </UpsellProvider>
  )
}

The modal opens automatically when users trigger upgrade events.

TrialBanner

Countdown banner for trial users:

import { TrialBanner } from '@upsellsdk/react'

function Layout({ children }) {
  return (
    <div>
      <TrialBanner
        trialEndsAt="2024-02-01"
        position="top"
      />
      {children}
    </div>
  )
}

Props

Prop	Type	Required	Description
trialEndsAt	string	Yes	ISO date string
position	'top' | 'bottom'	No	Banner position