Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Dialog - Terms and Conditions
A terms and conditions dialog requiring users to scroll to bottom before accepting, ensuring content review
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Making users actually read terms instead of blindly clicking Accept? This React dialog tracks scroll position with onScrollCapture, enabling the Accept button only after users reach the bottom. Built with shadcn/ui Dialog and ScrollArea, it enforces content review through scroll detection. Perfect for legal agreements, terms of service, or compliance workflows requiring confirmed content reading.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Scrollable Dialog
Dialog with scrollable content area
Sticky Header
Scrollable dialog with fixed header
Checkbox Component
Agreement confirmation inputs
Button Component
Disabled button states
ScrollArea Component
Custom scrollbar container
Alert Dialog
Confirmation dialogs