shadcn.io is not affiliated with official shadcn/ui
Testimonial Carousel Login Block for Radix UI
A sign-in page for a video review tool with three customer quotes in a carousel under the form: swipe or pick a segment, and press Play to turn it over by itself, one quote every seven seconds. It starts paused.
Installation
Overview
Add social proof under the form, with motion that waits to be asked for, with this carousel login block for React with Radix UI. It's the sign-in of Scrubline, a video review tool: the page's two side rails run its full height and one band crosses the screen between two rules, with the form centered in the first row: a Field with the email Input, another with the Password Input and a "Forgot password?" link, and the Shine Button, the only colored control. Under it, behind a rule that meets both rails at a plus mark, a Carousel holds three customer quotes: swipe it, or choose one with the three segments above it, each named for who says it. It starts paused. The Play Button turns it over by itself, one quote every seven seconds, and a bar fills the segment while a quote is up; it holds while the pointer or keyboard focus is on the quote, and any choice of a quote pauses it again. Under reduced motion the Play button gives way to a sentence of the same height and nothing turns by itself. On a phone the quote row is gone and the form takes the screen. It's built from Carousel, Avatar, Button, Field, Input, Password Input, Shine Button and Guides, with a CSS entrance only. For a sign-in with a quote that moves only when asked.
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. 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. The quotes are typed data and the people in them are made up: replace them with customers who agreed to be quoted.
Why does it start paused, and how does Play work?
A quote that changes by itself is something a visitor should choose. Press Play and the first quote's bar fills over seven seconds; when it finishes (the bar's own CSS animation ends) the next quote slides in and the next bar starts. The time is the bar's animation duration, so there's no timer to leak, and a paused bar simply stops. Pointing at the quote or putting keyboard focus on a control in it holds the bar where it is; moving away lets it go on. Picking a segment or swiping pauses it, and a polite status message reads out "Playing" or "Paused". While it plays, the quotes are not read out as they change.
What happens under reduced motion?
The Play button gives way to a sentence of the same height saying so, and the fill bar doesn't run, so nothing ever turns by itself; the carousel still swipes and the segments still choose a quote. Pausing and the fill are in the CSS, so they follow the setting live.
How do I move between quotes with a keyboard, or by swiping?
Tab to the three segments and press Enter or Space: each is named "Quote 2 of 3, from" and the person, and the current one is marked. A touch swipe moves the carousel on every target. This carousel is built on Embla, so a mouse can drag it as well as a finger. It has no tab stop of its own, so the segments are the keyboard route.
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.