Vista previa en vivo

Páginas

Cada página es una vista previa real e interactiva: el carrito se comparte entre todas.

Qué incluye

• 8 páginas: landing, acceso y una app de 6 pantallas
• Rack de habitaciones, tablero de limpieza y check-in en recepción
• Tablas ordenables con búsqueda, filtros y acciones masivas
• 13 gráficos SVG reutilizados de la librería
• Ajustes con roles de equipo, invitaciones y uso del plan
• Modo claro y oscuro con selector en la barra superior

Instalar y usar

1. Instala el paquete

   bash Copy

   npm install astro-component-kit

   npm install astro-component-kit

2. Crea una página de Astro por cada página de la plantilla

   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. Usa tu propio catálogo, moneda y rutas

   Parte de la tienda demo y reemplaza lo que necesites. Los productos aceptan una imagen real o una de las 16 ilustraciones incluidas.

   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" />

Componentes e-commerce nuevos 13

Creados para esta plantilla y disponibles por separado en la librería.

Componentes de la librería reutilizados

Componentes existentes con los que se monta la plantilla.

• 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