Charcoal UI

Runway: Deploy platform template

Push to deploy, in every region.

For hosting and deploy platforms: announcement nav, a typing terminal hero, performance metrics, a live world map of deploys, usage pricing, a changelog and a CLI close.

About the Runway template

Runway is for hosting and deploy platforms. An announcement nav, a typing terminal hero, performance metrics, a live world map of deploys, usage pricing, a changelog with screenshots and a CLI close make the case to developers.

Push to deploy, in every region. It is a complete deploy platform landing page for React and Tailwind CSS 4, assembled from 8 Charcoal UI sections.

Who Runway is for

  • Hosting and deploy platforms.
  • Edge and serverless runtimes.
  • Preview environment tools.
  • Developer infrastructure.

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 Terminal: Developer-tool hero: beams on a grid, and a terminal that types your install and dev commands.
  • Features Metrics: Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
  • Stats Live: Dotted world map with live pings, a running counter and a feed of what just happened where.
  • Pricing Usage: Usage-based pricing: drag the slider and the monthly estimate rolls to match.
  • Changelog: Changelog with sticky version dates, release notes, screenshots and New, Improved and Fixed filters.
  • CTA Terminal: Developer CTA with a copyable install command beside a terminal that runs it.
  • Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.

How it is built

Terminal lines, metrics and changelog entries are plain 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 Runway

npx shadcn@latest add @charcoal/runway

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 Runway for a client site?
Yes. A Pro seat covers unlimited personal and commercial projects, client work included.
Is Runway 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 Terminal: Developer-tool hero: beams on a grid, and a terminal that types your install and dev commands.
  • Features Metrics: Outcome numbers that count up, each with a trend sparkline and a sourced footnote.
  • Stats Live: Dotted world map with live pings, a running counter and a feed of what just happened where.
  • Pricing Usage: Usage-based pricing: drag the slider and the monthly estimate rolls to match.
  • Changelog: Changelog with sticky version dates, release notes, screenshots and New, Improved and Fixed filters.
  • CTA Terminal: Developer CTA with a copyable install command beside a terminal that runs it.
  • Footer Newsletter: Big footer led by a newsletter sign-up, then the sitemap, socials, theme toggle and live status.

Runway as Markdown