Portal
react-fancyWhy
Without a Portal primitive, components that render outside the normal React tree — tooltips, modals, dropdowns appended to
document.body — lose access to context and break dark-mode Tailwind utilities. Classic React portals also demand manual theme synchronization, scattering that logic across every overlay component.What
Portal wraps React's createPortal and automatically propagates the dark class from <html> into the portal's subtree via a passive MutationObserver. Props are children (ReactNode) and an optional container (HTMLElement, defaults to document.body). It handles SSR safety automatically.How
Import from
@particle-academy/react-fancy and wrap your overlay content: <Portal container={customElement}>{children}</Portal>. The dark: utilities in your portal's children will now respect the page's theme without any additional wiring.