Live preview

Pages

Every page is a real, interactive preview — the cart is shared between them.

What is included

• 8 pages: landing, sign-in and a 6-screen app
• Room rack, housekeeping board and front-desk check-in
• Sortable data tables with search, filters and bulk actions
• 13 SVG charts reused from the library
• Settings with team roles, invites and plan usage
• Light and dark mode with a topbar toggle

Install & use

1. Install the package

   bash Copy

   npm install astro-component-kit

   npm install astro-component-kit

2. Create one Astro page per template page

   src/pages/index.astro

   astro Copy

   ---
   import { LandingPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <LandingPage />

   --- import { LandingPage } from 'astro-component-kit/templates/saas-hotel'; --- <LandingPage />

   src/pages/sign-in.astro

   astro Copy

   ---
   import { SignInPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <SignInPage />

   --- import { SignInPage } from 'astro-component-kit/templates/saas-hotel'; --- <SignInPage />

   src/pages/app/index.astro

   astro Copy

   ---
   import { DashboardPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <DashboardPage />

   --- import { DashboardPage } from 'astro-component-kit/templates/saas-hotel'; --- <DashboardPage />

   src/pages/app/reservations.astro

   astro Copy

   ---
   import { ReservationsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <ReservationsPage />

   --- import { ReservationsPage } from 'astro-component-kit/templates/saas-hotel'; --- <ReservationsPage />

   src/pages/app/rooms.astro

   astro Copy

   ---
   import { RoomsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <RoomsPage />

   --- import { RoomsPage } from 'astro-component-kit/templates/saas-hotel'; --- <RoomsPage />

   src/pages/app/guests.astro

   astro Copy

   ---
   import { GuestsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <GuestsPage />

   --- import { GuestsPage } from 'astro-component-kit/templates/saas-hotel'; --- <GuestsPage />

   src/pages/app/reports.astro

   astro Copy

   ---
   import { ReportsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <ReportsPage />

   --- import { ReportsPage } from 'astro-component-kit/templates/saas-hotel'; --- <ReportsPage />

   src/pages/app/settings.astro

   astro Copy

   ---
   import { SettingsPage } from 'astro-component-kit/templates/saas-hotel';
   ---
   
   <SettingsPage />

   --- import { SettingsPage } from 'astro-component-kit/templates/saas-hotel'; --- <SettingsPage />

3. Use your own catalogue, currency and routes

   Spread the demo store and replace what you need. Products accept a real image or one of 16 built-in illustrations.

   astro Copy

   ---
   // src/pages/app/index.astro — pass your own data (e.g. fetched from your API at build time)
   import { DashboardPage, lobbyData, type LobbyData } from 'astro-component-kit/templates/saas-hotel';
   
   const data: LobbyData = {
     ...lobbyData,
     workspace: { name: 'Casa Alba', plan: 'Starter', initials: 'CA' },
     user: { name: 'Marta Gil', role: 'Owner', email: 'marta@casaalba.com' },
   };
   ---
   
   <DashboardPage data={data} theme="auto" />

   --- // src/pages/app/index.astro — pass your own data (e.g. fetched from your API at build time) import { DashboardPage, lobbyData, type LobbyData } from 'astro-component-kit/templates/saas-hotel'; const data: LobbyData = { ...lobbyData, workspace: { name: 'Casa Alba', plan: 'Starter', initials: 'CA' }, user: { name: 'Marta Gil', role: 'Owner', email: 'marta@casaalba.com' }, }; --- <DashboardPage data={data} theme="auto" />

New e-commerce components 13

Built for this template and available on their own in the library.

Reused library components

Existing components the template is assembled from.

• KPI Stat Tile
• Stacked Area Chart
• Gauge Chart
• Pie Chart
• Grouped Bar Chart
• Forecast Line Chart
• Heatmap Chart
• Funnel Chart
• Segmented Bar Chart
• Horizontal Bar Chart
• Metric Delta Table
• Status Timeline Feed
• Animated Input
• Modern Select
• Hero Dashboard Preview
• Logo Wall Grid
• Feature Icon Grid
• How It Works Steps
• Stats Counter Band
• Pricing Toggle Cards
• Testimonial Carousel
• FAQ Two Column
• Footer Mega Section