🧬 UI Component Library Demo

Explore all the professional components built for the AI Nutrition Platform. This showcases the complete component library including layout, analysis, and loading states.

🎛️ Demo Controls

⚠️ Warning System

Pregnancy Considerations

Pregnancy & Breastfeeding

High doses of Vitamin D during pregnancy may cause developmental issues. Pregnant women should not exceed 600 IU daily without medical supervision.

Drug Interaction Warning

Drug Interaction

This supplement may interact with blood thinning medications (warfarin, heparin). Monitor INR levels closely and consult your healthcare provider.

Emergency Contact

If experiencing unusual bleeding or bruising, contact emergency services immediately.

911

More Information

NIH Drug Interaction Database

Dosage Exceeds Upper Limit

Dosage Warning

The recommended dosage (5000 IU) exceeds the tolerable upper intake level (4000 IU). Consider reducing dosage or consulting a healthcare provider.

🧬 Nutrient Analysis Display

Vitamin D3 (Cholecalciferol)

Also known as: Cholecalciferol, Vitamin D₃

vitamin

Moderate

5000 IU

Per Serving

833%

Daily Value

8/10

Bioavailability

RDA (Adults 19-70)

600 IU

200% of recommended daily allowance

Upper Limit

4000 IU

100% of upper safety limit

📚 Academic References

References & Sources

Sorted by credibility

Vitamin D Fact Sheet for Health Professionals

National Institutes of Health Office of Dietary Supplements

Government SourceExcellentFree

Aug 2023

Vitamin D and Health

New England Journal of Medicine

Journal ArticleExcellentSubscription

Mar 2023

Vitamin D supplementation for prevention of mortality in adults

Cochrane Database of Systematic Reviews

Clinical StudyExcellentSubscription

Jan 2023

Note: These references are provided for educational purposes. Always verify information with current medical literature and consult healthcare professionals for medical advice. Access to some sources may require subscriptions or institutional access.

✨ Component Features

🎨 Design Features

✅ Framer Motion animations
✅ Radix UI primitives
✅ Professional medical styling
✅ Mobile-first responsive
✅ Dark/light mode ready

♿ Accessibility

✅ ARIA labels and roles
✅ Keyboard navigation
✅ Screen reader support
✅ Focus management
✅ Color contrast compliance

📋 TypeScript

✅ Comprehensive interfaces
✅ JSDoc documentation
✅ Strict type checking
✅ Error handling
✅ Optional props

🔧 Functionality

✅ Loading and empty states
✅ Error boundaries
✅ Interactive animations
✅ Medical compliance
✅ Professional citations

💡 Usage Examples

Code Examples

NutrientInfo Component:

<NutrientInfo 
  nutrient={vitaminD3Data}
  detailed={true}
  animate={true}
  onInteraction={(action, id) => handleNutrientAction(action, id)}
/>

Warning Banner:

<WarningBanner 
  warning={{
    title: "Drug Interaction Warning",
    severity: "danger",
    category: "interaction",
    message: "May interact with blood thinners"
  }}
  onDismiss={(id) => handleDismiss(id)}
/>