saturation/uisaturation/ui
DocsComponentsBlocksPages
GitHub

Sections

IntroductionComponentsInstallationMCPTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBeamBlur FadeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandComparison SliderContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmoji PickerEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNavigation MenuNovel EditorPaginationParallaxProgressProgressive BlurRadio GroupRippleSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography

Comparison Section

Before/after comparison with two staggered animated columns. Great for 'Without X / With X' marketing sections.

Stop managing budgets in spreadsheets

Without Saturation

  • Emailing spreadsheets back and forth
  • Manual data entry across systems
  • No visibility into real-time spend
  • Chasing receipts at wrap
  • Reconciliation takes weeks

With Saturation

  • One collaborative budget, always current
  • Automated syncing across departments
  • Live spend tracking from day one
  • Instant receipt capture on mobile
  • Close out in days, not weeks

Features

  • Staggered animation — Items animate in sequence on scroll
  • Two-column layout — Without vs With comparison
  • Scroll-triggered — Animates when scrolled into view

API Reference

PropTypeDefaultDescription
headingstring-Section heading
withoutComparisonColumn-Left column (pain points)
withComparisonColumn-Right column (benefits)