scroll more
scroll indicator wrapper — shows gradient fades and/or a clickable badge when content overflows. useful for panels, sidebars, and forms where users might not realize there's more content below.
examples
fade only — subtle gradient at edges
1.review submission documents
2.verify identity credentials
3.check compliance requirements
4.validate tax information
5.process background check
6.confirm address details
7.review financial statements
8.check licensing status
9.validate insurance coverage
10.process payment information
11.verify employment history
12.check reference contacts
13.review legal disclosures
14.validate certification status
15.process security clearance
16.confirm beneficiary details
17.review audit findings
18.check regulatory filings
19.validate reporting data
20.process final approval
badge only — clickable pill that scrolls down
1.review submission documents
2.verify identity credentials
3.check compliance requirements
4.validate tax information
5.process background check
6.confirm address details
7.review financial statements
8.check licensing status
9.validate insurance coverage
10.process payment information
11.verify employment history
12.check reference contacts
13.review legal disclosures
14.validate certification status
15.process security clearance
16.confirm beneficiary details
17.review audit findings
18.check regulatory filings
19.validate reporting data
20.process final approval
both (default) — fade + badge
1.review submission documents
2.verify identity credentials
3.check compliance requirements
4.validate tax information
5.process background check
6.confirm address details
7.review financial statements
8.check licensing status
9.validate insurance coverage
10.process payment information
11.verify employment history
12.check reference contacts
13.review legal disclosures
14.validate certification status
15.process security clearance
16.confirm beneficiary details
17.review audit findings
18.check regulatory filings
19.validate reporting data
20.process final approval
installation
bash
1npx shadcn@latest add https://ui.inference.sh/r/scroll-more.jsonusage
tsx
1import { ScrollMore } from "@/components/scroll-more"23export function TermsPanel() {4 return (5 <div className="h-[300px]">6 <ScrollMore indicator="both">7 <div className="p-4 space-y-4">8 <p>lots of content here...</p>9 {/* more content */}10 </div>11 </ScrollMore>12 </div>13 )14}props
| prop | type | default | description |
|---|---|---|---|
| indicator | 'fade' | 'badge' | 'both' | 'both' | which scroll indicators to show |
| fadeHeight | number | 32 | gradient fade height in pixels |
| badgeLabel | string | 'scroll for more' | text shown in the badge pill |
| className | string | — | additional classes for the wrapper |