Royale is a Restaurant Astro Website Template, luxury-first website template crafted exclusively for fine dining restaurants and elite private dining establishments. From the first scroll to the final reservation — every pixel exudes sophistication, elegance, and opulence.
Royale elevates your brand with a rich visual experience: gold accents, cinematic hero sections, handcrafted UI components, and visually immersive pages. Every detail is designed to reflect luxury — from the typography to the interactive animations.
Royale Supports Astro Version 6.x.x 🎉
Elegant gold-and-charcoal palette, refined typography (Playfair Display & Cormorant), custom animations, full-screen hero sections, curated photo galleries, and immersive private-dining showcases.
📦 Features Included
- Fine Dining Restaurant Homepage
- Menu showcase
- Private dining packages & detail pages
- Reservation CTA
- Gallery with GLightbox integration
- Chef spotlight & team sections
- Newsletter subscription
- Blog & article detail pages
- About, Terms, Privacy & Documentation
✨ Luxury Design DNA
- Gold & Charcoal Palette – 24K Gold accents on deep obsidian backgrounds
- Playfair Display + Cormorant Garamond – Typography that whispers haute cuisine
- Micro-Animations – Subtle gold glows, hover lifts, and fade-ins
- Hero Overlays – Cinematic full-screen imagery with velvet gradients
- Responsive Perfection – Flawless on every device displays
🚀 Reusable Components
No need to repeat code — every section is built as a component:
- HeroSection
- HeadingSection
- BlogCard
- PackageCard
- Newsletter
- SocialShare
- PrivateSection
- AuthorSection
- PageSection
- … and more
📝 Project Structure
public/ ├── img/ # All Source Images │ src/ ├── components/ # Reusable UI components ├── content/ # MDX content (blog, page, etc.) │ ├── blog/ # Article MDX files │ ├── private-dining/ # Package MDX files │ └── pages/ # All static pages ├── scripts/ # All Scripts ├── layouts/ # Layout components (MainLayout, etc.) ├── pages/ # Astro route files └── styles/ # Global styles and Tailwind config
📝 Built-in Content System (MDX / Markdown)
Update content without touching layouts:
- Blog posts
- Private dining packages
- Documentation, Terms, Privacy pages
⚙️ Quick Setup
1️⃣ Download & Open Royale Folder
2️⃣ Run npm install to install dependencies
3️⃣ Start dev server with npm run dev
4️⃣ Customize branding, colors, and content
5️⃣ Build for production with npm run build
🔄 Changelogs
VERSION 1.1.0 (March 2026)
Package Updated
@iconify-json/bi ^1.2.6 → ^1.2.7 @tailwindcss/vite ^4.1.13 → ^4.2.1 alpinejs ^3.14.9 → ^3.15.8 tailwindcss ^4.1.13 → ^4.2.1 astro ^5.1.7 → ^6.0.0 @astrojs/mdx ^4 → ^5
Content Config
src/content/config.ts → deleted src/content.config.ts → created with glob() type: "content" → removed z imported from astro/zod
Dynamic Routes
entry.slug → entry.id.replace(/\.mdx$/, "")
params: { slug: entry.id.replace(/\.mdx$/, "") }
Pages
entry.render() → render(entry)
Fonts API
Google Fonts `<link>` → Astro 6 built-in Fonts API.
