Shadcn UI Help Block
Help4 is a centered support ticket form inside a bordered card container. The form has five fields stacked vertically: email at the top, then category and priority dropdowns side by side, subject line, and a large description textarea. Below the fields is a file attachment section with an "Attach Files" button that opens a file picker. Attached files appear as removable rows showing filename, size, and an X button.
Light background with the form card having a visible border and white fill. The dropdowns are styled as select triggers with chevron icons. The urgent priority option includes a red warning icon inline. Attached file rows have muted backgrounds and rounded corners. Inputs use standard shadcn styling without custom borders or colors.
Straightforward ticket form with a functional, admin-tool aesthetic. The file attachment feature with drag-and-drop style rows is the main interactive element. Moderate complexity from the multi-file handling and validation states, but the visual design is intentionally plain. The bordered card container gives it a form-in-a-panel look common in support dashboards.
Dependencies
| Package | Type |
|---|---|
| @hookform/resolvers | NPM |
| lucide-react | NPM |
| react | NPM |
| react-hook-form | NPM |
| zod | NPM |
button @shadcn | Registry |
field @shadcn | Registry |
input @shadcn | Registry |
textarea @shadcn | Registry |
select @shadcn | Registry |