Sign-In Slice

Blocks & Slices

A complete drop-in sign-in card: spring floating-label email input, a continue button that runs an inline progress sheen then morphs into a drawn success check + "Check your inbox" panel, OAuth-style buttons, and mono fine print. Real form/label/aria-live semantics; shake, sheen, and springs drop to instant swaps under reduced-motion.

Inspired by Skiper UI — product slices (approach) — independently built, not affiliated. Attribution policy

Sign in to Parable

We'll email you a magic link. No password needed.

By continuing you agree to the Terms · Privacy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/sign-in-slice.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/sign-in-slice.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="flex w-full justify-center py-4">
    <SignInSlice className="w-[340px]" />
  </div>

Props

SignInSliceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onSubmit" | "children">

Prop	Type	Default	Description
onSubmit	(email: string) => Promise<void> \| void	—	Runs when a valid email is submitted. Resolve to show the success state, throw/reject to fall back to the form with an error hint. Defaults to a fake ~1.2s delay so the slice demos itself.
title	React.ReactNode	"Sign in to Parable"	Card heading.
subtitle	React.ReactNode	"We'll email you a magic link. No password needed."	One-liner under the heading.
logo	React.ReactNode	—	Logo slot above the heading. Defaults to a small violet gradient tile.
finePrint	React.ReactNode	"By continuing you agree to the Terms · Privacy"	Mono fine-print line at the foot of the card.
accent	string	"#8b5cf6"	Accent hex — button, floated label, success check. Default Parable violet.
onOAuth	(provider: "github" \| "google") => void	—	Called when an OAuth-style button is pressed (demo-grade, no real auth).

npm dependencies

motion