Auth Basic | Jack UI

A modern, responsive authentication card block featuring custom branding, optional social login providers, ambient dot matrix pattern, and dark mode support.

Live Preview

Open in

Jack UI

Secure Login

Or continue with

Usage

import AuthBasic from "@/components/jackui/blocks/auth-basic/auth-basic";

export default function AuthPage() {
  return (
    <AuthBasic
      brandName="Jack UI"
      showSocialLogin={true}
    />
  );
}

Installation

bunx shadcn@latest add https://jackui.com/r/auth-basic.json

npx shadcn@latest add https://jackui.com/r/auth-basic.json

pnpm dlx shadcn@latest add https://jackui.com/r/auth-basic.json

Props

Prop	Type	Description
`brandName`	`string`	Optional. The brand title displayed in the header badge. Default: `"Jack UI"`.
`logo`	`React.ReactNode`	Optional. Custom logo React element. If omitted, renders a default clean shield badge.
`dotColorLight`	`string`	Optional. Border and grid dot matrix color for light mode. Default: `"rgba(0, 0, 0, 0.14)"`.
`dotColorDark`	`string`	Optional. Border and grid dot matrix color for dark mode. Default: `"rgba(255, 255, 255, 0.16)"`.
`showSocialLogin`	`boolean`	Optional. Toggles display of social auth provider buttons (Google, GitHub). Default: `true`.
`className`	`string`	Optional. Additional Tailwind CSS classes (e.g. background override, full width/height).
`style`	`React.CSSProperties`	Optional. Inline CSS styles (custom background gradients, full viewport sizing).
`...props`	`React.ComponentPropsWithoutRef<"section">`	Optional. Any extra HTML `section` attributes spread onto the outer container.