Billing Startup Discount Application
A form for founders to apply to a startup discount program: eligibility criteria shown up front, company name and website fields, a funding-stage picker, and a savings preview that states the discount percentage and duration before they submit. Submitting shows a confirmation screen with a reference ID. Built for SaaS platforms that offer early-stage companies a discount on paid plans and want a trustworthy, low-friction way to apply.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, input, label dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-startup-discount-application.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing126.tsx instead.
Usage
The file also exports billing126Demo, 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 { Billing126, billing126Demo } from "@/components/blocks/billing/billing126"; export default function Page() { return <Billing126 {...billing126Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Apply for the startup program" | Form heading. |
| description | string | "Early-stage teams get a discount on every paid plan for the first year." | Supporting text under the heading. |
| criteria | string[] | none | Eligibility bullet points shown above the form fields. |
| fundingStages | string[] | none | Selectable funding stages rendered as a single-choice chip group. |
| discountPercent | number | none | Discount percentage shown in the savings preview and the success screen. |
| discountDurationMonths | number | none | How many months the discount applies for, shown alongside discountPercent. |
| submitLabel | string | "Submit application" | Label on the submit button. |
| className | string | none | Extra classes for the outer form/confirmation container. |
Behavior notes
- Company name, website, and funding stage are all required before the submit button enables; the funding stage picker is a real radiogroup of buttons, not a native select.
- Submitting sets a submitting state for about 800ms, then generates a client-side reference ID and swaps the form for a confirmation screen. No network request is made.
- The savings preview box (discountPercent and discountDurationMonths) is shown before submission so founders know what they're applying for, and repeated on the confirmation screen after.
- The eligibility criteria list is purely informational; the component doesn't validate the applicant against it, it's on you to verify eligibility server-side after submission.
- The layout is a single-column max-w-lg form that never introduces a second column, so it reads the same on mobile and desktop.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.