The sign-in and sign-up forms, which are one component.
Import it from rei-kit/app:
import { AuthForm } from 'rei-kit/app'
Open AuthForm in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { AuthForm } from 'rei-kit/app'
import type { AuthFormValues } from 'rei-kit/app'
import { createAccount, signInWithGoogle } from './auth'
const remember = ref(true)
const busy = ref(false)
const labels = {
email: 'Email',
password: 'Password',
confirmPassword: 'Confirm password',
submit: 'Create account',
google: 'Continue with Google',
or: 'or',
rememberMe: 'Remember me',
}
async function signUp({ email, password }: AuthFormValues) {
busy.value = true
await createAccount(email, password)
busy.value = false
}
</script>
<template>
<AuthForm
v-model:remember="remember"
mode="signUp"
:labels="labels"
:busy="busy"
@submit="signUp"
@google="signInWithGoogle"
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
mode | 'signIn' | 'signUp' | yes | |
labels | AuthFormLabels | yes | Every string on screen. No defaults, in any language: a label the kit invented would ship English into an app that has none, and it would do it silently. |
busy | boolean | false | Disables the controls and spins the submit button. |
error | string | '' | A failure to show above the submit button, already translated. A sentence rather than a key, because the kit cannot translate and `toAuthMessageKey` hands the caller a key precisely so the caller can. |
validate | ((values: AuthFormValues) => Record<string, string> | null) | Returns one message per invalid field, or null when the values are good. Omitted, the form submits whatever is typed and lets the server decide — which is a legitimate choice, not a broken one. `fieldErrors` turns a Zod schema into this in one line. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.