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.
@wocha/ui is Wocha's primary component library — scoped CSS, themes, and a composition API. It is not tied to shadcn. If your app already uses shadcn/ui, see the optional @wocha/shadcn package (copy-into-your-repo adapters). For fully custom UIs, use headless hooks from @wocha/react.
Interactive preview
Live preview
Sign in to continue
Welcome back. Sign in to access your account.
Generated JSX
import { SignIn } from "@wocha/ui";
import "@wocha/ui/styles.css";
<SignIn
/>Supported components
| 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 the component pages in this section for full props and examples.
Production usage
The playground uses mock session data and a local mock Customer API. In your app, wrap components with WochaProvider or WochaSessionProvider, set apiUrl, and import the stylesheet:
See the UI components guide for provider setup and theming.