<UserControls/> component
<UserControls /> is the small signed-in cluster that combines the account trigger with the notification bell. It gives you the stock header setup without wiring the pieces together yourself.
Usage
The following example shows a basic usage of <UserControls />.
import { SignedIn, UserControls } from '@wacht/nextjs';export default function UserControlsUsage() { return ( <> <SignedIn> <UserControls /> </SignedIn> </> );}Behavior
Mount it in a header or top bar when you want the standard signed-in controls together in one place. It is a thin composition layer over <UserButton /> and <NotificationBell />, not a separate account system.
Composition
The control cluster renders the notification bell first when notifications are enabled, then the user button with the current account state. If notifications are turned off, only the account trigger remains.
Examples
Signed-in header cluster
import { SignedIn, UserControls } from '@wacht/nextjs';export default function UserControlsSignedInHeaderCluster() { return ( <> <SignedIn> <UserControls /> </SignedIn> </> );}Split controls
import { UserControls, SignedIn, NotificationBell, UserButton } from '@wacht/nextjs';export default function UserControlsSplitControls() { return ( <> <SignedIn> <NotificationBell /> <UserButton /> </SignedIn> </> );}