import { WherdProvider, MessagesWidget } from "@wherdkit/react";

export function App() {
  return (
    <WherdProvider
      publicKey="pk_your_key"          // from the Wherd dashboard → Settings → API keys
      apiUrl="https://api.wherd.io"
      user={{ id: "user_123", email: "a@b.com", name: "Ada" }} // optional
    >
      <YourApp />
      <MessagesWidget />               {/* floating launcher + tabbed panel */}
    </WherdProvider>
  );
}

That's it — a feedback button appears, and submissions show up in your dashboard.

Components

<MessagesWidget /> — floating icon launcher + modal with tabs (Feedback · Ideas · What's New)
<MessagesFAB label?="Feedback" /> — just the launcher (icon by default; pass label for a pill)
<FeatureBoard /> — feature requests + upvoting
<WhatsNew /> — changelog feed (marks entries read on view)

Theming

<WherdProvider
  theme={{ colorScheme: "system", colors: { primary: "#16a34a" }, radius: 16 }}
  ...
/>

Theme merges over the server-driven config you set in the dashboard, so you can also restyle without shipping a release.

Headless

Every component is built on exported hooks — skip the UI and build your own:

import { useWherd, useComposer, useFeatureRequests, useChangelog, useUnreadChangelog } from "@wherdkit/react";

const wherd = useWherd();
wherd.open("changelog");                 // open any view programmatically
const unread = useUnreadChangelog();    // badge count