Design System
A collection of reusable UI components built with consistent design tokens. Browse the components below or use the sidebar to navigate.
Accordion
Expandable content sections for organizing information in a compact layout.
Alert
Contextual feedback messages for success, warning, error, and info states.
Avatar
User profile images and initials placeholders in multiple sizes and colors.
Badge
Status indicators and counters in various colors and sizes.
Breadcrumb
Navigation trail showing the current page location within a hierarchy.
Button
Primary, secondary, and tertiary button styles with multiple sizes and states.
Button Group
Group related buttons together with shared borders and connected styling.
Checkbox
Selection controls for single or multiple options with indeterminate state.
Command Menu
Keyboard-driven command palette for quick actions and navigation.
Date Picker
Calendar-based date selection with range support and input field integration.
File Upload
Drag-and-drop and click-to-upload file selection with progress indicators.
Header Navigation
Top-level navigation bar with links, dropdowns, and responsive layout.
Inline CTA
Contextual call-to-action banners for promotions and feature highlights.
Input
Text inputs with labels, hints, validation states, and icon support.
Modal
Overlay dialogs for confirmations, forms, and focused content.
Page Header
Consistent page titles with supporting text, breadcrumbs, and action slots.
Progress Bar
Visual indicators for task completion and loading states.
Progress Steps
Step indicators with text, icon, and line connector variants in horizontal and vertical layouts.
Sidebar Navigation
Vertical navigation menus with grouping, icons, and active state indicators.
Slider
Range inputs for selecting numeric values within a defined range.
Slide-Out Menu
Off-canvas panel for detailed content, forms, and secondary navigation.
Table
Data tables with sorting, selection, pagination, and responsive layout.
Tabs
Tabbed interface for switching between content panels within a view.
Tag
Compact labels for categorization, filtering, and metadata display.
Toggle
On/off switches for binary settings with smooth transitions.
Tooltip
Contextual information popups triggered on hover or focus.
UX Patterns
Full-page demos showing enterprise UX patterns in action with hospital mock data.
Patient Directory
List page with search, filters, sorting, pagination, bulk actions, and DataTable.
P2Patient Detail
Detail view with summary card, tabbed content, vitals, appointments, and timeline.
P4Registration Form
Multi-section form with guide panel, progress tracking, and validation.
P10Registration Wizard
Step-by-step guided form with progress indicator, review step, and draft saving.
P11Hospital Dashboard
Overview page with KPI metrics, recent activity feed, and today's schedule.
P13Audit Trail
Timeline-based activity log with filtering, action types, and field-level diffs.
P18Task Board
Kanban board with draggable cards, priority badges, and task detail slideout.