Team Careers
Open roles board with team filters, a remote-only toggle, posted salaries and perks.
- Type: Team section
- Styles: Light, Minimal
- Licence: Charcoal UI Pro
About Team Careers
Team Careers lists open roles with the details candidates actually want: team, location, remote or not and the salary range. Team filters and a remote-only toggle narrow the list, and perks sit above it.
It is a full-width team section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.
When to use Team Careers
- Startup careers pages.
- Agencies hiring.
- Remote-first companies.
- Transparent-salary employers.
How it is built
Roles animate in and out as filters change, counts per team are calculated, and an empty state offers a general email.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Team Careers
Team Careers is part of a full template, so you can see it in a finished page.
- Crew template: A careers page people apply from.
- Team Grid: A remote team React grid with big initials, duotone photos and bios on hover
- Team Founders: A founders' story React section with a serif headline and milestone timeline
- Team Values: A React company values section with huge numbered rows that open
Install Team Careers
npx shadcn@latest add @charcoal/team-careersTeam Careers is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Team Careers work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.