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

Onboard Tooltip

Interactive onboarding checklist — click any row to toggle complete, with progress bar, animated check-offs, strikethrough labels, and rotating motivation copy.

Getting started
0/6 steps completedLet's go!

Features

  • Interactive, non-linear — Each row is a button — click to mark complete in any order. Hover gives an Attio-style accent highlight.
  • Spring-driven progress — Progress bar interpolates with spring physics as the completed set changes.
  • Per-step animation — Check badge scales in on toggle, label crosses out with an ease-out sweep, icon chip + label fade to muted.
  • One-way by default — Checked steps lock in — clicking a completed row does nothing, matching a real onboarding flow. In controlled mode, removing a completed index animates the row back out on a tighter 250ms curve.
  • Rotating motivation — Right-aligned header copy switches through encouragement messages (Let's go! → Halfway there → All set!) keyed to completion ratio.

API Reference

PropTypeDefaultDescription
titlestring"Getting started"Heading above the progress bar.
stepsOnboardStep[]-Steps to display. Each entry has a `label` and an inline `icon` (18×18 SVG, stroke 1.5).
defaultCompletedIndexesnumber[]-Initial completed indexes (uncontrolled).
completedIndexesnumber[]-Controlled completed indexes — pair with `onToggle` for full control.
onToggle(index: number) => void-Fired when the user clicks a row.
hideClosebooleanfalseHides the minimize affordance in the header.
onClose() => void-Called when the minimize button is clicked.

Usage Guidelines

Mount this as a persistent floating tooltip in the app — typically pinned to the bottom-right of the dashboard. The default six steps mirror Saturation's onboarding sequence; pass your own via the `steps` prop. For DB-backed checklists, treat as controlled: pass `completedIndexes` derived from server state and persist via `onToggle`.