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

   bashCopy

   npm install react-component-kit-ui

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

   app/page.tsx

   tsxCopy

   import { LandingPage } from 'react-component-kit-ui/templates/saas-hotel';
   
   export default function Page() {
     return <LandingPage />;
   }

   app/sign-in/page.tsx

   tsxCopy

   import { SignInPage } from 'react-component-kit-ui/templates/saas-hotel';
   
   export default function Page() {
     return <SignInPage />;
   }

   app/app/page.tsx

   tsxCopy

   import { DashboardPage } from 'react-component-kit-ui/templates/saas-hotel';
   
   export default function Page() {
     return <DashboardPage />;
   }

   app/app/reservations/page.tsx

   tsxCopy

   import { ReservationsPage } from 'react-component-kit-ui/templates/saas-hotel';
   
   export default function Page() {
     return <ReservationsPage />;
   }

   app/app/rooms/page.tsx

   tsxCopy

   import { RoomsPage } from 'react-component-kit-ui/templates/saas-hotel';
   
   export default function Page() {
     return <RoomsPage />;
   }

   app/app/guests/page.tsx

   tsxCopy

   import { GuestsPage } from 'react-component-kit-ui/templates/saas-hotel';
   
   export default function Page() {
     return <GuestsPage />;
   }

   app/app/reports/page.tsx

   tsxCopy

   import { ReportsPage } from 'react-component-kit-ui/templates/saas-hotel';
   
   export default function Page() {
     return <ReportsPage />;
   }

   app/app/settings/page.tsx

   tsxCopy

   import { SettingsPage } from 'react-component-kit-ui/templates/saas-hotel';
   
   export default function Page() {
     return <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.

   tsxCopy

   import { DashboardPage, lobbyData, type LobbyData } from 'react-component-kit-ui/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' },
   };
   
   export default function Page() {
     return <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