Can I use Plinth for a client site?

Yes. A Pro seat covers unlimited personal and commercial projects, client work included.

Is Plinth a Next.js template?

It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.

Plinth: Architecture firm template

Buildings, told like stories.

For architecture and interior practices: an editorial front-page hero, a project accordion, the founders' story with a timeline, awards and studio cards with live local time.

About the Plinth template

Plinth tells buildings like stories. A newspaper-style hero features the latest project, a project accordion, the founders' story with a timeline, awards and studio cards with live local time make a quietly confident practice site.

Buildings, told like stories. It is a complete architecture firm landing page for React and Tailwind CSS 4, assembled from 7 Charcoal UI sections.

Who Plinth is for

Architecture practices.
Interior design studios.
Landscape architects.
Engineering and design consultancies.

What is inside

7 sections, top to bottom:

Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
Hero Editorial: A newspaper front page as a hero: masthead, serif headline, drop-cap columns and a captioned photo.
Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
Team Founders: Founders' story with an editorial serif headline, who started it and a timeline of milestones.
Awards: SVG laurels around each award, with the rank, the prize, who gave it and the year.
Contact Offices: Office cards with each city's local time and whether the studio is open right now.
Footer Contact: Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.

How it is built

Serif headings and a slate accent are set on the wrapper. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.

Install Plinth

npx shadcn@latest add @charcoal/plinth

Templates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.

Frequently asked questions

Can I use Plinth for a client site?: Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Plinth a Next.js template?: It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.

Sections in this template

Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
Hero Editorial: A newspaper front page as a hero: masthead, serif headline, drop-cap columns and a captioned photo.
Gallery Accordion: Destinations as an image accordion: hover a slim panel and it opens wide with its details.
Team Founders: Founders' story with an editorial serif headline, who started it and a timeline of milestones.
Awards: SVG laurels around each award, with the rank, the prize, who gave it and the year.
Contact Offices: Office cards with each city's local time and whether the studio is open right now.
Footer Contact: Studio footer with a giant email link, address, hours, live local time and a huge faded wordmark.

Plinth as Markdown