componentes / exibição
Auth Shell
Card centralizado para telas de login, cadastro, redefinição e verificação.
573 B gzip roda no servidor · 0 JS
A
Welcome back
Sign in to continue.
New here? Create an account
auth-shell-default.tsx
import { AuthShell } from "@/components/ui/auth-shell";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
export default function AuthShellDefault() {
return (
<AuthShell
centered
className="min-h-0 py-0"
description="Sign in to continue."
footer={
<>
New here?{" "}
<a className="font-medium text-foreground underline decoration-brand underline-offset-4" href="#signup">
Create an account
</a>
</>
}
logo={<span className="grid size-10 place-items-center rounded-xl bg-brand font-bold font-heading text-brand-contrast">A</span>}
title="Welcome back"
>
<Input aria-label="Email" placeholder="you@company.com" />
<Button variant="brand">Sign in</Button>
</AuthShell>
);
}Instalação
$ npx shadcn@latest add https://cd-ui.vercel.app/r/auth-shell.jsonprimeira vez? configure o components.json e o tema antes: veja instalação.
Uso
import { AuthShell } from "@/components/ui/auth-shell"
<AuthShell title="Welcome back" description="Sign in to continue." footer={<a href="/signup">Create an account</a>}>
{/* your form */}
</AuthShell>API
AuthShell
Card centralizado com cabeçalho (logo, título, descrição), seu formulário como filhos e uma linha de rodapé. Componente de servidor. Não tem logo próprio: passe o seu.
| prop | tipo | padrão |
|---|---|---|
logoMarca mostrada acima do título. | ReactNode | - |
titleTítulo do card. | ReactNode | - |
descriptionLinha abaixo do título. | ReactNode | - |
footerLinha abaixo do card, como um link para outra tela. | ReactNode | - |
centeredCentraliza o texto do cabeçalho. | boolean | false |
sizeLargura do card: 384px ( | "sm" | "md" | "sm" |
classNameClasses extras, mescladas com | string | - |