Layout

Scroll Area

A framed, keyboard-focusable panel that scrolls long content with the browser's own thin scrollbars.

Class name	Type	Description
`scroll-areaplf:scroll-area`	Component	The frame around the scrolling panel
`scroll-area-viewportplf:scroll-area-viewport`	Part	The focusable region that scrolls
`scroll-area-contentplf:scroll-area-content`	Part	The padded content
`scroll-area-rowplf:scroll-area-row`	Part	Lines items up in one row
`scroll-area-horizontalplf:scroll-area-horizontal`	Direction	Scrolls sideways

Default

Give the viewport role="region", tabindex="0" and a name, so keyboard users can focus it and scroll with the arrow keys.

Recent activity

Monthly report is ready

Revenue and activity for October.

Today, 09:42
Olivia joined the workspace

A new member has accepted your invitation.

Today, 08:30
Invoice paid

The October subscription payment is complete.

Yesterday, 16:15
Design project updated

Sofia added new files to the project.

Yesterday, 14:20
Weekly digest sent

Your team received the latest workspace updates.

Yesterday, 09:00
Review completed

Jackson approved the latest project draft.

Oct 3, 11:05
New workspace created

The product team has a place for its next release.

Oct 2, 15:40
Report scheduled

Your next summary will arrive on Monday.

Oct 1, 10:10

<div class="flex flex-col gap-4">
  <h3 id="scroll-area-activity-title">Recent activity</h3>
  <div class="scroll-area">
    <div class="scroll-area-viewport" role="region" tabindex="0" aria-labelledby="scroll-area-activity-title">
      <div class="scroll-area-content flex flex-col gap-4">
        <ul class="item-group" role="list">
          <li class="item item-sm">
            <span class="item-media"><span class="icon icon-file-text"></span></span>
            <div class="item-content">
              <p class="item-title">Monthly report is ready</p>
              <p class="item-description">Revenue and activity for October.</p>
              <p class="item-description">Today, 09:42</p>
            </div>
          </li>
          <li class="item item-sm">
            <span class="item-media"><span class="icon icon-mail-check"></span></span>
            <div class="item-content">
              <p class="item-title">Olivia joined the workspace</p>
              <p class="item-description">A new member has accepted your invitation.</p>
              <p class="item-description">Today, 08:30</p>
            </div>
          </li>
          <li class="item item-sm">
            <span class="item-media"><span class="icon icon-file-spreadsheet"></span></span>
            <div class="item-content">
              <p class="item-title">Invoice paid</p>
              <p class="item-description">The October subscription payment is complete.</p>
              <p class="item-description">Yesterday, 16:15</p>
            </div>
          </li>
          <li class="item item-sm">
            <span class="item-media"><span class="icon icon-folder"></span></span>
            <div class="item-content">
              <p class="item-title">Design project updated</p>
              <p class="item-description">Sofia added new files to the project.</p>
              <p class="item-description">Yesterday, 14:20</p>
            </div>
          </li>
          <li class="item item-sm">
            <span class="item-media"><span class="icon icon-bell"></span></span>
            <div class="item-content">
              <p class="item-title">Weekly digest sent</p>
              <p class="item-description">Your team received the latest workspace updates.</p>
              <p class="item-description">Yesterday, 09:00</p>
            </div>
          </li>
          <li class="item item-sm">
            <span class="item-media"><span class="icon icon-clipboard"></span></span>
            <div class="item-content">
              <p class="item-title">Review completed</p>
              <p class="item-description">Jackson approved the latest project draft.</p>
              <p class="item-description">Oct 3, 11:05</p>
            </div>
          </li>
          <li class="item item-sm">
            <span class="item-media"><span class="icon icon-stack-2"></span></span>
            <div class="item-content">
              <p class="item-title">New workspace created</p>
              <p class="item-description">The product team has a place for its next release.</p>
              <p class="item-description">Oct 2, 15:40</p>
            </div>
          </li>
          <li class="item item-sm">
            <span class="item-media"><span class="icon icon-clock"></span></span>
            <div class="item-content">
              <p class="item-title">Report scheduled</p>
              <p class="item-description">Your next summary will arrive on Monday.</p>
              <p class="item-description">Oct 1, 10:10</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="plf:flex plf:flex-col plf:gap-4">
  <h3 id="scroll-area-activity-title">Recent activity</h3>
  <div class="plf:scroll-area">
    <div class="plf:scroll-area-viewport" role="region" tabindex="0" aria-labelledby="scroll-area-activity-title">
      <div class="plf:scroll-area-content plf:flex plf:flex-col plf:gap-4">
        <ul class="plf:item-group" role="list">
          <li class="plf:item plf:item-sm">
            <span class="plf:item-media"><span class="plf:icon plf:icon-file-text"></span></span>
            <div class="plf:item-content">
              <p class="plf:item-title">Monthly report is ready</p>
              <p class="plf:item-description">Revenue and activity for October.</p>
              <p class="plf:item-description">Today, 09:42</p>
            </div>
          </li>
          <li class="plf:item plf:item-sm">
            <span class="plf:item-media"><span class="plf:icon plf:icon-mail-check"></span></span>
            <div class="plf:item-content">
              <p class="plf:item-title">Olivia joined the workspace</p>
              <p class="plf:item-description">A new member has accepted your invitation.</p>
              <p class="plf:item-description">Today, 08:30</p>
            </div>
          </li>
          <li class="plf:item plf:item-sm">
            <span class="plf:item-media"><span class="plf:icon plf:icon-file-spreadsheet"></span></span>
            <div class="plf:item-content">
              <p class="plf:item-title">Invoice paid</p>
              <p class="plf:item-description">The October subscription payment is complete.</p>
              <p class="plf:item-description">Yesterday, 16:15</p>
            </div>
          </li>
          <li class="plf:item plf:item-sm">
            <span class="plf:item-media"><span class="plf:icon plf:icon-folder"></span></span>
            <div class="plf:item-content">
              <p class="plf:item-title">Design project updated</p>
              <p class="plf:item-description">Sofia added new files to the project.</p>
              <p class="plf:item-description">Yesterday, 14:20</p>
            </div>
          </li>
          <li class="plf:item plf:item-sm">
            <span class="plf:item-media"><span class="plf:icon plf:icon-bell"></span></span>
            <div class="plf:item-content">
              <p class="plf:item-title">Weekly digest sent</p>
              <p class="plf:item-description">Your team received the latest workspace updates.</p>
              <p class="plf:item-description">Yesterday, 09:00</p>
            </div>
          </li>
          <li class="plf:item plf:item-sm">
            <span class="plf:item-media"><span class="plf:icon plf:icon-clipboard"></span></span>
            <div class="plf:item-content">
              <p class="plf:item-title">Review completed</p>
              <p class="plf:item-description">Jackson approved the latest project draft.</p>
              <p class="plf:item-description">Oct 3, 11:05</p>
            </div>
          </li>
          <li class="plf:item plf:item-sm">
            <span class="plf:item-media"><span class="plf:icon plf:icon-stack-2"></span></span>
            <div class="plf:item-content">
              <p class="plf:item-title">New workspace created</p>
              <p class="plf:item-description">The product team has a place for its next release.</p>
              <p class="plf:item-description">Oct 2, 15:40</p>
            </div>
          </li>
          <li class="plf:item plf:item-sm">
            <span class="plf:item-media"><span class="plf:icon plf:icon-clock"></span></span>
            <div class="plf:item-content">
              <p class="plf:item-title">Report scheduled</p>
              <p class="plf:item-description">Your next summary will arrive on Monday.</p>
              <p class="plf:item-description">Oct 1, 10:10</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

import { useId } from 'react';
import { Icon, itemClass, ItemContent, ItemDescription, ItemGroup, ScrollArea, ScrollAreaContent, ScrollAreaViewport } from '@pelatform/react';

const activity = [
  { icon: 'file-text', title: 'Monthly report is ready', description: 'Revenue and activity for October.', time: 'Today, 09:42' },
  { icon: 'mail-check', title: 'Olivia joined the workspace', description: 'A new member has accepted your invitation.', time: 'Today, 08:30' },
  { icon: 'file-spreadsheet', title: 'Invoice paid', description: 'The October subscription payment is complete.', time: 'Yesterday, 16:15' },
  { icon: 'folder', title: 'Design project updated', description: 'Sofia added new files to the project.', time: 'Yesterday, 14:20' },
  { icon: 'bell', title: 'Weekly digest sent', description: 'Your team received the latest workspace updates.', time: 'Yesterday, 09:00' },
  { icon: 'clipboard', title: 'Review completed', description: 'Jackson approved the latest project draft.', time: 'Oct 3, 11:05' },
  { icon: 'stack-2', title: 'New workspace created', description: 'The product team has a place for its next release.', time: 'Oct 2, 15:40' },
  { icon: 'clock', title: 'Report scheduled', description: 'Your next summary will arrive on Monday.', time: 'Oct 1, 10:10' },
] as const;

export function Example() {
  const id = useId();

  return (
    <div className="flex flex-col gap-4">
      <h3 id={id}>Recent activity</h3>
      <ScrollArea>
        <ScrollAreaViewport aria-labelledby={id}>
          <ScrollAreaContent className="flex flex-col gap-4">
            <ItemGroup>
              {activity.map(entry => (
                <li className={itemClass({ size: 'sm' })} key={entry.title}>
                  <span className="item-media"><Icon name={entry.icon} /></span>
                  <ItemContent>
                    <p className="item-title">{entry.title}</p>
                    <ItemDescription>{entry.description}</ItemDescription>
                    <ItemDescription>{entry.time}</ItemDescription>
                  </ItemContent>
                </li>
              ))}
            </ItemGroup>
          </ScrollAreaContent>
        </ScrollAreaViewport>
      </ScrollArea>
    </div>
  );
}

import { useId } from 'react';
import { Icon, itemClass, ItemContent, ItemDescription, ItemGroup, ScrollArea, ScrollAreaContent, ScrollAreaViewport } from '@pelatform/react/prefixed';

const activity = [
  { icon: 'file-text', title: 'Monthly report is ready', description: 'Revenue and activity for October.', time: 'Today, 09:42' },
  { icon: 'mail-check', title: 'Olivia joined the workspace', description: 'A new member has accepted your invitation.', time: 'Today, 08:30' },
  { icon: 'file-spreadsheet', title: 'Invoice paid', description: 'The October subscription payment is complete.', time: 'Yesterday, 16:15' },
  { icon: 'folder', title: 'Design project updated', description: 'Sofia added new files to the project.', time: 'Yesterday, 14:20' },
  { icon: 'bell', title: 'Weekly digest sent', description: 'Your team received the latest workspace updates.', time: 'Yesterday, 09:00' },
  { icon: 'clipboard', title: 'Review completed', description: 'Jackson approved the latest project draft.', time: 'Oct 3, 11:05' },
  { icon: 'stack-2', title: 'New workspace created', description: 'The product team has a place for its next release.', time: 'Oct 2, 15:40' },
  { icon: 'clock', title: 'Report scheduled', description: 'Your next summary will arrive on Monday.', time: 'Oct 1, 10:10' },
] as const;

export function Example() {
  const id = useId();

  return (
    <div className="plf:flex plf:flex-col plf:gap-4">
      <h3 id={id}>Recent activity</h3>
      <ScrollArea>
        <ScrollAreaViewport aria-labelledby={id}>
          <ScrollAreaContent className="plf:flex plf:flex-col plf:gap-4">
            <ItemGroup>
              {activity.map(entry => (
                <li className={itemClass({ size: 'sm' })} key={entry.title}>
                  <span className="plf:item-media"><Icon name={entry.icon} /></span>
                  <ItemContent>
                    <p className="plf:item-title">{entry.title}</p>
                    <ItemDescription>{entry.description}</ItemDescription>
                    <ItemDescription>{entry.time}</ItemDescription>
                  </ItemContent>
                </li>
              ))}
            </ItemGroup>
          </ScrollAreaContent>
        </ScrollAreaViewport>
      </ScrollArea>
    </div>
  );
}

Horizontal

Give each item in the row a fixed width, and keep a parent grid or flex track shrinkable (minmax(0, 1fr) or min-inline-size: 0) so the row scrolls here instead of the page.

Explore your workspace

Analytics

Follow revenue, activity and workspace trends.

Updated today

Open analytics

Customers

Keep customer records and account details together.

126 active accounts

Browse customers

Billing

Review invoices, payments and reporting periods.

Monthly billing

Choose a period

Projects

Organize ongoing work and useful resources.

8 active projects

Browse projects

Workspace

Find the pages and tools your team uses most.

Team workspace

Explore workspace

Resources

Discover guides and reusable building blocks.

Ready to explore

Browse resources

<div class="flex flex-col gap-4">
  <h3 id="scroll-area-workspaces-title">Explore your workspace</h3>
  <div class="scroll-area scroll-area-horizontal">
    <div class="scroll-area-viewport" role="region" tabindex="0" aria-labelledby="scroll-area-workspaces-title">
      <div class="scroll-area-content">
        <div class="scroll-area-row">
          <article class="card flex flex-col gap-0" style="flex: none; inline-size: 16rem">
            <div class="card-header">
              <div class="flex flex-wrap items-center gap-2">
                <span class="item-media"><span class="icon icon-chart-column"></span></span>
                <h4 class="card-title">Analytics</h4>
              </div>
            </div>
            <div class="card-body flex flex-col gap-4" style="flex: 1">
              <p class="card-description">Follow revenue, activity and workspace trends.</p>
              <p>Updated today</p>
            </div>
            <div class="card-actions">
              <a class="btn btn-outline btn-sm" href="#">Open analytics</a>
            </div>
          </article>
          <article class="card flex flex-col gap-0" style="flex: none; inline-size: 16rem">
            <div class="card-header">
              <div class="flex flex-wrap items-center gap-2">
                <span class="item-media"><span class="icon icon-table"></span></span>
                <h4 class="card-title">Customers</h4>
              </div>
            </div>
            <div class="card-body flex flex-col gap-4" style="flex: 1">
              <p class="card-description">Keep customer records and account details together.</p>
              <p>126 active accounts</p>
            </div>
            <div class="card-actions">
              <a class="btn btn-outline btn-sm" href="#">Browse customers</a>
            </div>
          </article>
          <article class="card flex flex-col gap-0" style="flex: none; inline-size: 16rem">
            <div class="card-header">
              <div class="flex flex-wrap items-center gap-2">
                <span class="item-media"><span class="icon icon-file-spreadsheet"></span></span>
                <h4 class="card-title">Billing</h4>
              </div>
            </div>
            <div class="card-body flex flex-col gap-4" style="flex: 1">
              <p class="card-description">Review invoices, payments and reporting periods.</p>
              <p>Monthly billing</p>
            </div>
            <div class="card-actions">
              <a class="btn btn-outline btn-sm" href="#">Choose a period</a>
            </div>
          </article>
          <article class="card flex flex-col gap-0" style="flex: none; inline-size: 16rem">
            <div class="card-header">
              <div class="flex flex-wrap items-center gap-2">
                <span class="item-media"><span class="icon icon-folder"></span></span>
                <h4 class="card-title">Projects</h4>
              </div>
            </div>
            <div class="card-body flex flex-col gap-4" style="flex: 1">
              <p class="card-description">Organize ongoing work and useful resources.</p>
              <p>8 active projects</p>
            </div>
            <div class="card-actions">
              <a class="btn btn-outline btn-sm" href="#">Browse projects</a>
            </div>
          </article>
          <article class="card flex flex-col gap-0" style="flex: none; inline-size: 16rem">
            <div class="card-header">
              <div class="flex flex-wrap items-center gap-2">
                <span class="item-media"><span class="icon icon-layout-dashboard"></span></span>
                <h4 class="card-title">Workspace</h4>
              </div>
            </div>
            <div class="card-body flex flex-col gap-4" style="flex: 1">
              <p class="card-description">Find the pages and tools your team uses most.</p>
              <p>Team workspace</p>
            </div>
            <div class="card-actions">
              <a class="btn btn-outline btn-sm" href="#">Explore workspace</a>
            </div>
          </article>
          <article class="card flex flex-col gap-0" style="flex: none; inline-size: 16rem">
            <div class="card-header">
              <div class="flex flex-wrap items-center gap-2">
                <span class="item-media"><span class="icon icon-stack-2"></span></span>
                <h4 class="card-title">Resources</h4>
              </div>
            </div>
            <div class="card-body flex flex-col gap-4" style="flex: 1">
              <p class="card-description">Discover guides and reusable building blocks.</p>
              <p>Ready to explore</p>
            </div>
            <div class="card-actions">
              <a class="btn btn-outline btn-sm" href="#">Browse resources</a>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="plf:flex plf:flex-col plf:gap-4">
  <h3 id="scroll-area-workspaces-title">Explore your workspace</h3>
  <div class="plf:scroll-area plf:scroll-area-horizontal">
    <div class="plf:scroll-area-viewport" role="region" tabindex="0" aria-labelledby="scroll-area-workspaces-title">
      <div class="plf:scroll-area-content">
        <div class="plf:scroll-area-row">
          <article class="plf:card plf:flex plf:flex-col plf:gap-0" style="flex: none; inline-size: 16rem">
            <div class="plf:card-header">
              <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
                <span class="plf:item-media"><span class="plf:icon plf:icon-chart-column"></span></span>
                <h4 class="plf:card-title">Analytics</h4>
              </div>
            </div>
            <div class="plf:card-body plf:flex plf:flex-col plf:gap-4" style="flex: 1">
              <p class="plf:card-description">Follow revenue, activity and workspace trends.</p>
              <p>Updated today</p>
            </div>
            <div class="plf:card-actions">
              <a class="plf:btn plf:btn-outline plf:btn-sm" href="#">Open analytics</a>
            </div>
          </article>
          <article class="plf:card plf:flex plf:flex-col plf:gap-0" style="flex: none; inline-size: 16rem">
            <div class="plf:card-header">
              <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
                <span class="plf:item-media"><span class="plf:icon plf:icon-table"></span></span>
                <h4 class="plf:card-title">Customers</h4>
              </div>
            </div>
            <div class="plf:card-body plf:flex plf:flex-col plf:gap-4" style="flex: 1">
              <p class="plf:card-description">Keep customer records and account details together.</p>
              <p>126 active accounts</p>
            </div>
            <div class="plf:card-actions">
              <a class="plf:btn plf:btn-outline plf:btn-sm" href="#">Browse customers</a>
            </div>
          </article>
          <article class="plf:card plf:flex plf:flex-col plf:gap-0" style="flex: none; inline-size: 16rem">
            <div class="plf:card-header">
              <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
                <span class="plf:item-media"><span class="plf:icon plf:icon-file-spreadsheet"></span></span>
                <h4 class="plf:card-title">Billing</h4>
              </div>
            </div>
            <div class="plf:card-body plf:flex plf:flex-col plf:gap-4" style="flex: 1">
              <p class="plf:card-description">Review invoices, payments and reporting periods.</p>
              <p>Monthly billing</p>
            </div>
            <div class="plf:card-actions">
              <a class="plf:btn plf:btn-outline plf:btn-sm" href="#">Choose a period</a>
            </div>
          </article>
          <article class="plf:card plf:flex plf:flex-col plf:gap-0" style="flex: none; inline-size: 16rem">
            <div class="plf:card-header">
              <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
                <span class="plf:item-media"><span class="plf:icon plf:icon-folder"></span></span>
                <h4 class="plf:card-title">Projects</h4>
              </div>
            </div>
            <div class="plf:card-body plf:flex plf:flex-col plf:gap-4" style="flex: 1">
              <p class="plf:card-description">Organize ongoing work and useful resources.</p>
              <p>8 active projects</p>
            </div>
            <div class="plf:card-actions">
              <a class="plf:btn plf:btn-outline plf:btn-sm" href="#">Browse projects</a>
            </div>
          </article>
          <article class="plf:card plf:flex plf:flex-col plf:gap-0" style="flex: none; inline-size: 16rem">
            <div class="plf:card-header">
              <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
                <span class="plf:item-media"><span class="plf:icon plf:icon-layout-dashboard"></span></span>
                <h4 class="plf:card-title">Workspace</h4>
              </div>
            </div>
            <div class="plf:card-body plf:flex plf:flex-col plf:gap-4" style="flex: 1">
              <p class="plf:card-description">Find the pages and tools your team uses most.</p>
              <p>Team workspace</p>
            </div>
            <div class="plf:card-actions">
              <a class="plf:btn plf:btn-outline plf:btn-sm" href="#">Explore workspace</a>
            </div>
          </article>
          <article class="plf:card plf:flex plf:flex-col plf:gap-0" style="flex: none; inline-size: 16rem">
            <div class="plf:card-header">
              <div class="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
                <span class="plf:item-media"><span class="plf:icon plf:icon-stack-2"></span></span>
                <h4 class="plf:card-title">Resources</h4>
              </div>
            </div>
            <div class="plf:card-body plf:flex plf:flex-col plf:gap-4" style="flex: 1">
              <p class="plf:card-description">Discover guides and reusable building blocks.</p>
              <p>Ready to explore</p>
            </div>
            <div class="plf:card-actions">
              <a class="plf:btn plf:btn-outline plf:btn-sm" href="#">Browse resources</a>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
</div>

import { useId } from 'react';
import { buttonClass, CardActions, CardBody, CardDescription, CardHeader, CardTitle, Icon, ScrollArea, ScrollAreaContent, ScrollAreaRow, ScrollAreaViewport } from '@pelatform/react';

const workspaces = [
  { icon: 'chart-column', title: 'Analytics', description: 'Follow revenue, activity and workspace trends.', detail: 'Updated today', action: 'Open analytics' },
  { icon: 'table', title: 'Customers', description: 'Keep customer records and account details together.', detail: '126 active accounts', action: 'Browse customers' },
  { icon: 'file-spreadsheet', title: 'Billing', description: 'Review invoices, payments and reporting periods.', detail: 'Monthly billing', action: 'Choose a period' },
  { icon: 'folder', title: 'Projects', description: 'Organize ongoing work and useful resources.', detail: '8 active projects', action: 'Browse projects' },
  { icon: 'layout-dashboard', title: 'Workspace', description: 'Find the pages and tools your team uses most.', detail: 'Team workspace', action: 'Explore workspace' },
  { icon: 'stack-2', title: 'Resources', description: 'Discover guides and reusable building blocks.', detail: 'Ready to explore', action: 'Browse resources' },
] as const;

export function Example() {
  const id = useId();

  return (
    <div className="flex flex-col gap-4">
      <h3 id={id}>Explore your workspace</h3>
      <ScrollArea orientation="horizontal">
        <ScrollAreaViewport aria-labelledby={id}>
          <ScrollAreaContent>
            <ScrollAreaRow>
              {workspaces.map(workspace => (
                <article className="card flex flex-col gap-0" style={{ flex: 'none', inlineSize: '16rem' }} key={workspace.title}>
                  <CardHeader>
                    <div className="flex flex-wrap items-center gap-2">
                      <span className="item-media"><Icon name={workspace.icon} /></span>
                      <CardTitle level={4}>{workspace.title}</CardTitle>
                    </div>
                  </CardHeader>
                  <CardBody className="flex flex-col gap-4" style={{ flex: 1 }}>
                    <CardDescription>{workspace.description}</CardDescription>
                    <p>{workspace.detail}</p>
                  </CardBody>
                  <CardActions>
                    <a className={buttonClass({ variant: 'outline', size: 'sm' })} href="#">{workspace.action}</a>
                  </CardActions>
                </article>
              ))}
            </ScrollAreaRow>
          </ScrollAreaContent>
        </ScrollAreaViewport>
      </ScrollArea>
    </div>
  );
}

import { useId } from 'react';
import { buttonClass, CardActions, CardBody, CardDescription, CardHeader, CardTitle, Icon, ScrollArea, ScrollAreaContent, ScrollAreaRow, ScrollAreaViewport } from '@pelatform/react/prefixed';

const workspaces = [
  { icon: 'chart-column', title: 'Analytics', description: 'Follow revenue, activity and workspace trends.', detail: 'Updated today', action: 'Open analytics' },
  { icon: 'table', title: 'Customers', description: 'Keep customer records and account details together.', detail: '126 active accounts', action: 'Browse customers' },
  { icon: 'file-spreadsheet', title: 'Billing', description: 'Review invoices, payments and reporting periods.', detail: 'Monthly billing', action: 'Choose a period' },
  { icon: 'folder', title: 'Projects', description: 'Organize ongoing work and useful resources.', detail: '8 active projects', action: 'Browse projects' },
  { icon: 'layout-dashboard', title: 'Workspace', description: 'Find the pages and tools your team uses most.', detail: 'Team workspace', action: 'Explore workspace' },
  { icon: 'stack-2', title: 'Resources', description: 'Discover guides and reusable building blocks.', detail: 'Ready to explore', action: 'Browse resources' },
] as const;

export function Example() {
  const id = useId();

  return (
    <div className="plf:flex plf:flex-col plf:gap-4">
      <h3 id={id}>Explore your workspace</h3>
      <ScrollArea orientation="horizontal">
        <ScrollAreaViewport aria-labelledby={id}>
          <ScrollAreaContent>
            <ScrollAreaRow>
              {workspaces.map(workspace => (
                <article className="plf:card plf:flex plf:flex-col plf:gap-0" style={{ flex: 'none', inlineSize: '16rem' }} key={workspace.title}>
                  <CardHeader>
                    <div className="plf:flex plf:flex-wrap plf:items-center plf:gap-2">
                      <span className="plf:item-media"><Icon name={workspace.icon} /></span>
                      <CardTitle level={4}>{workspace.title}</CardTitle>
                    </div>
                  </CardHeader>
                  <CardBody className="plf:flex plf:flex-col plf:gap-4" style={{ flex: 1 }}>
                    <CardDescription>{workspace.description}</CardDescription>
                    <p>{workspace.detail}</p>
                  </CardBody>
                  <CardActions>
                    <a className={buttonClass({ variant: 'outline', size: 'sm' })} href="#">{workspace.action}</a>
                  </CardActions>
                </article>
              ))}
            </ScrollAreaRow>
          </ScrollAreaContent>
        </ScrollAreaViewport>
      </ScrollArea>
    </div>
  );
}

React

ScrollArea from @pelatform/react renders this frame, and each part is a component of its own; it needs no script.

Prop	Values	Default
`orientation`	`vertical`, `horizontal`, which scrolls sideways	`vertical`

Part	Element
`ScrollAreaViewport`	A `div` with `scroll-area-viewport`, a region you reach with Tab (`role="region"`, `tabIndex={0}`), named by your `aria-labelledby` or `aria-label`
`ScrollAreaContent`	A `div` with `scroll-area-content`
`ScrollAreaRow`	A `div` with `scroll-area-row`, the row of a horizontal Scroll Area

The other props are the element’s own, className and ref included.

CSS variables

Variable	Default
`--plf-scroll-area-height`	`20rem` (320px); `auto` with `scroll-area-horizontal`, where a height scrolls both ways
`--plf-scroll-area-padding`	Space 4, `1rem` (16px)
`--plf-scroll-area-gap`	Space 4, `1rem` (16px), between row items
`--plf-scroll-area-border`	Subtle border
`--plf-scroll-area-radius`	`--plf-radius-lg`, `0.5rem` (8px)
`--plf-scroll-area-bg`	Transparent
`--plf-scroll-area-thumb-bg`	Muted text at 70%
`--plf-scroll-area-thumb-hover-bg`	Muted text, while hovered or focused
`--plf-scroll-area-track-bg`	Transparent
`--plf-scroll-area-scrollbar-width`	`thin`; `auto` for the platform width

#Default