Skip to content
Grav 2.0 is officially stable. Read the announcement →
Premium / Typhoon Theme
Premium Theme · v4.3.10

Typhoon Theme

High-performance TailwindCSS theme for Grav

The most powerful theme ever built for Grav. Typhoon is built on top of the latest Tailwind 4 CSS framework, and provides a flexible navigation architecture that allows for both dropdown and side-menu setups. It has the ability to provide customizable Hero sections on any page, and lets you easily configure logo and colors directly from the admin options.

Grav 1.7+

Now available with Ready-to-Run prebuilt Grav install zips with Typhoon theme, sample skeleton package content, all plugins and licenses ready to go. Just unzip and go! Find the download links alongside your licenses in the license manager.

Typhoon theme includes a complimentary license to SVG Icons and Lightbox Gallery plugins.

Everything you need. Nothing you don’t.

Over 28 distinct features and integrations, out of the box.

01
Built on top of new latest Tailwind 4 CSS framework
02
Newly optimized to be fully Tailwind 4 compatible and using latest best practices
03
Modern Vite-powered build system
04
Ability to watch for file changes and rebuild CSS instantly on-the-fly in development mode
05
Includes Grav-friendly setup to create high performance and optimized 'production' CSS files
06
Fully responsive and built mobile-first
07
Supports both Light & Dark themes
08
Fully multi-language capable and translatable
09
Can use system settings, a specific variation, or user controlled light/dar theme preference
10
User configurable 'primary' and 'default text' colors
11
NEW
Static and Fixed header options
12
NEW
Scrollspy on-page navigation for modular pages with a sticky bar that highlights the active section while keeping the main menu intact
13
Flexible dropdown menu and side navigation support
14
Built-in menu support for Login and Langswitcher plugins
15
Ability to set custom icons on menu items
16
new onSiteThemeMenu() event to programatically hook into the menu system
17
Home only + Site-wide Notices feature in theme configuration
18
Responsive mobile menu with support for multiple levels of navigation
19
Customizable logo including dynamic SVG logo support
20
Configurable menu bar (auto, dark, light, transparent)
21
Powerful Hero configuration for any page not just modular pages
22
Built-in support for SimpleSearch plugin with live-search field for blog
23
Fully configurable footer menu, social links, and copyright
24
Clean default typography
25
Blog Site example showcasing posts types
26
One-page Site example showcasing the power of modular pages
27
Rockets Site example with dropdown and sidemenu examples
28
One-Page modular example with Lightbox Gallery gallery support + Contact form
Dynamic Theme Chooser

Dynamic Theme Chooser

Typhoon has full support for light and dark themes. You can select a default value for you preferred style as well as the ability to let the Operating System choose based on the system configuration setting. You can also allow your users to change the theme with via a theme selection option in the footer of every page. This value is stored in the browser to ensure you preference is used throughout the site.

Powerful Menu System

Typhoon has a powerful menu system that automatically treats child-pages as dropdown menus. However, Typhoon also has the ability to treat child-pages as a secondary side menu and this behavior is configurable globally. You can also override the global behavior, and force a page's children to be displayed in the secondary side menu. This provides a very flexible and powerful menu system.

Powerful Menu System
New Fixed Header Option

New Fixed Header Option

Typhoon now features a powerful fixed header option that fully support light and dark modes and works with all the flexible header options including: auto (same as body color), transparent and custom header colors. Combined with new options to specify the height of the header, Typhoon's menu is fully configurable even on a page-by-page basis.

Event-based Login + Langswitcher Support

Taking advantage of Typhoons powerful and flexible menu system, it also now includes a new onSiteThemeMenu() event that allows you to hook into the menu system. Typhoon already provides integrated support for Login and Langswitcher plugins and you can add your own support via Theme or custom plugins with this event. Check the docs for detailed information.

Event-based Login + Langswitcher Support
Mobile Navigation

Mobile Navigation

With full support for nested menu levels built-in to it's mobile-friendly menu, Typhoon is equipped to handle all of your responsive needs. Each level of menu hierarchy is expandable which allows for easy and intuitive navigation no matter the device you are using.

Quick Customization

Quickly and easily customize your Hero for a specific page. In fact Typhoon has the ability to override almost everything at the page-level. So if you want the primary color to be red instead of the default blue, you can even customize that for a page, and all the children of that page will also inherit that setting. It's almost too easy!

Quick Customization

A peek at sites running Typhoon Theme.

Frequently Asked Questions

The most commonly asked questions about the Typhoon Grav theme

What is coming soon for Typhoon?

We have lots of great features planned for upcoming releases of Typhoon. Once purchased, you will be able to update Typhoon whenever you like to get access to the new functionality. Below is a working list of things we plan on bringing to Typhoon in the near future:

  • Fixed header option
  • Scrollspy on-page navigation
  • Animated hero options
  • Support for randomly rotating hero images
  • Background video in hero
  • Slide-in navigation
  • Option for full time 'responsive' navigation
  • Login support
  • Configurable favicon support
  • Improved multi-language support
  • Improved form styling options
Can I use Typhoon theme on multiple sites?

Per the Grav Premium license Grav Premium License, you need to have a license for each use

Can I extend Typhoon theme or modify it?

You can both extend and/or modify Typhoon. You will still need a dedicated Typhoon license for each site however, even if you are modifying it.

Where can I download Skeleton packages for Typhoon?

Check out the Skeleton Packages section of the documentation.

Can Typhoon display using the theme that matches my system settings?

Absolutely, there are 3 settings for the theme: light, dark, and system. The system option will dynamically set the theme based on your system's preference for light or dark, or even a dynamic setting based on the time of day.

$50 Buy Now

Typhoon Theme Changelog

v4.3.10

2 weeks ago

    • The Wrapper Classes setting now explains that only classes already compiled into the shipped stylesheet take effect, and which ones those are.

v4.3.9

3 weeks ago

    • Form fields no longer show their dark-mode colours while the site is in light mode.
    • The compiled stylesheet is now generated by the tailwind4 plugin, so it stays in step with the theme's own sources.

v4.3.8

1 month ago

    • Tag lists now respect an optional filterend limit so you can cap how many tags are shown (#219)

v4.3.7

1 month ago

    • Added a horizontal image alignment option to the hero (left/center/right), complementing the existing vertical alignment so the focal point of a cropped hero image can be set on both axes (#605)

v4.3.6

2 months ago

    • Fixed typography (prose) styles not applying to page content, so headings, paragraphs, lists, and code in the main content area rendered unstyled. The compiled CSS shipped in 4.3.5 had the descendant combinator stripped from every prose selector (.prose :where(h1) became .prose:where(h1), which matches nothing); the CSS has been recompiled correctly.

v4.3.5

2 months ago

    • Added a tailwind4: contract to the theme config, so the Tailwind4 plugin can compile the theme's CSS from PHP with no Node/npm toolchain. The npm build scripts still work; both produce the same output

v4.3.4

2 months ago

    • Footer social links now use the svg-icons brands icon set for every network, so all icons render in a single consistent badge style; legacy <network>__brands selections keep working (#604)
    • Added X, TikTok, Threads, Bluesky, Mastodon, Discord, Twitch, WhatsApp, Telegram, and Reddit to the footer social network options
    • Fixed footer social icons for YouTube and Vimeo being barely visible, and 500px and GitBook not rendering at all, caused by the brand color classes never being compiled into the theme CSS (#604)
    • Fixed the hero overlay gradient opacity and direction settings being ignored when set as a comma-separated value, so the two opacity stops now apply correctly (#602)

v4.3.3

2 months ago

    • Declared Grav 2.0 compatibility in the theme blueprint; Typhoon now officially supports both Grav 1.7 and 2.0

v4.3.2

2 months ago

    • Scrollspy on-page navigation now auto-centers the active section in the bar as you scroll, so the current section stays visible on narrow screens where the bar overflows horizontally (#595)
    • Added "scroll to top" and "scroll to bottom" controls to the scrollspy bar
    • Fixed the scrollspy bar sometimes failing to auto-hide when scrolling quickly to the top, caused by the Alpine throttle dropping the trailing scroll event; added a scrollend handler to settle the final state (#595)
    • Fixed the last section never highlighting when scrolled to the very bottom of the page

v4.3.1

2 months ago

    • Upgraded to latest Tailwind + other libraries
    • Added user/plugins to resolve-paths.js to fix relative path resolution for plugins
    • Fixed the language switcher menu generating the wrong default-language link when include_default_lang is off, so switching back to the default language now works (#591)
    • Fixed a bogus language switcher entry appearing on the scrollspy on-page navigation bar (#590)