Skip to Content
BlocksAuthentication

Authentication Block

Pre-built authentication page compositions for sign in, sign up, and password reset flows. These blocks ensure consistent auth experiences across all Mukoko apps.

Required components

npx shadcn@latest add \
  https://registry.mukoko.com/api/v1/ui/button \
  https://registry.mukoko.com/api/v1/ui/card \
  https://registry.mukoko.com/api/v1/ui/input \
  https://registry.mukoko.com/api/v1/ui/label \
  https://registry.mukoko.com/api/v1/ui/field \
  https://registry.mukoko.com/api/v1/ui/form \
  https://registry.mukoko.com/api/v1/ui/separator

Sign in block

A centered card layout on a muted background:

<div className="flex min-h-screen items-center justify-center bg-muted px-4">
  <Card className="w-full max-w-sm">
    <CardHeader className="space-y-2 text-center">
      <MukokoLogo size={32} />
      <CardTitle className="text-xl">Sign in</CardTitle>
      <p className="text-sm text-muted-foreground">
        Enter your email to sign in to your account
      </p>
    </CardHeader>
    <CardContent>
      <form className="space-y-4">
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Input type="email" placeholder="you@example.com" autoComplete="email" />
        </Field>
        <Field>
          <div className="flex items-center justify-between">
            <FieldLabel>Password</FieldLabel>
            <a href="/forgot-password" className="text-xs text-muted-foreground hover:text-foreground">
              Forgot password?
            </a>
          </div>
          <Input type="password" autoComplete="current-password" />
        </Field>
        <Button type="submit" className="w-full">Sign in</Button>
      </form>
 
      <Separator className="my-6" />
 
      <p className="text-center text-sm text-muted-foreground">
        Do not have an account?{" "}
        <a href="/signup" className="font-medium text-foreground underline underline-offset-2">
          Sign up
        </a>
      </p>
    </CardContent>
  </Card>
</div>

Sign up block

Extended form with name and password requirements:

<Card className="w-full max-w-sm">
  <CardHeader className="space-y-2 text-center">
    <MukokoLogo size={32} />
    <CardTitle className="text-xl">Create account</CardTitle>
    <p className="text-sm text-muted-foreground">
      Enter your details to create your account
    </p>
  </CardHeader>
  <CardContent>
    <form className="space-y-4">
      <Field>
        <FieldLabel>Full name</FieldLabel>
        <Input type="text" autoComplete="name" />
      </Field>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type="email" placeholder="you@example.com" autoComplete="email" />
      </Field>
      <Field>
        <FieldLabel>Password</FieldLabel>
        <Input type="password" autoComplete="new-password" />
        <FieldDescription>At least 8 characters</FieldDescription>
      </Field>
      <Button type="submit" className="w-full">Create account</Button>
    </form>
 
    <Separator className="my-6" />
 
    <p className="text-center text-sm text-muted-foreground">
      Already have an account?{" "}
      <a href="/signin" className="font-medium text-foreground underline underline-offset-2">
        Sign in
      </a>
    </p>
  </CardContent>
</Card>

Password reset block

Request reset

<Card className="w-full max-w-sm">
  <CardHeader className="space-y-2 text-center">
    <CardTitle className="text-xl">Reset password</CardTitle>
    <p className="text-sm text-muted-foreground">
      Enter your email and we will send you a reset link
    </p>
  </CardHeader>
  <CardContent>
    <form className="space-y-4">
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input type="email" placeholder="you@example.com" autoComplete="email" />
      </Field>
      <Button type="submit" className="w-full">Send reset link</Button>
    </form>
    <p className="mt-4 text-center text-sm text-muted-foreground">
      <a href="/signin" className="font-medium text-foreground underline underline-offset-2">
        Back to sign in
      </a>
    </p>
  </CardContent>
</Card>

Design notes

  • Use a single “Full name” field, not first/last — see Inclusive Language
  • The MukokoLogo component at the top provides brand presence
  • All inputs include autoComplete for password manager support
  • The muted background (bg-muted) creates visual separation from the card
  • Form validation uses react-hook-form with zod — see the Authentication pattern
Last updated on
DashboardSidebar