DeckProvider
Configure auth, user identity, URL capture, and theming for the Feedback SDK.
DeckProvider
DeckProvider is the required root for the React Feedback SDK. (Server-only
submits use @deck-io/feedback/server and do not need a provider.)
It supplies:
- publishable-key authentication
- host-app user identity
- shared submit client
- optional theming scope
- URL metadata capture policy
Place it near the root of your app or around the feature that collects feedback.
import { DeckProvider } from "@deck-io/feedback";
<DeckProvider
publishableKey={process.env.NEXT_PUBLIC_DECK_PUBLISHABLE_KEY!}
user={{ id: user.id, email: user.email, name: user.name }}
urlCapture="path"
colorScheme="light"
>
{children}
</DeckProvider>Props
| Prop | Required | Default | Description |
|---|---|---|---|
publishableKey | Yes | — | Client-safe pk_… key. Never a secret dk_… API key. |
user | Yes | — | Host user. id is required on every submit. Optional email, name improve contact matching. |
apiUrl | No | Deck production widget ingest URL | Override only for staging/proxy setups. |
urlCapture | No | "path" | How much of window.location is sent as metadata. See URL privacy. |
colorScheme | No | "light" | "light" | "dark" | "system" for built-in widgets. |
theme | No | built-in tokens | Partial CSS variable overrides for built-in widgets. |
className | No | — | Class on the .deck-feedback-scope wrapper. |
headless | No | false | When true, no theme wrapper or base styles — context only. Use with custom UI. |
children | Yes | — | Your product UI / SDK components. |
Headless mode
When you fully own the form UI:
<DeckProvider headless publishableKey={pk} user={{ id: user.id }}>
<MyCustomFeedbackForm />
</DeckProvider>Use useSubmitFeedback inside children. Skip FeedbackDialog / ThumbsFeedback unless you want Deck’s UI.
useDeckFeedback
Access the provider context from any child:
import { useDeckFeedback } from "@deck-io/feedback";
const { submitFeedback, user, apiUrl, resolvedColorScheme } = useDeckFeedback();Throws if used outside DeckProvider.
For most custom forms, prefer useSubmitFeedback — it adds loading and error state.