Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA dialog for long reading with a fixed header and footer, edge shadows that appear only when there is more to scroll, section links and a keyboard-scrollable region.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this for terms, privacy summaries, release notes or any text longer than the screen that must stay inside a dialog.
Do not use it for documents people need to read carefully or print: link to a page. Do not hide the primary action inside the scrolling part.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | - | Opens the dialog. |
title, description | ReactNode | - | Dialog text; a string title also names the scroll region. |
sections | { id, title, body }[] | - | The parts of the text. |
region with tabindex="0", so keyboard users can scroll it (WCAG 2.1.1).data-edge-top and data-edge-bottom expose the state.section into view.| Key | Action |
|---|---|
| Tab | reaches the scroll region, then the footer |
| Arrow keys, Page Up / Down | scroll the focused region |
The pattern ships a Testing Library test (dialog-scrollable-sections.test.tsx) that covers the focusable region and navigation, edge shadows following scroll, section links and closing.