Skip to content

Updraft sky card

Login page with a frosted card above the clouds.

Usage

Usage
import { SignInSky } from '@/components/blocks/sign-in-02'


<SignInSky />


// Wire it to your auth
<SignInSky
  brand="Acme"
  title="Sign in to Acme"
  socialProviders={['google', 'github']}
  forgotHref="/forgot-password"
  onSubmit={async ({ email, password }) => {
    await signIn(email, password) // throw to show the error state
  }}
  onSocial={(provider) => signInWith(provider)}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/sign-in-02

Source

Props

Updraft sky card props
PropTypeDefaultDescription
brand / brandHrefstring= 'Updraft' / '/'Name and link for the brand mark in the top left.
logoReactNode= Blue tile markReplaces the default mark beside the brand name.
title / subtitlestring= 'Sign in to Updraft' / Short welcome lineHeading and supporting text in the card.
labelsPartial<SignInSkyLabels>= English defaultsField labels and placeholders, the show password label, forgot password, submit, submitting and submitted text, the divider, and the success and error messages.
forgotHrefstring= '#forgot-password'Link for the forgot password action.
socialProviders('google' | 'github' | 'apple')[]= ['google', 'github', 'apple']Social buttons to show. Pass [] to hide them and the divider.
onSubmit(values: { email: string; password: string }) => void | Promise<void>= Simulated successCalled with the values once they pass validation. The button shows a spinner until it settles; throw to show the error state. Without it, success is simulated after a short delay.
onSocial(provider: 'google' | 'github' | 'apple') => void | Promise<void>= —Called when a social button is pressed. The button is marked busy until it settles.
className / stylestring / CSSProperties= —Classes for the section, and inline overrides for the --pp-* variables.