Charcoal UI

Hexwork: Open source template

The framework, and the people behind it.

For open-source projects: announcement nav, an ember hero with an install command, GitHub numbers, a versus table, a developer wall, sponsor tiers and a changelog.

About the Hexwork template

Hexwork is for open-source frameworks and libraries. An announcement nav, an ember hero with an install command, GitHub numbers, a versus table, a developer wall, sponsor tiers with a funding bar and a releases changelog tell the whole story.

The framework, and the people behind it. It is a complete open source landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.

Who Hexwork is for

  • Open-source frameworks and libraries.
  • Developer tools with sponsors.
  • Community-run projects.
  • Open core products.

What is inside

8 sections, top to bottom:

  • Navbar Announcement: Dismissible announcement bar above a nav with a Cmd+K search palette and a mobile sheet.
  • Hero Ember: Centred headline over drifting embers, with an announcement pill, two calls to action and a copyable install command.
  • Stats Counters: Four big numbers that roll into place when they enter view.
  • Features Versus: Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.
  • Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
  • Pricing Donation: Pay-what-you-want block where each preset amount says what it pays for, with a goal bar.
  • Changelog: Changelog with sticky version dates, release notes, screenshots and New, Improved and Fixed filters.
  • Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.

How it is built

Sponsor tiers use the donation block, so each tier says what it funds. 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 Hexwork

npx shadcn@latest add @charcoal/hexwork

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 Hexwork for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Hexwork 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 Announcement: Dismissible announcement bar above a nav with a Cmd+K search palette and a mobile sheet.
  • Hero Ember: Centred headline over drifting embers, with an announcement pill, two calls to action and a copyable install command.
  • Stats Counters: Four big numbers that roll into place when they enter view.
  • Features Versus: Old way versus new way: the same tasks side by side, with a toggle that flips the whole table.
  • Testimonials Tweets: Masonry wall of social posts that fades out at the bottom into a read-more button.
  • Pricing Donation: Pay-what-you-want block where each preset amount says what it pays for, with a goal bar.
  • Changelog: Changelog with sticky version dates, release notes, screenshots and New, Improved and Fixed filters.
  • Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.

Hexwork as Markdown