ScrollEdge
StableA scrolling area whose top and bottom edges blur gradually, so content softens near the edge instead of meeting a hard line.
Also known as scroll shadow, scroll fade, overflow indicator
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Both edges on a chat-like list
- I bought the blender on 2 September.
- It stopped working after four days.
- I have the invoice and a short video.
- The seller said to wait a week.
- I waited. Nobody called me back.
- I would like a full refund of ₹2,340.
- Here is what the rule says about this.
- I will write the message for you to read first.
- Nothing is sent until you press Send.
- They have until 27 October to reply.
<ScrollEdge label="Conversation" className="h-64 w-full max-w-md rounded-card border border-line">
<ul className="flex flex-col gap-3 px-4 py-12 text-body leading-5">
{lines.map((l, i) => (
<li key={l} className={i % 2 ? "ml-8 rounded-card bg-sunken px-3 py-2" : "mr-8 rounded-card border border-line px-3 py-2"}>{l}</li>
))}
</ul>
</ScrollEdge>Scroll the list. Lines passing the top and bottom soften gradually. The padding inside keeps the first and last lines clear.
When to use it
Lets a long list scroll under a header or footer without a hard line, so the screen feels like one surface. The fade is decoration only: it never takes focus and never blocks a tap.
Made of: Outer box · Scrolling region · Top edge · Bottom edge
Use it for
- A chat thread that scrolls under a header and a message box.
- A panel body that scrolls under a fixed title.
- Any long list where a border line at the edge feels heavy.
Not for
- A panel that stays beside the page while people keep working: use CanvasPanel.
- A surface that slides over the page: use Sheet.
- Content that hides and shows on request: use Collapsible.
Do and avoid
Pay by Friday to keep the seat.
Do
- Give the outer box a fixed or flexible height, or the content cannot scroll.
- Pad the content by at least the fade size at the ends that fade.
- Keep the header or footer you sit under transparent, so the blur shows through.
- Use it only on edges where content really passes underneath.
Avoid
- Do not rely on the blur to hide anything private.
- Do not stack several ScrollEdge boxes inside each other.
- Do not put the only copy of important text in the fade zone.
- Do not use it where the edge has a border you want people to see.
On a phone
- The fade at the edge is drawn over the content and ignores touch, so a finger scrolls the content underneath as normal.
- Scrolling stops at the end of the area instead of carrying on into the page behind it.
- Give it a height, or place it in a parent that has one, or it will not scroll.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| edge | "top" | "bottom" | "both" | "both" | Which edge softens. |
| size | number | 48 | Height of the fade zone in px. |
| children | ReactNode | none | The content that scrolls. |
| label | string | "Scrollable content" | Accessible name of the scrolling region. |
| className | string | none | Classes for the outer box. Give it a height, or place it in a cell that has one. |
| contentClassName | string | none | Classes for the element that scrolls. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ScrollEdge switches all of this from its properties panel, across 3 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Edge | edge | Top, Bottom, Both |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- at the start
- The top edge still shows its fade, so keep padding at the top of the content so the first line is not softened.
- reduced transparency
- When the system asks for reduced transparency, only a plain fade from the page colour to clear is drawn, with no blur.
- no backdrop-filter
- In a browser without backdrop-filter, the same plain fade is drawn.
- focus
- The scrolling region shows a visible focus ring, drawn inside the box, when reached by keyboard.
Tokens
Change one of these and every part that uses it follows.
--bg
Built in
- The scrolling element is a region with an accessible name and tabIndex 0, so keyboard users can reach it and scroll with the arrow keys, Page Up and Page Down.
- The edge layers are aria-hidden and ignore the pointer, so they never take focus or block taps.
- Scrolling itself is the browser's own, so keyboard scrolling is unchanged.
- With reduced transparency, or without backdrop-filter, only a plain fade is drawn.
- The focus ring is drawn inside the box so the clipped edge does not hide it.
What you need to do
- Give the region a label that says what scrolls, such as Conversation, so screen reader users hear it.
- Add padding of at least the fade size inside the content, so the first and last lines rest in clear space.
- Do not put anything people must read inside the fade zone only. Text there is softened on purpose.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide