saturation/uisaturation/ui
DocsComponentsBlocksPagesEmails
GitHub

Sections

IntroductionComponentsInstallationMCPThemingDesign

Components

Components

General

AvatarBadgeButtonKbdProgressSeparatorSkeletonSpin ResolveSpinnerSync ButtonTypography

Forms & Inputs

Address LookupCalendar PickerCheckboxComboboxDate PickerEmoji PickerFavicon SearchFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaToggleToggle Group

Data Display

AccordionAlertCardChartComparison SliderCredit CardData TableEmptyItemSaturation Credit CardTableTree

Navigation

BreadcrumbCommandMenubarNavigation MenuPaginationTabs

Overlays

CollapsibleContext MenuDialogDropdown MenuSheet

Layout

Button GroupFont ProviderWizard Split Layout

Feedback

Sonner

Animation & Effects

Animated GroupAnimated ListAnimated NumberBeamBlur FadeBorder TrailGlow EffectLiquid MetalLoading StateParallaxPixelProgressive BlurRippleSpotlightText EffectText Shimmer

Productivity

Agent ChatAI Chat InputCoding AgentFiltersFull CalendarKanbanNovel Editor

Login

Modern authentication form with email/password login and SSO options for Google and Apple.

Welcome back

Sign in to your account to continue

Or continue with email
Don't have an account?

Features

  • Email and password authentication — With validation
  • Single Sign-On (SSO) — With Google and Apple
  • Password visibility toggle — For better UX
  • Remember me checkbox — For persistent sessions
  • Forgot password and sign up links — Navigation helpers
  • Loading states — For async operations
  • Responsive design — For all screen sizes
  • Fully accessible — With proper ARIA labels

API Reference

PropTypeDefaultDescription
onSubmit(email: string, password: string) => void-Callback when email/password form is submitted
onGoogleSignIn() => void-Callback when Google SSO button is clicked
onAppleSignIn() => void-Callback when Apple SSO button is clicked
onForgotPassword() => void-Callback when forgot password link is clicked
onSignUp() => void-Callback when sign up link is clicked

Usage Guidelines

This login component follows modern authentication UX best practices for 2025. It prioritizes user convenience while maintaining security standards.

SSO First: Social sign-on options are presented prominently at the top since they offer the fastest path to authentication for most users.

Password Management: The password field includes a visibility toggle to help users verify their input, reducing login errors and frustration.

Clear Actions: All interactive elements are clearly labeled with their purpose, and loading states provide feedback during async operations.

Accessibility: The component uses semantic HTML, proper ARIA labels, and keyboard navigation support for full accessibility compliance.

Components Used

buttoninputlabelseparatorcheckbox