# Report Issue

> 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.

A shadcn/ui block from the [@01orbital](https://01orbital.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/01orbital/report-issue).

- Page, with a live preview: https://shadcn.exchange/r/01orbital/report-issue
- Screenshot: https://shadcn.exchange/shot/01orbital/report-issue/light.png
- Registry item: https://01orbital.dev/r/report-issue.json
- Categories: app
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/01orbital/report-issue.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@01orbital/issue-report-form`

## Files

### `blocks/app/report-issue/index.tsx`

```tsx
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"
    />
  )
}
```