@wocha/shadcn

Copy-to-install Wocha authentication components compatible with shadcn/ui. Each component uses shadcn primitives (Button, Card, Input, Tabs, etc.) and @wocha/react hooks.

Unlike @wocha/ui, which ships pre-built themed components, @wocha/shadcn copies source into your project so you can customise markup and Tailwind classes directly.

Prerequisites

1. A Next.js or React project with shadcn/ui initialised (npx shadcn@latest init)
2. @wocha/react installed and WochaProvider configured
3. shadcn UI base components: button, card, input, label, dropdown-menu, tabs, table (as required per component)

Set apiUrl in your Wocha provider config when using profile, organisation, or permission features.

Installation

Option A: shadcn CLI (registry)

Add the registry to your components.json:

{
  "registries": {
    "@wocha": "https://raw.githubusercontent.com/wocha-dev/wocha/main/sdks/shadcn/registry/{name}.json"
  }
}

Install components:

npx shadcn@latest add @wocha/wocha-sign-in
npx shadcn@latest add @wocha/wocha-sign-up
npx shadcn@latest add @wocha/wocha-user-button
npx shadcn@latest add @wocha/wocha-user-menu
npx shadcn@latest add @wocha/wocha-org-switcher
npx shadcn@latest add @wocha/wocha-guard
npx shadcn@latest add @wocha/wocha-mfa-setup
npx shadcn@latest add @wocha/wocha-user-profile
npx shadcn@latest add @wocha/wocha-org-profile
npx shadcn@latest add @wocha/wocha-create-org
npx shadcn@latest add @wocha/wocha-show

Form aliases (wocha-sign-in-form, wocha-sign-up-form) re-export the main sign-in and sign-up components.

You can also install directly from a built item URL:

npx shadcn@latest add https://raw.githubusercontent.com/wocha-dev/wocha/main/sdks/shadcn/registry/wocha-sign-in.json

The full catalogue is at registry/registry.json.

Option B: Manual copy

Copy files from components/ into your project's components/wocha/ directory. Update @/components/ui/* import paths if your aliases differ.

mkdir -p components/wocha
cp sdks/shadcn/components/*.tsx components/wocha/

Components

| Component | Description | |-----------|-------------| | WochaSignIn | Sign-in card with email/password and social buttons | | WochaSignInForm | Alias for WochaSignIn | | WochaSignUp | Sign-up card starting hosted registration | | WochaSignUpForm | Alias for WochaSignUp | | WochaUserButton | Avatar dropdown with sign-out | | WochaUserMenu | Avatar dropdown with name, profile link, and sign-out | | WochaOrgSwitcher | Organisation selector dropdown | | WochaAuthGuard | Renders children when authenticated (optional permission check) | | WochaMfaSetup | TOTP MFA enrollment wizard with backup codes | | WochaUserProfile | Card-based profile management (profile, security, sessions) | | WochaOrgProfile | Organisation management with members list and settings | | WochaCreateOrg | Form to create a new organisation | | WochaShow | Conditional render for auth and authorisation states |

Usage

import { WochaProvider } from "@wocha/react";
import { WochaSignIn } from "@/components/wocha/sign-in";
import { WochaUserButton } from "@/components/wocha/user-button";
import { WochaOrgSwitcher } from "@/components/wocha/org-switcher";

export function AuthLayout() {
  return (
    <WochaProvider config={wochaConfig}>
      <header className="flex items-center gap-4">
        <WochaOrgSwitcher />
        <WochaUserButton />
      </header>
      <WochaSignIn />
    </WochaProvider>
  );
}

Permission-gated content

import { WochaAuthGuard } from "@/components/wocha/auth-guard";

<WochaAuthGuard
  permission={{
    resource: { type: "organisation", id: orgId },
    permission: "admin",
  }}
  fallback={<p>Admin access required</p>}
>
  <AdminPanel />
</WochaAuthGuard>

Conditional rendering with WochaShow

import { WochaShow } from "@/components/wocha/show";

<WochaShow when="signed-in">
  <Dashboard />
</WochaShow>

<WochaShow when={{ permission: "admin" }} fallback={<p>Admins only</p>}>
  <AdminPanel />
</WochaShow>

Next.js

Use WochaSessionProvider from @wocha/nextjs/client instead of WochaProvider. shadcn components work the same — they only depend on @wocha/react hooks, which @wocha/nextjs provides via its session bridge.

import { WochaSessionProvider } from "@wocha/nextjs/client";
import { WochaSignIn } from "@/components/wocha/sign-in";

<WochaSessionProvider apiUrl={process.env.WOCHA_API_URL}>
  <WochaSignIn />
</WochaSessionProvider>

Customisation

After installation, components live in components/wocha/. Edit the copied source to change layout, copy, or Tailwind classes. Components import shadcn primitives from @/components/ui/*, so theme changes via globals.css and shadcn CSS variables apply automatically.

Learn more

• @wocha/shadcn docs
• @wocha/react SDK
• @wocha/ui SDK
• shadcn/ui registry docs