Revola

Scrollables

Scrollable dialog examples with Revola, showcasing various content overflow patterns and sticky positioning techniques.

Revola handles content overflow with different scrolling patterns and sticky positioning techniques that work across both drawer and dialog modes.

Native Scrollbar

A scrollable dialog using the browser's native scrollbar for familiar OS-native behavior.

npx shadcn@latest add https://revola.sameerjs.com/r/native-scrollbar.json

Custom Scrollbar

A scrollable dialog with custom styled scrollbar using ScrollArea for consistent cross-browser styling.

npx shadcn@latest add https://revola.sameerjs.com/r/custom-scrollbar.json

A scrollable dialog with a sticky header that remains visible while content scrolls.

npx shadcn@latest add https://revola.sameerjs.com/r/sticky-header.json

A scrollable dialog with a sticky footer containing action buttons that stay accessible.

npx shadcn@latest add https://revola.sameerjs.com/r/sticky-footer.json

A scrollable dialog demonstrating both sticky header and footer with scroll-based interaction.

npx shadcn@latest add https://revola.sameerjs.com/r/terms-and-conditions.json

On this page