shadcn.io is not affiliated with official shadcn/ui
Testimonial Sidebar Login Block for React Aria
A split sign-in page for a mentoring platform: the form with a Continue with Google row beside one pull-quote in an inset frame, with initials, a name and role, five stars and a Read the story link.
Installation
Overview
Put one good quote beside the sign-in with this testimonial sidebar login block for React with React Aria. It's the sign-in of Peerhaven, a mentoring platform: the page's two side rails run its full height and one band crosses the screen between two rules. The form sits at the start of the band: a Field with the email Input, another with the Password Input and a "Forgot password?" link, the Shine Button, the only colored control, then an "or" rule and a Continue with Google Button with a two-letter tile in place of a logo. At the end, behind a divider that meets both rules at a plus mark, a mentee's pull-quote sits in an inset Frame: her words in large type, an Avatar of initials, her name and role, five stars drawn by the read-only Rating with the score in text beside them, and a "Read the story" link. The side is still; nothing moves in it. On a phone it's gone and the form takes the screen. It's built from Frame, Avatar, Rating, Button, Field, Input, Password Input, Shine Button and Guides, with a CSS entrance only. For a sign-in that carries one proof.
FAQ
What happens when I sign in, and what stays in the page?
Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent; Sign out brings the form back with your email still filled in. Continue with Google shows where a real one would send you ("Nothing opens in this demo") with a way back. To wire it for real, post the email and password to your auth endpoint where the code says so, keep the busy state until it answers, then redirect, or show its error under the field it concerns, and point the provider row at your OAuth redirect. The quote and the person are made up; "Read the story" is a # link for your own case study.
How are the stars kept honest for screen readers?
The stars only draw the score. The Rating is read-only and wrapped in an aria-hidden, inert box, so it adds no stops or radios to the page, and "Rated 5 out of 5" is written beside it in text. They're drawn in the foreground color rather than the catalog's warning color, so the Shine Button stays the only colored thing on the page.
Why is the Sign in button never disabled?
A disabled button can't explain itself, and keyboard users can't reach it. Here it stays enabled: pressing it with an empty or malformed email, or no password, marks those fields invalid, writes one sentence under each and moves focus to the first, which reads its problem out. Typing clears that field's problem. The browser's own validation bubbles are turned off with noValidate, so the messages look the same in every browser, and each field keeps a line for its problem even when there is none, so a problem never pushes the page.
Why is the quote a figure?
It's a figure: the blockquote holds her words and the figcaption, the last child, holds who said them, so assistive technology reads them as a quotation with its source. The frame around it is only a Frame with an inset panel; swap in your own customer, a different layout, or a logo you have the rights to use.