Overflow container with a thin, theme-aware scrollbar. Give it an explicit height (for example class="h-64") so the inner content can scroll.
<ply-scroll-area class="h-64"> <p>Long content…</p> </ply-scroll-area>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add scroll-area
// Paths are relative to aliases.components (default: src/app/components)
import { ScrollAreaComponent } from './scroll-area/scroll-area.component';
@Component({
selector: 'app-scroll-area-example',
imports: [
ScrollAreaComponent
],
template: `...`
})
export class ScrollAreaExampleComponent {}Install
npx ply-ui-cli add scroll-area
Run the following command to add this component to your project:
npx ply-ui-cli add scroll-area
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add scroll-area
// Paths are relative to aliases.components (default: src/app/components)
import { ScrollAreaComponent } from './scroll-area/scroll-area.component';
@Component({
selector: 'app-your-component',
imports: [
ScrollAreaComponent
],
template: `...`
})
export class YourComponent {} API for scroll-area — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-scroll-area | — | — | — | Overflow container with a thin, theme-aware scrollbar. Give it an explicit height (for example `class="h-64"`) so the inner content can scroll. |
ply-scroll-area | class | string | '' | Extra host classes merged via `cn()`. Include a height so overflow can scroll. |
Content