WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Mobile

Sticky CTA Bar

MobileSticky CTA Bar
Slide To ConfirmSwipe Deck
Live props
Content
priceNone
currency
locale
priceSuffix
compareAtPriceNone
caption
actionLabel
Appearance
variant
tone
color
size
radius
State
loading
disabled
Behavior
showOn
threshold200px
hideOnScroll
keyboard
Layout
position
hideFrom
safeArea
Code
import { StickyCtaBar } from "@/components/ui/sticky-cta-bar"

<StickyCtaBar />
Pro

v1.0.0·Added in 1.0.0

The bottom action bar of product, listing and checkout pages on phones: the price on one side, the main action on the other.

The bar sits at the bottom edge, above a bottom tab bar and the home indicator, with the price (an old price struck through, a muted caption) on the left and the main button on the right, plus an optional icon button such as a heart. With showOn="anchor" it stays out of the way while the page's own buy button is on screen and glides up on a smooth spring once you scroll past it (or while you have not reached it yet), then drops away quickly when the button comes back; showOn="scroll" does the same after a scroll distance. With hideOnScroll it follows your finger down and out while you scroll down and comes back as soon as you scroll up. Tap the button: a promise from onAction shows its spinner without changing the width. When the price changes the new amount fades in. When the on-screen keyboard opens (a coupon field) the bar slides away by default, or rides on top of the keyboard with keyboard="lift". Everything is a normal button, reached with Tab and pressed with Enter or Space; while hidden the bar is inert so Tab skips it, and while keyboard focus is inside it never hides. Under reduced motion it fades instead of sliding.

Add to a project

npx wingo-ui@latest add sticky-cta-bar

Pro item: the CLI needs a Pro account. See plans

Dependencies

motionbuttonnumber-formatuse-localeuse-scroll-stateuse-keyboard-insetmotiontonesui-config

Files

  • components/ui/sticky-cta-bar.tsx

See also

ButtonBottom Tab BaruseScrollStatehookuseKeyboardInsethookNumber formatlib
PreviousSlide To ConfirmNext Swipe Deck
Bright living room with an open kitchen
1 / 12

New York, Upper West Side · Sep 24, 2026

2-bedroom apartment, separate rooms

$489,000$840/sq ft

580 sq ft
Area
2
Rooms
3 / 8
Floor
2012
Built

Description

A third-floor apartment in a 2012 building, with a bright living room, a separate kitchen, two bathrooms and an enclosed balcony over the courtyard. Own heating, double glazing, hardwood floors.

Five minutes from Central Park, with a bus stop and a school nearby. Sold furnished, with a parking spot included.

  • Own heating
  • Enclosed balcony
  • Parking spot
  • Elevator
  • Near Central Park
Ella MorganGreen House Realty · 38 listings

Similar listings

  • 2-bedroom apartment, Harlem$455,000New York, Harlem
  • Renovated studio, 370 sq ft$329,000New York, Chelsea
  • 3-bedroom apartment with terrace$612,000Jersey City, Downtown

Scroll the listing: the bar stays above the home indicator.

showOn always · threshold 200px · hideOnScroll off · keyboard hide · position fixed (sticky in this frame) · hideFrom none · safeArea on

Ella MorganVerified agent