Billing Subscription Renewal Survey

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, label, textarea dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing133.tsx instead.

Usage

The file also exports billing133Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing133, billing133Demo } from "@/components/blocks/billing/billing133";

export default function Page() {
  return <Billing133 {...billing133Demo} />;
}

Props

Types

interface SurveyFocusArea {
  id: string;
  label: string;
}

Behavior notes

• The rating buttons are a radiogroup of 1-5 values; only one can be selected at a time.
• The focus-area chips and feedback textarea are hidden until a rating is picked, matching a progressive-disclosure pattern so the form doesn't feel long up front.
• Focus-area chips use aria-pressed and toggle independently, so any number of them can be selected at once, unlike the single-choice rating buttons.
• The submit button stays disabled until a rating is chosen, even though the focus areas and textarea are both optional.
• Submitting sets a loading state for about 800ms, then replaces the form with a thank-you message that repeats the chosen rating. Nothing is sent anywhere by default, wire your own onSubmit if you fork the component.

Frequently asked questions