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

   bashCopy

   npm install react-component-kit-ui

2. Create one route per template page

   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. 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.

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

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