Component Style Guide
A preview of all reusable UI components built for the Nezo Admin panel.
Buttons
FormattedDate
A semantic date display component that respects user preferences. Uses <time> element for accessibility. Change format in Settings.
Current Format: short
Format Override
Badges
Detail Page Components
Shared components for building consistent entity detail pages (bookings, customers, vendors, stays, inquiries).
TabNav — Unified Tab Navigation
Active tab: overview
Contact Information
Quick Stats
Form Controls
This field is required
Counter Input
A flexible numeric counter for quantities like adults, children, rooms, extra beds, etc.
Basic Usage
Sizes & States
At least 1 required
Children Input
Capture number of children and their ages with an intuitive 3-state flow: Empty → Editing → Review.
Empty State
Click "Add Child" to start
Interactive Demo
Add children, set ages, then click "Done"
2 children
Current State
Count: 2
Ages: [5, 8]
💡 Flow: Empty → Add Child → Edit ages → Done → Review → Edit again
States
2 children
At least 1 child required
Room Occupancy
A flexible multi-room selector with adults/children per room. Features 3-state flow: Empty → Editing → Review.
Empty State
Click "Add Rooms" to start
Interactive Demo
Add rooms, set guests, then click "Done"
1 Room • 2 Adults • 1 Child
Current State
Rooms: 1
Room 1: 2A, 1C (ages: 5)
💡 Flow: Empty → Add Rooms → Configure → Done → Review → Edit
Disabled State
1 Room • 2 Adults • 1 Child
With Error
At least 1 room is required
Guest Summary
A read-only display component for showing room configurations. Used in booking detail pages and other summary views.
Vertical Layout (Default)
Horizontal Layout
Single Room
Empty State
Vehicle Selector
A flexible multi-vehicle selector with recommendations based on guest count. Features 3-state flow: Empty → Editing → Review.
Empty State
Click "Add Vehicles" to start
Interactive Demo
Shows recommendation for 8 guests
2 Vehicles • 14 Seats
Current State
Vehicles: 1
Entry 1: Innova Crysta × 2 (14 seats)
💡 Flow: Empty → Add Vehicles → Configure → Done → Review → Edit
Vehicle Summary
A read-only display component for showing vehicle configurations. Used in booking detail pages and other summary views.
Vertical Layout (Default)
Horizontal Layout
Single Vehicle
Empty State
Custom Form Components
CustomSelect
RadioGroup & Checkbox
Specialized Selects
Country Select
Currency Select
Language Select
Phone Input
Phone Number with Country Code
Usage Notes
- • Click the flag/dial code to change country
- • Search by country name or dial code
- • Full number shown below the input
- • Binds separately:
value(number) andcountryCode
Filter Bar Pattern
A flexible filter row combining SearchInput and CustomSelect dropdowns. Used on list pages like Inquiries, Bookings, etc.
Existing InquiryFilterBar Component
This is the existing filter bar component from the inquiries route for comparison.
Date Pickers
Single Date Picker
Please select a valid date
Date Range Picker — Stays (nights)
Date Range Picker — Vehicles (days)
Date Range Picker — Tours (custom label)
Date Time Picker
Segmented Date + Time Picker
States
Please select date and time
Time Picker
Time Only Picker
States
Please select a time
Data Display
| Name | Role | Status | Actions | |
|---|---|---|---|---|
| John Doe | john@example.com | Admin | Active | |
| Jane Smith | jane@example.com | Manager | Pending | |
| Bob Wilson | bob@example.com | Sales | Inactive |
Feedback & Overlays
No Records Found
You haven't added any data to this section yet.