Job Detail Page

A full job posting detail page: a header with title, department badge, location, and employment type, followed by Responsibilities, Requirements, and Nice to haves bullet lists, with an Apply now button at top and bottom.

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 badge, button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/job-detail-page.json

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

Usage

The file also exports careers8Demo, 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 { Careers8, careers8Demo } from "@/components/blocks/careers/careers8";

export default function Page() {
  return <Careers8 {...careers8Demo} />;
}

Props

Prop	Type	Default	Description
title	string	"Senior Backend Engineer"	Job title.
department	string	"Engineering"	Department badge text.
location	string	"Remote"	Job location.
type	string	"Full-time"	Employment type.
responsibilities	string[]	none	Bullet list of job responsibilities.
requirements	string[]	none	Bullet list of job requirements.
niceToHaves	string[]	none	Bullet list of nice-to-have qualifications.
className	string	none	Extra classes for the outer section element.

Behavior notes

Fully static: bullet list check icons are decorative, not real checkboxes.
Both Apply now buttons use a placeholder href (`render={<Link href="#" />}`), nothing is submitted anywhere.

More Careers Blocks

View all →

job-listings-list

Job Listings List

A vertical list of open roles with department badge, location, employment type, and an apply link per row.

job-openings-grid

Job Openings Grid

A responsive card grid of open roles with department badge, location, employment type, and an apply link.

department-grouped-positions

Department-Grouped Positions

Open jobs grouped under department headings with minimal single-line rows for title, location, and type.

perks-open-positions

Perks & Open Positions

A benefits icon grid followed by a list of open positions with title, department, and location.

featured-role-with-positions

Featured Role with Positions

A larger featured job card with a 'Hiring now' badge, followed by a compact list of additional openings.

tab-filtered-job-board

Tab-Filtered Job Board

Department tabs (All/Engineering/Design/Marketing) that filter which job list is shown.