Library navigation

Login

A card login form with provider buttons, password visibility, and loading and error states.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/login.json

Usage

tsx
"use client";


import type { ComponentProps } from "react";
import { Login } from "@/components/hangry-ui/blocks/login";


// Pass your application's authentication handlers to this form.
export function SignIn(props: Pick<ComponentProps<typeof Login>,
  "onSubmit" | "onProviderLogin" | "loading" | "error">) {
  return <Login brand="Acme" {...props} />;
}

Login

A login form beside a brand and testimonial panel.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/login-split.json

Usage

tsx
"use client";


import type { ComponentProps } from "react";
import { LoginSplit } from "@/components/hangry-ui/blocks/login-split";


// Pass your application's authentication handlers to this form.
export function SignIn(props: Pick<ComponentProps<typeof LoginSplit>,
  "onSubmit" | "onProviderLogin" | "loading" | "error">) {
  return <LoginSplit brand="Acme" {...props} />;
}

Login

An unframed login form for embedding in your own layout.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/login-minimal.json

Usage

tsx
"use client";


import type { ComponentProps } from "react";
import { LoginMinimal } from "@/components/hangry-ui/blocks/login-minimal";


// Pass your application's authentication handlers to this form.
export function SignIn(props: Pick<ComponentProps<typeof LoginMinimal>,
  "onSubmit" | "onProviderLogin" | "loading" | "error">) {
  return <LoginMinimal brand="Acme" {...props} />;
}