An issue report card form with Area and Severity selects, a one-line subject and a details textarea, preset to Billing and Serious, ending in a Send report button.
import { IssueReportForm } from "@/components/forms/issue-report-form"
// The copy: change text here, not in the markup.
const COPY = {
title: "Report an issue",
body: "Tell us what broke and how much it is in your way.",
} as const
const LABELS = {
area: "Area",
severity: "Severity",
select: "Select",
subject: "Subject",
subjectPlaceholder: "One line, like “Invoice shows the wrong plan”",
details: "What happened",
detailsPlaceholder:
"What you did, what you saw, and what you expected instead.",
submit: "Send report",
} as const
const AREAS = [
{ value: "team", label: "Team" },
{ value: "billing", label: "Billing" },
{ value: "account", label: "Account" },
{ value: "deployments", label: "Deployments" },
{ value: "support", label: "Support" },
]
const SEVERITIES = [
{ value: "1", label: "Blocking" },
{ value: "2", label: "Serious" },
{ value: "3", label: "Annoying" },
{ value: "4", label: "Cosmetic" },
]
export default function ReportIssue() {
return (
<IssueReportForm
title={COPY.title}
description={COPY.body}
areas={AREAS}
severities={SEVERITIES}
defaultArea="billing"
defaultSeverity="2"
labels={LABELS}
className="mx-auto w-full max-w-sm"
/>
)
}
pnpm dlx shadcn add @01orbital/report-issuenpx shadcn add @01orbital/report-issueyarn shadcn add @01orbital/report-issuebunx --bun shadcn add @01orbital/report-issueFree under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/app/report-issue/index.tsx, as source you own and edit.
import ReportIssue from "@/components/blocks/app/report-issue"
export default function Example() {
return <ReportIssue />
}Registry pieces it installs with it:
issue-report-formPayment
A payment method card form with name, a radio choice between two plans, card number, expiry month and year selects and CVC. Validated values go to a submit handler you supply.
Settings
An audio loop settings card with m:ss time fields for loop in and loop out, plus fade in and fade out fields in a collapsible section behind a show and hide toggle.