Component playground

Interactive preview of Wocha UI components with configurable props and generated JSX.

Explore @wocha/ui components with a live mock preview. Toggle props and copy the generated JSX into your application.

Interactive preview

import { SignIn } from "@wocha/ui";
import "@wocha/ui/styles.css";

<SignIn
/>

Component	Description
`SignIn`	Hosted sign-in with social providers, passkeys, and layout options
`SignUp`	Registration flow entry point
`UserButton`	Avatar dropdown with modal/navigation profile modes
`UserProfile`	Self-service account management
`OrganizationProfile`	Organisation management with members and settings
`OrgSwitcher`	Organisation selection for multi-tenant users
`CreateOrganization`	Standalone organisation creation form
`OrganizationList`	Membership list with invitations
`Show`	Declarative conditional render (`when` prop)
`SignInButton` / `SignUpButton` / `SignOutButton`	Unstyled auth triggers
`WochaLoading` / `WochaLoaded`	Auth lifecycle state components
`Protect`	Conditional rendering based on authentication, roles, or permissions

See dedicated component reference pages for full props and examples.

The playground uses mock data. In your app, wrap components with WochaProvider or WochaSessionProvider and import the stylesheet:

import { WochaThemeProvider, SignIn, UserButton } from "@wocha/ui";
import "@wocha/ui/styles.css";

Set apiUrl when using profile or permission features — see the UI components guide.