Custom scrolling that keeps the native feel: an overlay bar, edge fades and the Soft tray shell.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/scroll-areaPlayground
Releases
RELEASESLatest first
Activity
Activity12 new
Gallery
PHOTOS4 of 24
Rooms
Rooms
Table
ACCOUNTSScroll both ways
Orientation
Icons animation
Edge fades
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/scroll-area
Accessibility
- The viewport is a labelled, focusable region, so the keyboard can scroll it.
- The bar is decorative to screen readers.
- Focus is never trapped inside.
Motion
- The bar wakes in 120 ms when you scroll or hover, and sleeps 800 ms later over 240 ms.
- The thumb widens from 4 to 6 in 160 ms and the track fades in.
- Dragging inks the thumb and raises a mono position tip.
- Edge fades clear in 160 ms when there is nothing more.
- With reduced motion, the bar stays visible and changes are instant.
Responsive behavior
- A 10 px bar on Web. A 6 px bar with a 3 px thumb on Mobile, with no track or tip.
- The thumb shows only while scrolling on touch.
Performance
- Scrolling stays native. The scroll listener is passive and the thumb moves by a direct transform write, without a React render.
- ResizeObservers track the content, and the bar sleeps after 800 ms.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import ScrollArea and Scrollbar. Props: label, orientation, fades, shell, height, viewportRef, animated.
- label names the region so the keyboard can scroll it. Set height so a vertical scroll has a limit.
- shell wraps it in the Soft tray with title, meta and actions. Use viewportRef to scroll from your own buttons.
Related
TableComponentNative table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.ItemComponentA row that shows one thing: media, a title, a description and an optional action.CarouselComponentA rail of tall cards. The centred card grows to 106% and shows its price.CardComponentThe container most of fetaUI is built on: an inset card on a soft tray, with actions on the tray.Data GridComponentA spreadsheet grid for large data: pinned columns, range selection, editing, and live Sum and Avg.