HelpDrawer Patterns

The HelpDrawer component from @repo/help-ui powers in-app contextual help. It is triggered programmatically via openHelp(helpId).

How It Works

HelpId Convention

HelpIds use kebab-case: product-feature-topic

MDX Frontmatter

Every help-linked page must declare its helpId in frontmatter:

---
title: Overview
helpId: fastsuite-e2-overview
product: fastsuite-e2
type: overview
---

Usage in Host App

import { openHelp } from '@repo/help-ui';
 
function MyComponent() {
  return (
    <button onClick={() => openHelp('fastsuite-e2-overview')}>
      Help
    </button>
  );
}

See ADR-0004 (stable helpId) and ADR-0006 (no hardcoded URLs) for architecture constraints.