Staaarter

Job Application Form

A job application layout: the main column has name, email, and phone inputs plus a decorative drag-and-drop resume upload area, while a sidebar recaps the position's title, department, and location. A submit button sits at the bottom of the form.

By Staaarter Team
Careers
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/job-application-form.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/careers/careers17.tsx instead.

Usage

The file also exports careers17Demo, 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 { Careers17, careers17Demo } from "@/components/blocks/careers/careers17";

export default function Page() {
  return <Careers17 {...careers17Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Apply for this role"Section heading.
descriptionstringnoneSection subheading.
positionPositionSummarynoneJob title, department, and location shown in the sidebar.
classNamestringnoneExtra classes for the outer section element.

Types

interface PositionSummary {
  title: string;
  department: string;
  location: string;
  type: string;
}

Behavior notes

  • Fully static: this is a Server Component, so the form has no onSubmit handler and the resume upload area is a decorative bordered dropzone, not a real file input.
  • The submit button is plain with no handler wired, nothing is sent anywhere.