Skip to main content

​
Component Architecture Overview

Meelio’s component architecture is organized into a modular structure within the shared package, enabling code reuse across web and extension platforms.

​
Package Structure

All components are located in: 
packages/shared/src/components/
The shared package exports all components, hooks, stores, and utilities through a central index:
packages/shared/src/index.tsx
export * from "./api";
export * from "./components";
export * from "./context";
export * from "./data";
export * from "./hooks";
export * from "./i18n";
export * from "./lib";
export * from "./providers";
export * from "./stores";
export * from "./types";
export * from "./utils";

​
Component Categories

Meelio components are organized into three main categories:
Foundational, reusable UI components used throughout the application.Location: packages/shared/src/components/common/
​
Blurhash
Component
Progressive image loading with blur hash placeholders
​
ConnectionWarning
Component
Network connectivity status indicator
​
Container
Component
Layout wrapper with consistent spacing
Meelio brand logo component
​
RippleEffects
Component
Material Design-style ripple animations
​
ThemeProvider
Component
Application-wide theme context provider
Feature-specific components that implement Meelio’s main functionality.Location: packages/shared/src/components/core/

​
Backgrounds

  • Backgrounds - Background image/video management
  • ShadowOverlay - Overlay effects for backgrounds
  • BackgroundSelectorSheet - Background selection UI

​
Breathing Pod

  • BreathingPod - Main breathing exercise component
  • BreathingCircle - Animated breathing visualization
  • BreathingMethodSelectorDialog - Breathing technique selector
  • BreathingRings - Ring animation effects
  • BreathingText - Instruction text display
  • BreathingTimer - Breathing exercise timer

​
Clock

  • Clock - Time display component

​
Dock

  • Dock - Main dock container
  • ClockDock - Clock widget for dock
  • LanguageSwitcherDock - Language selection
  • SettingsDock - Settings access
  • DockButton - Reusable dock button component

​
Timer

  • Timer - Main Pomodoro timer component
  • TimerDonutGraph - Circular progress visualization
  • TimerExpandedContent - Detailed timer view
  • TimerSessionIndicators - Session progress indicators
  • TimerStats - Timer statistics display
  • TimerNextTask - Next task preview
  • TimerResetDialog - Reset confirmation dialog
  • TimerStatsDialog - Statistics modal
  • TimerSettingsDialog - Timer configuration

​
Tasks

  • TasksSheet - Task list container
  • CreateList - List creation form
  • CreateTask - Task creation form
  • TaskList - Task list display

​
Notes

  • NotesSheet - Notes container and editor

​
Soundscapes

  • SoundscapesSheet - Main soundscapes interface
  • Combos - Sound combination management
  • CategoryItem - Sound category display
  • CategoryList - Category list view
  • SoundList - Sound selection list
  • SoundTileIcon - Sound preview tile
  • SoundPlayer - Audio playback controls
  • GlobalVolumeControl - Master volume control
  • OscillationButton - Volume oscillation toggle
  • PlayButton - Play/pause control
  • ResetGlobalSoundSettingsDialog - Reset sound settings
  • SaveComboButton - Save sound combinations
  • ShareButton - Share sound configurations
  • ShuffleButton - Random sound selection
  • SoundControlBar - Sound control interface

​
Other Features

  • Quote - Inspirational quote display
  • GreetingsMantras - Personalized greeting messages
  • SettingsDialog - Application settings
  • AccountForm - User account management
  • ProfileDropdown - User profile menu
  • SiteBlockerSheet - Website blocking feature
  • TabStashSheet - Tab management
  • Bookmarks - Bookmark management
  • Calendar - Calendar integration
  • Search - Search functionality
  • ShortcutsModal - Keyboard shortcuts help
  • Layout - Main layout component
Supporting components for enhanced UX.Location: packages/shared/src/components/icons/ & packages/shared/src/components/skeletons/
​
Icons
Components
Custom icon components for consistent UI
​
PageSkeleton
Component
Loading state placeholder for pages

​
Export Structure

All components are exported through packages/shared/src/components/index.ts, making them easily importable:
import { Timer, TaskList, SoundscapesSheet } from '@meelio/shared';

​
Component Organization Principles

Modular Design

Components are self-contained with clear responsibilities

Shared State

Components connect to Zustand stores for state management

Reusability

Common components serve multiple features

Platform Agnostic

Components work across web and extension platforms

​
Key Component Files

// Main timer component - unified implementation
export { Timer as SimpleTimer } from "./timer";

​
Next Steps

State Management

Learn about Zustand stores that power components

Custom Hooks

Explore reusable hooks for component logic

Build docs developers (and LLMs) love

Get started for freeTalk to us