MYGHF UIVue 3 + Tailwind design system

Accessible, brand-aligned components for the Magdi Yacoub Global Heart Foundation and Aswan Heart Centre.

Theming

Space-separated RGB tokens, a Tailwind preset, and dark mode driven by the .dark class or data-theme.

Read the theming guide

English and Arabic are first-class, with logical utilities and RTL-aware components.

Read the RTL guide

Keyboard-operable primitives, focus-visible states, and WCAG-minded contrast.

Read the accessibility guide

Buttons, forms, overlays, navigation and data components, each with live examples.

Browse the components

bash

npm install @myghf/ui

Then import the tokens once in your app entry stylesheet and load the Tailwind preset:

css

@import '@myghf/ui/tokens.css';

Use the Guide for installation and setup, and Components for live examples.