Живой просмотр

Страницы

Каждая страница — настоящий интерактивный предпросмотр, корзина общая для всех.

Что внутри

• 8 страниц: лендинг, вход и приложение из 6 экранов
• Шахматка, доска уборки и заселение на ресепшене
• Сортируемые таблицы с поиском, фильтрами и массовыми действиями
• 13 SVG-графиков из библиотеки
• Настройки с ролями, приглашениями и использованием тарифа
• Светлая и тёмная тема с переключателем

Установка и использование

1. Установите пакет

   bashCopy

   npm install react-component-kit-ui

2. Создайте по маршруту для каждой страницы шаблона

   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. Подключите свой каталог, валюту и маршруты

   Возьмите демо-магазин за основу и замените нужное. Товары принимают реальное фото или одну из 16 встроенных иллюстраций.

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

Новые e-commerce компоненты 13

Созданы для этого шаблона и доступны в библиотеке по отдельности.

Повторно используемые компоненты

Существующие компоненты, из которых собран шаблон.

• 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