Billing Enterprise Request

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its input, label, textarea, button 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/billing55.tsx instead.

Usage

The file also exports billing55Demo, 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 { Billing55, billing55Demo } from "@/components/blocks/billing/billing55";

export default function Page() {
  return <Billing55 {...billing55Demo} />;
}

Props

Types

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

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

Behavior notes

• Company name and work email are required; the work email is also checked against a fixed set of personal email domains (FREE_EMAIL_DOMAINS in billing55.tsx) and rejected with an inline error if it matches one.
• Volume is a single-select button group with role=radio, compliance requirements are a separate multi-select button group with aria-pressed, both work with keyboard navigation.
• Submitting is disabled while a request is in flight, then shows an 800ms loading state before switching to a confirmation panel naming the selected volume option.
• "Submit another request" resets the view back to the form but keeps whatever was already typed, so a second submission starts from the previous input, not a blank form.
• Notes are optional and never block submission; only company name and a valid, non-personal work email do.

Frequently asked questions