Feedback
Feedback components communicate system status to users. Use appropriate types and timing.
Alerts
Inline alerts for important messages that require attention.
Appointment confirmed!
Your session is scheduled for March 5th at 2:00 PM.
Session credits running low
You have 2 credits remaining. Purchase more to continue booking sessions.
Payment failed
We couldn't process your payment. Please check your card details and try again.
New feature available
You can now message your therapist directly from the portal. Try it out!
Alert: rounded-xl bg-[status]/10 border border-[status]/20 p-4Progress Bars
Show progress for multi-step processes or loading states.
Track: h-2 rounded-full bg-bg-secondary | Fill: bg-gradient-to-r from-surf to-tideSpinners
Loading indicators for async operations.
Spinner: border-2 border-tide/30 border-t-surf rounded-full animate-spinStep Indicators
Multi-step progress indicators for wizards and onboarding flows.
Complete intake form
Tell us about yourself and your therapy goals.
Therapist matching
We're finding the perfect therapist for you.
Schedule evaluation
Book your first session with your therapist.
Skeleton Loaders
Placeholder content while data is loading.
Container: animate-pulse | Shapes: bg-bg-secondary roundedEmpty States
Friendly messages when there's no content to display.
No results found
Try adjusting your search or filters.
All caught up!
You have no new messages.
Usage Guidelines
- Use semantic colors for alert types
- Provide clear, actionable messaging
- Show loading states for async operations
- Use skeleton loaders instead of spinners for content
- Include helpful CTAs in empty states
- Use alerts for non-essential info
- Show spinners longer than necessary
- Leave users without feedback on actions
- Use technical jargon in error messages
- Show empty states without context