Scroll Area
A native scroller with its own scrollbar out of the way: a 2px line that shows while scrolling, widens when the pointer reaches for it and fades once you stop.
$149 once · every Pro piece
Customize
Edge masks fade with the distance left to scroll.
Install
npx shadcn@latest add @obsyde/scroll-areaNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { ScrollArea } from '@/components/obsyde/ember/scroll-area/ScrollArea';
export function Example() {
return (
<ScrollArea />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/scroll-area/ScrollArea.tsxcomponentember/scroll-area/scroll-area-demo.cssstylesember/scroll-area/scroll-area.cssstylesember/scroll-area/ScrollAreaDemo.tsxdemoember/nav-kit/motion.tssharedember/shared/spring.tssharedember/shared/accent.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
heightHeight | number | 240 |
linesLines | number | 60 |