Charcoal UI

Sable: Security platform template

Enterprise security without the theatre.

For B2B security and infrastructure: a mega-menu nav, dashboard hero, logo wall with results, trust controls, a live threat map, an enterprise contact card and demo booking.

About the Sable template

Sable is for B2B security platforms. A mega-menu, a dashboard hero, a logo wall with results, trust controls and a live map of blocked threats build credibility, then case studies, an enterprise pricing card with a sales form and demo booking close the deal.

Enterprise security without the theatre. It is a complete security platform landing page for React and Tailwind CSS 4, assembled from 9 Charcoal UI sections.

Who Sable is for

  • Cloud security and posture tools.
  • Identity and access products.
  • Compliance automation.
  • Infrastructure sold to enterprise.

What is inside

9 sections, top to bottom:

  • Navbar Mega Menu: A full-width bar with a mega menu that unfolds on hover or focus.
  • Hero Dashboard: A browser-framed dashboard that tilts up flat as you scroll, under a centred headline.
  • Logo Wall: Grid of customer wordmarks; hovering a cell slides the logo away to reveal that customer's result.
  • Features Security: Trust section with certification seals, the controls behind them and a live uptime gauge.
  • Stats Live: Dotted world map with live pings, a running counter and a feed of what just happened where.
  • Testimonials Case Study: Case studies as tabs: each customer gets a photo, a quote and three results that count up.
  • Pricing Enterprise: Self-serve plan beside an enterprise card with the sales form built in, so big buyers never leave.
  • Contact Booking: Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
  • Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.

How it is built

The live map simulates events until you feed it real data. 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 Sable

npx shadcn@latest add @charcoal/sable

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 Sable for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Sable 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 Mega Menu: A full-width bar with a mega menu that unfolds on hover or focus.
  • Hero Dashboard: A browser-framed dashboard that tilts up flat as you scroll, under a centred headline.
  • Logo Wall: Grid of customer wordmarks; hovering a cell slides the logo away to reveal that customer's result.
  • Features Security: Trust section with certification seals, the controls behind them and a live uptime gauge.
  • Stats Live: Dotted world map with live pings, a running counter and a feed of what just happened where.
  • Testimonials Case Study: Case studies as tabs: each customer gets a photo, a quote and three results that count up.
  • Pricing Enterprise: Self-serve plan beside an enterprise card with the sales form built in, so big buyers never leave.
  • Contact Booking: Book-a-demo block: pick a day, pick a slot and confirm without leaving the page.
  • Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.

Sable as Markdown