Buttons & Actions

Button Button Group Copy Button Delete Button Theme Toggle Toggle Toggle Group

Inputs

Avatar Upload Calendar Checkbox Color Picker Combobox Cron Picker Currency Input Date Picker Date Range Picker Date Time Picker Duration Picker File Upload Filter Builder Input Input Group Listbox Masked Input Mention Input Month Picker Multi Select Number Input OTP Input Password Input Phone Input Radio Group Rating Search Input Segmented Control Select Signature Pad Slider Switch Tag Input Textarea Time Picker

Forms

Address Input CSV Import Field Form Wizard Inline Edit Invoice line items Rich Text Editor

Navigation

Back To Top Bounce Sidebar Breadcrumb Command Menu Global Search Gooey Nav Hook Sidebar Nav Menu Nav Tabs Pagination Proximity Sidebar Scroll Progress Sidebar Steps Table Of Contents Tabs Topbar User Menu Workspace Switcher

Overlays

Alert Dialog Context Menu Dialog Drawer Dropdown Menu Family Drawer Hover Card Popover Sheet Shortcuts Dialog Tooltip Tour

Feedback

Alert Banner Cookie Consent Emoji Reaction Empty State Notification Bell Notification Center Progress Route Progress Skeleton Spinner Toast

Data Display

Approval Flow Avatar Badge Calendar View Code Block Comment Thread Contact card Countdown Description List Diff Viewer File List File manager Folder Gantt JSON Viewer Kbd Log Viewer Markdown Presence Scheduler Tag Timeline Tree View

Tables & Lists

Audit Log Data Table Deal Pipeline Editable Grid Kanban List Members table Permissions Matrix Table Task List Virtual List

Charts & Stats

Animated Counter Area chart Bar chart Donut chart Funnel chart Gauge GitHub Activity Heatmap calendar Leaderboard Line chart Radial bar Sparkline Stat Card Tracker Trend badge

Layout

Accordion App Shell Card Collapsible Detail Layout Entity Header Page Header Scroll Area Separator Settings Layout Split View Toolbar

Media

Audio Player Carousel Image Cropper Image Lightbox Location Map QR Code Step Player Video Player

AI Kit

Agent Status Card Chat Message Chat Thread Conversation List Fluid Orb Grid Reveal Matrix Orb Model Picker Prompt Input Reasoning Indicator Rule Builder Suggestion Chips Tool Call Timeline Usage Meter Voice Input Workflow Canvas

Text & Effects

Gravity Letters

Mobile

Action Sheet Bottom Tab Bar FAB Haptic Button Hero Header Install Prompt Large Title Header Notification Banner Onboarding Carousel Picker Wheel Pull To Refresh Slide To Confirm Sticky CTA Bar Swipe Deck Swipeable Tabs

Commerce

Cart drawer Category picker Checkout steps Coupon input Favorite button Filter panel Listing card Listing grid Order tracker Price Price range Pricing table Product gallery Quantity stepper Reviews Seller card

Blocks

Admin Dashboard Page Admin Shell AI Chat Page Automation Builder Page Checkout Page CRM Contact Page CRM Pipeline Page Error Pages Inbox Page Invoice Page KPI Dashboard Listing Detail Page Login Page Marketplace Home Page Marketplace Search Page Marketplace Shell Mobile App Home Onboarding Flow Post Listing Wizard Pricing Page Register Page Settings Page Users Admin Page

Hooks & Utilities

AI Chat Chart kit Commerce Date utils File export File types Filters Form validation Haptics Invoicing Motion presets Navigation Number format Relative time Romanian locations Spreadsheet Text match Tones UIProvider useClipboard useConsent useControllableState useCooldown useDebounce useKeyboardInset useLocale useLongPress useMediaControls useMediaQuery useOverflowItems usePersistedState useScrollEdges useScrollState useSelection useShortcut useStickToBottom

Gallery Theme Credits

Hooks & Utilities

useScrollState

Hooks & UtilitiesuseScrollState

useScrollEdgesuseSelection

Live props

Options

hideOnScroll

hideDistance56px

hideOffset0px

snap

revealAtEnd

scrolledThreshold1px

Pro

v1.0.0Added in 1.0.0

Scroll offset, progress and hide-on-scroll state for the window or any container, as motion values that move bars without re-renders.

Scroll the feed in the phone frame: the top bar slides away with your finger as you scroll down and comes back the moment you scroll up, then settles fully shown or hidden when you stop. The progress line under it fills as you read, the large title fades into the bar, and a back-to-top button appears once you pass the threshold. The readout shows direction, scrolled and hidden flipping without a render per frame.

Add to a project

npx wingo-ui@latest add use-scroll-state

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

Dependencies

motion use-media-query motion

Files

hooks/use-scroll-state.ts

See also

useScrollEdgeshook useMediaQueryhook Motion presetslib Scroll Progress

PrevioususeScrollEdges Next useSelection

Listings

Listings

New York and nearby · 1,240 listings

direction: nonescrolled: falsehidden: falseatEnd: false

Trek city bike
$1,200
Brooklyn, Park Slope · Sep 23, 2026
Sleeper sofa, 3 seats
$850
Queens, Astoria · Sep 23, 2026
MacBook Air M2, 256 GB
$4,300
Manhattan, Chelsea · Sep 22, 2026
iPhone 13, 128 GB, blue
$1,850
Brooklyn, Williamsburg · Sep 22, 2026
2 bedroom apartment, renovated
$489,000
Jersey City, Downtown · Sep 21, 2026
Honda Civic 2019, 51,000 mi
$38,500
Hoboken, Uptown · Sep 21, 2026
4 person tent, used once
$420
Bronx, Riverdale · Sep 20, 2026
Coworking desk, monthly
$650
Manhattan, SoHo · Sep 20, 2026
Kids bike, 20 inch
$390
Staten Island, St. George · Sep 19, 2026
Upholstered armchair, gray
$300
Brooklyn, Downtown · Sep 19, 2026
Dell 27 inch monitor, 4K
$1,100
Queens, Flushing · Sep 18, 2026
Samsung Galaxy S22, like new
$1,650
Newark, Ironbound · Sep 18, 2026

Turn on hideOnScroll to let the bar slide away.

hideOffset 0px · snap on · revealAtEnd on · scrolledThreshold 1px