Charcoal UI

Vellum: Team wiki template

Find anything your team ever wrote.

For wikis, docs and knowledge tools: an announcement bar, a search-first hero, a keyboard showcase, before and after, a social wall, tiers, a changelog and a newsletter close.

About the Vellum template

Vellum is for docs and knowledge tools. An announcement bar, a big search hero with typed examples, a keyboard showcase and a stop-asking-in-Slack comparison lead to a social wall, simple pricing, a live changelog and a newsletter close.

Find anything your team ever wrote. It is a complete team wiki landing page for React and Tailwind CSS 4, assembled from 9 Charcoal UI sections.

Who Vellum is for

  • Wikis and internal docs.
  • Enterprise search.
  • Knowledge bases with AI answers.
  • Note-taking apps for teams.

What is inside

9 sections, top to bottom:

  • Navbar Announcement: Dismissible announcement bar above a nav with a Cmd+K search palette and a mobile sheet.
  • Hero Search: Marketplace hero built around one big search box with typed example queries and category chips.
  • Features Keyboard: A drawn keyboard that presses each shortcut in turn, for keyboard-first products.
  • 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 Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
  • Changelog: Changelog with sticky version dates, release notes, screenshots and New, Improved and Fixed filters.
  • CTA Newsletter: Newsletter signup that validates inline and confirms with a drawn check.
  • Footer Minimal: One quiet row: brand, a few links and the year.

How it is built

The search hero's prefix, noun and categories are props, so it reads like your product. 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 Vellum

npx shadcn@latest add @charcoal/vellum

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 Vellum for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Vellum 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 Search: Marketplace hero built around one big search box with typed example queries and category chips.
  • Features Keyboard: A drawn keyboard that presses each shortcut in turn, for keyboard-first products.
  • 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 Tiers: Three plans with a monthly/yearly switch; prices roll to the new amount and the popular plan glows.
  • Changelog: Changelog with sticky version dates, release notes, screenshots and New, Improved and Fixed filters.
  • CTA Newsletter: Newsletter signup that validates inline and confirms with a drawn check.
  • Footer Minimal: One quiet row: brand, a few links and the year.

Vellum as Markdown