Does Team Values 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.

Team Values

Company values as huge numbered rows that open to show what each one means in practice.

Type: Team section
Styles: Minimal, Dark
Licence: Charcoal UI Pro

About Team Values

Team Values sets each value as a large numbered row. Opening a row shows what it means and a concrete example of it in practice, so values read as habits rather than slogans.

It is a full-width team section for React and Tailwind CSS 4, in a minimal and dark style. Preview it at any width above, then install it with one command.

When to use Team Values

Careers and culture pages.
Agency about pages.
Studios and motion teams.
Company handbooks.

How it is built

Rows expand with a height animation and announce their state, the plus turns into a cross, and values are title, body and example.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with Team Values

Team Values is part of 2 full templates, so you can see it in a finished page.

Parallel template: Movement is the message.
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 Careers: A React careers board with team filters, remote toggle and posted salaries

Install Team Values

npx shadcn@latest add @charcoal/team-values

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

Team Values as Markdown