Onyx

Author: Colorlib

Released: September 2026

License: CC BY 3.0

Credits: Images from Unsplash

The plumbing category is terrified of looking expensive, so almost every template shouts. Onyx does the opposite: a full-bleed dark photograph, one line of Playfair, and gold used only on buttons and rules. Portfolio tiles reveal their captions on hover and a before-and-after slider does the selling.

Built with Astro 7 and Tailwind CSS 4, Onyx delivers exceptional performance with lightning-fast page loads and a modern development experience. All content lives in simple YAML and Markdown files—edit text, reorder sections, or remove entire blocks without touching any code. The template includes a built-in blog with search and filtering, dark mode with persistent toggle, View Transitions for SPA-like navigation, and a fully responsive design that looks stunning on every device.

Construction Features

• Full-bleed dark hero with a single line of serif
• Before-and-after slider, keyboard accessible
• Portfolio collection with captions on hover only
• Consultation booking in place of a quote form
• Published price range, which premium studios usually hide
• Gold restricted to buttons, rules and the active nav item

Technical Highlights

• Lightning-fast performance with Astro static generation
• Utility-first styling with Tailwind CSS 4.x
• YAML + Markdown content system — edit everything without code
• Built-in blog with search, categories, and Markdown posts
• Dark mode with persistent toggle and flash-free loading
• View Transitions for SPA-like page navigation
• Fully responsive mobile-first design
• SEO optimized with Open Graph, structured data, and sitemap