Mobile-First Healthcare Design System
Every component is built using native Laravel Blade, Tailwind CSS tokens, and lightweight Alpine.js for instantaneous mobile responsiveness and accessibility.
1. Buttons (x-button)
Variants: primary, secondary, outline, danger, ghost, light across sm, md, lg, and icon sizes.
2. Badges & Indicators (x-badge)
Status dots, role indicators, and verification tags.
3. Form Controls (x-input, x-select)
Touch-friendly inputs with icons, validation error states, and helpers.
As shown on Government ID
Please enter a valid healthcare provider email address.
4. Alerts (x-alert) & Toasts
Notification banners and dispatchable client toast events.
Appointment Confirmed
Document Verification In Progress
Emergency Service Alert
5. Modal Dialogs (x-modal)
Accessible Alpine-powered bottom sheets and dialogs.
6. Skeleton Loaders (x-skeleton-loader)
Prevent CLS and provide instant app-like visual feedback while loading dynamic data.
7. Avatars (x-avatar)
Automatic initials generator with online presence indicators.