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

Verify

OTP verification code input with auto-advance, paste support, and animated error shake.

Verify your email

We sent a 6-digit code to user@email.com

Didn’t receive a code? 

Features

  • Auto-advance — Focus moves to next input after each digit
  • Paste support — Paste a full code and it fills all inputs
  • Error shake — Framer Motion shake animation on invalid code
  • Success state — Green styling with checkmark on verification

API Reference

PropTypeDefaultDescription
emailstring"user@email.com"Email address shown in the subtitle
codeLengthnumber6Number of digits in the code
onVerify(code: string) => void-Called when all digits are entered
onResend() => void-Called when resend link is clicked
onChangeEmail() => void-Called when change email link is clicked