The frame every sign-in screen sits in.
Import it from rei-kit/app:
import { AuthShell } from 'rei-kit/app'
Open AuthShell 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 { AuthForm, AuthShell } from 'rei-kit/app'
import type { AuthFormValues } from 'rei-kit/app'
import { signInWithPassword } from './auth'
const labels = {
email: 'Email',
password: 'Password',
confirmPassword: 'Confirm password',
submit: 'Sign in',
}
async function signIn({ email, password }: AuthFormValues) {
await signInWithPassword(email, password)
}
</script>
<template>
<AuthShell>
<template #brand>My app</template>
<AuthForm mode="signIn" :labels="labels" @submit="signIn" />
</AuthShell>
</template>
This component takes no props.
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.