Skip to main content

Healing UI Components

A collection of React components for documenting healing practices and adding healing properties to any project. Includes components for evidence presentation, cultural attribution, and drop-in integration patterns for apps, games, and narratives.

Available Components​

EvidenceCitation

Display research findings with clear evidence levels, sources, and limitations.

TraditionAttribution

Honor traditional healing knowledge with proper cultural attribution and respect.

HealingProgress

Visualize healing journeys and skill development lifecycles.

PracticeSelector

Interactive selection interface for choosing healing modalities.

SafetyConsent

Informed consent dialogs for practices requiring disclaimers.

BreathworkTimer

Phase-aware WHM breathing timer with safety gates. Counts UP to prevent competitive holding.

GroundingAnchor

Pocket Exit and Reintegration Ritual grounding protocols for deautomatization practices.

Practice Components (v1.1.0)​

New component specifications for practice-specific UI elements. These extend the core component library with specialized interfaces for sound, movement, and sleep practices.

SoundGuide

Audio-visual guide for sound healing practices — frequency visualization, toning cues, tradition-specific notation, and hearing safety gates.

MovementGuide

Adaptive movement instruction with standing, seated, lying, and wheelchair modification toggles. Pain boundary awareness built in.

SleepTimer

Wind-down timer with progressive dimming, screen paradox acknowledgment, and gentle audio fade. Integrates with sleep protocol templates.

Component Specs

Practice component specifications are available in the skill system at build/components/sound-guide.md, build/components/movement-guide.md, and build/components/sleep-timer.md. These define the full API surface, accessibility requirements, and design token usage for implementation.

Integration Components​

Drop-in components for adding healing properties to any project. These work standalone and can be integrated into apps, games, and narratives.

import {
  BreathePause,
  GentleError,
  WellbeingCheck,
  MindfulTransition,
  CalmLoading,
  HealingJourney,
  ProgressCelebration,
  NarrativeChoice,
  SafeSpace,
} from '@site/src/components/integration';

BreathePause

Intentional pause overlays with guided breathing before critical actions.

GentleError

Compassionate error states with tone variants and actionable suggestions.

WellbeingCheck

Periodic wellness check-in notifications with configurable positioning.

MindfulTransition

Aware state changes that give users time to adjust to new contexts.

CalmLoading

Peaceful loading states that turn waiting time into breathing space.

HealingJourney

Progress visualization with milestones and encouraging messages.

ProgressCelebration

Three-phase achievement recognition: celebrate → reflect → continue.

NarrativeChoice

Emotion-coded story choices with skip options for difficult moments.

SafeSpace

In-experience refuge with grounding activities and support resources.

See Integration Patterns for usage guides.

Design Principles​

Evidence-First​

All components are designed to make evidence transparency easy and natural. Research findings include:

  • Clear evidence levels (strong, moderate, preliminary, traditional)
  • Sample sizes and study quality indicators
  • Explicit limitations and caveats
  • Direct links to source materials

Accessibility​

Every component follows WCAG 2.1 Level AA standards:

  • Semantic HTML with proper ARIA labels
  • Keyboard navigation support
  • Screen reader friendly
  • Focus management and visual indicators
  • Color contrast compliance

Cultural Ethics​

Traditional knowledge components ensure:

  • Proper attribution to source traditions
  • Clear marking of open vs closed practices
  • Respect for cultural protocols
  • Acknowledgment of adaptation and modification

Visual Consistency​

Components use the healing design system:

  • Semantic color palette (healing green, sacred gold, calm blue)
  • Consistent spacing and typography
  • Smooth transitions and animations
  • Gentle glows and shadows for hierarchy

Using Components in MDX​

Components can be imported and used directly in your MDX documentation:

import { EvidenceCitation } from '@site/src/components/healing';

<EvidenceCitation
  level="strong"
  title="Benefits of Meditation for Anxiety"
  author="Goyal M, et al."
  date="2014"
  domain="Psychiatry"
  snippet="Meditation programs can result in small to moderate reductions in anxiety."
  sampleSize={3515}
  sourceUrl="https://pubmed.ncbi.nlm.nih.gov/24395196/"
/>

Component Props Reference​

Each component is fully typed with TypeScript. See individual component pages for detailed prop tables and examples.

Installation​

Components are part of the healing swarm skills website. They require:

  • React 18+
  • Tailwind CSS with healing design tokens
  • Utility functions from @site/src/lib/utils
tip

Check out individual component pages for live demos, complete prop documentation, and usage examples.