# Churnkey SDK > Open-source React cancel flow component. Drop-in to render a survey, offers, feedback, and confirmation. Optionally connects to Churnkey for analytics, A/B testing, and AI retention features. The SDK runs at three integration levels: - Open source: free, runs in the browser, no account required. - Analytics: free with a Churnkey account, records sessions to the dashboard. - Connected: paid plan, Churnkey applies billing actions through your connected provider. Install with `npm install @churnkey/react`. Source on GitHub at https://github.com/churnkey/sdk. ## Get started - [Quickstart](https://sdk.churnkey.co/docs/quickstart): Render a working cancel flow in your React app. No backend or account required. - [Concepts](https://sdk.churnkey.co/docs/concepts): The five concepts behind the SDK: steps, offers, handlers, listeners, and integration levels. - [Integration levels](https://sdk.churnkey.co/docs/integration-levels): Open source, analytics, and connected modes — each a superset of the one before. ## Build - [A basic cancel flow](https://sdk.churnkey.co/docs/build/basic-flow): The minimum viable flow: survey + confirm, calling your billing API on cancel. - [A flow with offers](https://sdk.churnkey.co/docs/build/with-offers): Attach discount, pause, and trial-extension offers to survey reasons, or show one up front with OfferStep. - [A connected flow](https://sdk.churnkey.co/docs/build/token-mode): Let Churnkey serve flow config and apply billing actions through your connected provider. - [Custom step + offer types](https://sdk.churnkey.co/docs/build/custom-step): Define your own step and offer types. They navigate like built-ins. - [Headless](https://sdk.churnkey.co/docs/build/headless): Use the useCancelFlow hook to render the cancel flow with your own UI. ## Customize - [Theming](https://sdk.churnkey.co/docs/customize/theming): Light/dark color schemes and CSS variable overrides for every surface, text, border, and accent color. - [className overrides](https://sdk.churnkey.co/docs/customize/classnames): Tailwind, CSS modules, or plain classes on every element in the flow. - [Replacing components](https://sdk.churnkey.co/docs/customize/components): Swap any piece of the UI. The SDK handles state; you handle rendering. ## Connected mode - [Server-side tokens](https://sdk.churnkey.co/docs/token-mode/tokens): Mint a signed session token in your backend so Churnkey can take billing actions on the customer's behalf. - [Billing providers](https://sdk.churnkey.co/docs/token-mode/billing-providers): Connect Stripe, Braintree, Chargebee, Paddle, or Maxio so Churnkey can apply billing actions. ## Reference - [](https://sdk.churnkey.co/docs/reference/cancel-flow): Every prop on the drop-in component. - [useCancelFlow](https://sdk.churnkey.co/docs/reference/use-cancel-flow): The headless hook. State and actions, no rendering. - [Step types](https://sdk.churnkey.co/docs/reference/steps): Every built-in step interface (SurveyStep, OfferStep, FeedbackStep, ConfirmStep, SuccessStep) and the custom-step shape. - [Offer types](https://sdk.churnkey.co/docs/reference/offers): Every built-in offer interface (DiscountOffer, PauseOffer, PlanChangeOffer, TrialExtensionOffer, ContactOffer, RedirectOffer) and the AcceptedOffer shape. - [Customer + Subscription](https://sdk.churnkey.co/docs/reference/customer): Direct mode types for passing customer and subscription data alongside the token. - [Callbacks](https://sdk.churnkey.co/docs/reference/callbacks): Handler vs listener contracts and per-callback signatures. ## Showcase - [Showcase index](https://sdk.churnkey.co/showcase): Every default component the SDK ships, plus drop-in recipes. - [Default survey](https://sdk.churnkey.co/showcase/recipes/default-survey): The survey step the SDK renders out of the box. - [Default feedback](https://sdk.churnkey.co/showcase/recipes/default-feedback): The feedback step the SDK renders out of the box. - [Default confirm](https://sdk.churnkey.co/showcase/recipes/default-confirm): The confirm step the SDK renders out of the box. - [Default success](https://sdk.churnkey.co/showcase/recipes/default-success): The terminal step the SDK renders out of the box. - [Default discount offer](https://sdk.churnkey.co/showcase/recipes/default-discount-offer): The discount offer the SDK renders out of the box. - [Default pause offer](https://sdk.churnkey.co/showcase/recipes/default-pause-offer): The pause offer the SDK renders out of the box. - [Default plan change offer](https://sdk.churnkey.co/showcase/recipes/default-plan-change-offer): The plan-change offer the SDK renders out of the box. - [Default trial extension offer](https://sdk.churnkey.co/showcase/recipes/default-trial-extension-offer): The trial-extension offer the SDK renders out of the box. - [Default contact offer](https://sdk.churnkey.co/showcase/recipes/default-contact-offer): The contact offer the SDK renders out of the box. - [Default redirect offer](https://sdk.churnkey.co/showcase/recipes/default-redirect-offer): The redirect offer the SDK renders out of the box. - [Default rebate offer](https://sdk.churnkey.co/showcase/recipes/default-rebate-offer): The rebate offer the SDK renders out of the box. - [NPS with faces](https://sdk.churnkey.co/showcase/recipes/nps-with-faces): Five-emoji scale instead of 0–10. Lower friction. - [Name your own price](https://sdk.churnkey.co/showcase/recipes/name-your-price): A serif headline, a single dollar input, a submit pill — and an opt-out link below. - [Confirm — featured image](https://sdk.churnkey.co/showcase/recipes/confirm-with-image): Two-column confirm with feature-loss callouts. - [Confirm — hero image](https://sdk.churnkey.co/showcase/recipes/confirm-with-hero): Banner image, serif headline, reversed CTA — the save is the loud button. - [Discount — promo banner](https://sdk.churnkey.co/showcase/recipes/discount-with-promo-banner): Urgency banner + price-comparison block instead of the SDK's discount card. - [Plan change — stacked rows](https://sdk.churnkey.co/showcase/recipes/plan-change-stacked-rows): Vertical layout for 3+ plans or long feature lists. - [Seat-change buckets](https://sdk.churnkey.co/showcase/recipes/seat-change-buckets): Preset team sizes with savings preview. - [Trial extension — before / after dates](https://sdk.churnkey.co/showcase/recipes/trial-extension-date-arrow): Two dates side by side with an arrow between — `current → extended`. - [Contact — support team card](https://sdk.churnkey.co/showcase/recipes/contact-with-support-card): Avatar + SLA block above the contact button.