useEditorConfiguration and organised by category. When used in the editor, they render with mock data so you can preview the layout without needing a live API connection.
Categories and components
Home Page
| Component | Description |
|---|---|
| HomePage | The complete home page with toggleable hero, plans, events and locations sections. Configure which sections to show, heading sizes, and custom class names per section. |
| HomePageHero | The hero area with main text, sub-text and search box. Can be used standalone or as part of HomePage. |
| NavBar | The portal navigation bar. Supports fixed/floating header and transparent/solid styles. |
Dashboard
| Component | Description |
|---|---|
| PersonalDashboard | Complete member dashboard container. |
| PersonalDashboardHeader | Dashboard welcome header area. |
| DashboardHero | Hero area for the dashboard page. |
| QuickActions | Grid of quick-action buttons (book, pay, etc.). |
| AnnouncementsBanner | Displays active announcements from the dashboard. |
| OnBoardingSection | Step-by-step onboarding guide for new members. |
| StatisticsSection | Member usage statistics display. |
| WeeklyAgendaCalendar | Weekly calendar view of the member’s upcoming bookings. |
| DashboardFeaturedArticles | Highlighted blog articles on the dashboard. |
| DashboardFeaturedEvents | Highlighted upcoming events on the dashboard. |
Bookings
| Component | Description |
|---|---|
| ResourceList | Browsable list of bookable resources. |
| ResourceCalendar | Calendar view for browsing and booking resources. |
| BookingEdit | Booking creation and editing form. |
| BuildingAvailabilitySection | Real-time availability display for building/location. |
| PredictiveBookings | AI-suggested bookings based on member usage patterns. |
Events
| Component | Description |
|---|---|
| EventPageRouter | Event listing with routing for event detail views. |
| FeaturedEventsList | Curated list of featured events. |
| UpcomingEvents | Chronological list of upcoming events. |
| EventDetailsPage | Full event detail page. |
| EventCheckoutPage | Event purchase checkout flow. |
| SimpleEventsGrid | Simple grid display of events. |
Courses
| Component | Description |
|---|---|
| CoursePageRouter | Course listing with routing for detail views. |
| FeaturedCourseList | Curated list of featured courses. |
| CoursesList | Complete list of available courses. |
| CourseDetailsPage | Full course detail page. |
| CourseCheckoutPage | Course purchase checkout flow. |
Articles (Blog)
| Component | Description |
|---|---|
| BlogPageRouter | Blog listing with routing for post detail views. |
| FeaturedBlogList | Curated list of featured articles. |
| RecentBlogPosts | Chronological list of recent articles. |
| BlogPostDetailsPage | Full article detail page. |
Store
| Component | Description |
|---|---|
| SimpleProductGrid | Grid display of purchasable products. |
| SimplePlansGrid | Grid display of available membership plans. |
| ProductCheckoutPage | Single product checkout flow. |
| ProductsCheckoutPage | Multi-product checkout flow. |
My Activity
| Component | Description |
|---|---|
| MyBookingsSection | Member’s booking history and upcoming bookings. |
| MyInvoicesSection | Member’s invoices and payment history. |
| MyVisitorsSection | Member’s visitor registrations. |
| MyDeliveriesSection | Member’s parcel/delivery log. |
| MyEventsSection | Member’s event registrations. |
| MyCoursesSection | Member’s course enrolments. |
| MyPlansSection | Member’s active plans and subscriptions. |
Team
| Component | Description |
|---|---|
| TeamMembersSection | Team member list and management. |
| TeamBookingsSection | Team booking overview. |
| TeamAttendanceSection | Team attendance tracking. |
| TeamPermissionsSection | Team permission management. |
Personal / Profile
| Component | Description |
|---|---|
| PersonalInformationSection | Member profile editing form. |
| BillingInformationSection | Billing address and details. |
| BillingCardSection | Payment method management card. |
| EInvoicingCardSection | E-invoicing configuration card. |
| ProfessionalProfileSection | Public professional profile editing. |
| SettingTabsSection | Account settings tabbed interface. |
| CredentialsSection | Password and security credentials. |
| IntegrationsSection | Third-party integration settings. |
| VoManageSection | Virtual office management interface. |
Community
| Component | Description |
|---|---|
| CommunityBoardListSection | Community discussion board. |
| DirectorySection | Member directory listing. |
| PerksSection | Available perks and benefits. |
| Newsletter | Newsletter subscription form. |
Support
| Component | Description |
|---|---|
| FaqPageSection | Frequently asked questions. |
| HelpDeskSection | Help desk / support ticket interface. |
| ContactUsPage | Contact form page. |
| LocationsGrid | Grid of all business locations. |
Mock data in the editor
When editing a page, section components render with mock data instead of making live API calls. This means you see realistic placeholder content (sample events, bookings, members, etc.) that lets you design the layout without needing actual data. Most section components include awithMockData toggle in their properties. This defaults to true in the editor. When disabled, the component attempts to fetch live data — useful for testing with your actual data during local development.
Default page layouts
Every built-in page has a default layout — a pre-configured arrangement of section components. For example:- Home defaults to a HomePage component with hero, plans, events and locations.
- Personal Dashboard defaults to DashboardHero, QuickActions, AnnouncementsBanner, WeeklyAgendaCalendar, and more.
- Blog defaults to NavBar + BlogPageRouter + Newsletter.