ScrollArea

Vùng cuộn với thanh cuộn native mỏng theo theme, cho panel, menu, danh sách bên và khối code có chiều cao cố định. Cách cuộn native và thanh cuộn native giữ nguyên; chỉ màu và độ rộng được style (scrollbar-width thin, scrollbar-color). Không có thumb vẽ riêng. Chính trang vẫn giữ thanh cuộn của trình duyệt.

npm: 0 trực tiếp, 1 tổng
registry: 2 trực tiếp, 2 tổng

Xem trước

Dự án 01

Vừa cập nhật

Dự án 02

Vừa cập nhật

Dự án 03

Vừa cập nhật

Dự án 04

Vừa cập nhật

Dự án 05

Vừa cập nhật

Dự án 06

Vừa cập nhật

Dự án 07

Vừa cập nhật

Dự án 08

Vừa cập nhật

Dự án 09

Vừa cập nhật

Dự án 10

Vừa cập nhật

Dự án 11

Vừa cập nhật

Dự án 12

Vừa cập nhật

Props

orientation
type
label

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea label="Hoạt động gần đây" className="h-48 w-64 max-w-full rounded-container border border-border">
  <div className="min-w-0">
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 07</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 08</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 09</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 10</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 11</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 12</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
  </div>
</ScrollArea>

Cách dùng

Khi nào dùng

Giữ danh sách dài, panel hoặc khối code trong chiều cao cố định hoặc tối đa trong khi trang đứng yên.
Cho vùng cuộn được một thanh cuộn native mỏng theo theme hiện tại.

Khi nào không dùng

Cả trang nên cuộn theo nội dung.
Danh sách quá dài để lướt và cần tìm. Dùng Combobox.

Biến thể

orientation

Trục nào được cuộn.

Dự án 01
Vừa cập nhật
Dự án 02
Vừa cập nhật
Dự án 03
Vừa cập nhật
Dự án 04
Vừa cập nhật
Dự án 05
Vừa cập nhật
Dự án 06
Vừa cập nhật
Dự án 07
Vừa cập nhật
Dự án 08
Vừa cập nhật
Dự án 09
Vừa cập nhật
Dự án 10
Vừa cập nhật
Dự án 11
Vừa cập nhật
Dự án 12
Vừa cập nhật
verticalmặc định
Dự án 01
Vừa cập nhật
Dự án 02
Vừa cập nhật
Dự án 03
Vừa cập nhật
Dự án 04
Vừa cập nhật
Dự án 05
Vừa cập nhật
Dự án 06
Vừa cập nhật
horizontal
Dự án 01
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 02
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 03
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 04
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 05
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 06
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 07
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 08
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 09
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 10
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 11
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
Dự án 12
Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.
both

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea label="Hoạt động gần đây" className="h-48 w-64 max-w-full rounded-container border border-border">
  <div className="min-w-0">
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 07</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 08</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 09</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 10</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 11</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 12</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
  </div>
</ScrollArea>
<ScrollArea orientation="horizontal" label="Hoạt động gần đây" className="h-48 w-64 max-w-full rounded-container border border-border">
  <div className="flex gap-md p-md">
    <div className="w-40 shrink-0 rounded-container border border-border bg-background-surface p-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="w-40 shrink-0 rounded-container border border-border bg-background-surface p-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="w-40 shrink-0 rounded-container border border-border bg-background-surface p-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="w-40 shrink-0 rounded-container border border-border bg-background-surface p-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="w-40 shrink-0 rounded-container border border-border bg-background-surface p-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="w-40 shrink-0 rounded-container border border-border bg-background-surface p-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
  </div>
</ScrollArea>
<ScrollArea orientation="both" label="Hoạt động gần đây" className="h-48 w-64 max-w-full rounded-container border border-border">
  <div className="w-160">
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 07</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 08</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 09</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 10</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 11</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 12</p>
      <p className="text-xs text-text-secondary">Đã cập nhật cài đặt không gian làm việc và chia sẻ bản thiết kế mới nhất với nhóm của bạn.</p>
    </div>
  </div>
</ScrollArea>

type

auto hiện thanh cuộn native khi nội dung tràn; always giữ chỗ cho thanh (scrollbar-gutter stable) để nội dung không dịch.

Dự án 01
Vừa cập nhật
Dự án 02
Vừa cập nhật
Dự án 03
Vừa cập nhật
Dự án 04
Vừa cập nhật
Dự án 05
Vừa cập nhật
Dự án 06
Vừa cập nhật
Dự án 07
Vừa cập nhật
Dự án 08
Vừa cập nhật
Dự án 09
Vừa cập nhật
Dự án 10
Vừa cập nhật
Dự án 11
Vừa cập nhật
Dự án 12
Vừa cập nhật
automặc định
Dự án 01
Vừa cập nhật
Dự án 02
Vừa cập nhật
Dự án 03
Vừa cập nhật
Dự án 04
Vừa cập nhật
Dự án 05
Vừa cập nhật
Dự án 06
Vừa cập nhật
Dự án 07
Vừa cập nhật
Dự án 08
Vừa cập nhật
Dự án 09
Vừa cập nhật
Dự án 10
Vừa cập nhật
Dự án 11
Vừa cập nhật
Dự án 12
Vừa cập nhật
always

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea label="Hoạt động gần đây" className="h-48 w-64 max-w-full rounded-container border border-border">
  <div className="min-w-0">
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 07</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 08</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 09</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 10</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 11</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 12</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
  </div>
</ScrollArea>
<ScrollArea type="always" label="Hoạt động gần đây" className="h-48 w-64 max-w-full rounded-container border border-border">
  <div className="min-w-0">
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 07</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 08</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 09</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 10</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 11</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 12</p>
      <p className="text-xs text-text-secondary">Vừa cập nhật</p>
    </div>
  </div>
</ScrollArea>

Ví dụ

Hoạt động gần đây

Dự án 01

Đã cập nhật ghi chú không gian làm việc

Dự án 02

Đã cập nhật ghi chú không gian làm việc

Dự án 03

Đã cập nhật ghi chú không gian làm việc

Dự án 04

Đã cập nhật ghi chú không gian làm việc

Dự án 05

Đã cập nhật ghi chú không gian làm việc

Dự án 06

Đã cập nhật ghi chú không gian làm việc

Dự án 07

Đã cập nhật ghi chú không gian làm việc

Dự án 08

Đã cập nhật ghi chú không gian làm việc

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea className="h-48 w-64 max-w-full rounded-container border border-border" label="Hoạt động gần đây">
  <div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 07</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 08</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
  </div>
</ScrollArea>

Dự án theo chiều ngang

Trang web

Ứng dụng di động

Tài liệu

import { Card, CardContent } from "@/components/ui/card"
import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea orientation="horizontal" className="h-40 w-64 max-w-full rounded-container border border-border" label="Dự án">
  <div className="flex gap-md p-md">
    <Card className="w-40 shrink-0">
      <CardContent>Trang web</CardContent>
    </Card>
    <Card className="w-40 shrink-0">
      <CardContent>Ứng dụng di động</CardContent>
    </Card>
    <Card className="w-40 shrink-0">
      <CardContent>Tài liệu</CardContent>
    </Card>
  </div>
</ScrollArea>

Cả hai trục

Dự án 01

Đã cập nhật ghi chú không gian làm việc

Dự án 02

Đã cập nhật ghi chú không gian làm việc

Dự án 03

Đã cập nhật ghi chú không gian làm việc

Dự án 04

Đã cập nhật ghi chú không gian làm việc

Dự án 05

Đã cập nhật ghi chú không gian làm việc

Dự án 06

Đã cập nhật ghi chú không gian làm việc

Dự án 07

Đã cập nhật ghi chú không gian làm việc

Dự án 08

Đã cập nhật ghi chú không gian làm việc

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea orientation="both" className="h-48 w-64 max-w-full rounded-container border border-border" label="Cập nhật dự án">
  <div className="w-160">
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 07</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 08</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
  </div>
</ScrollArea>

Chỗ dành cho thanh cuộn

Dự án 01

Đã cập nhật ghi chú không gian làm việc

Dự án 02

Đã cập nhật ghi chú không gian làm việc

Dự án 03

Đã cập nhật ghi chú không gian làm việc

Dự án 04

Đã cập nhật ghi chú không gian làm việc

Dự án 05

Đã cập nhật ghi chú không gian làm việc

Dự án 06

Đã cập nhật ghi chú không gian làm việc

Dự án 07

Đã cập nhật ghi chú không gian làm việc

Dự án 08

Đã cập nhật ghi chú không gian làm việc

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea type="always" className="max-h-48 w-64 max-w-full rounded-container border border-border" label="Tất cả dự án">
  <div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 01</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 02</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 03</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 04</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 05</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 06</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 07</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
    <div className="border-b border-border px-md py-md">
      <p className="text-sm font-medium">Dự án 08</p>
      <p className="text-xs text-text-secondary">Đã cập nhật ghi chú không gian làm việc</p>
    </div>
  </div>
</ScrollArea>

Nên và không nên

Nên

Cho root một chiều cao hoặc chiều cao tối đa.
Dùng trong danh sách DropdownMenu hoặc Combobox chỉ khi chúng cần thanh theo theme; chúng đã cuộn native.
Đưa đủ nội dung để tràn trục đã chọn. Nội dung ngang cần chiều rộng lớn hơn viewport và không được co.

Không nên

Đừng bọc cả trang.
Đừng giấu thanh cuộn trên nội dung mà người dùng phải biết là cuộn được khi không có tín hiệu khác.

Props

Tên	Kiểu	Giá trị	Mặc định	Mô tả
orientation	enum	vertical \| horizontal \| both	vertical	Trục nào được cuộn.
type	enum	auto \| always	auto	auto hiện thanh cuộn native khi nội dung tràn; always giữ chỗ cho thanh (scrollbar-gutter stable) để nội dung không dịch.
label	string	-	-	Tên accessible của vùng khi viewport focus được.
tabIndex	number	-	-	Trên viewport: ghi đè thứ tự Tab tự động. Mặc định viewport chỉ nhận focus khi không có con nào nhìn thấy, enabled và focus được.
onScroll	React.UIEventHandler<HTMLDivElement>	-	-	Trên viewport: handler của sự kiện scroll native.
style	React.CSSProperties	-	-	Trên viewport: style inline cho phần tử cuộn native. Đặt kích thước bên ngoài bằng className.
className	string	-	-	Trên hộp ngoài: đưa chiều cao, chiều cao tối đa, chiều rộng, viền và bo góc. Viewport lấp đầy hộp này.

Slot

Tên	Bắt buộc	Mô tả
children	có	Nội dung được cuộn.

Cấu tạo

Phần	Mô tả
root	Hộp ngoài với chiều cao cố định hoặc chiều cao tối đa.
viewport	Phần tử cuộn với overflow auto và thanh cuộn native đã được style.

Role: region

Phím	Hành động
Tab	Đưa focus tới viewport khi viewport không có con focus được, để người dùng bàn phím cuộn được.
Arrow keys / PageUp / PageDown / Home / End	Cuộn native trên các trục đang bật của viewport đang focus.

Cách cuộn native giữ nguyên: lăn chuột, cảm ứng, quán tính và tìm trong trang vẫn chạy.
Truyền aria-label khi viewport focus được để vùng có tên.
Khi reduced motion thì không thêm cuộn mượt.
Thanh cuộn là của trình duyệt, nên giữ hành vi nền tảng (thanh cuộn overlay trên cảm ứng, kéo, nhấn vào track).

Cài đặt

npx werewolf-ui add scroll-area

Chạy npx werewolf-ui init một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem Cài đặt để biết yêu cầu và cách cài qua registry.

Xem trước

Cách dùng

Khi nào dùng

Khi nào không dùng

Biến thể

orientation

type

Ví dụ

Hoạt động gần đây

Dự án theo chiều ngang

Cả hai trục

Chỗ dành cho thanh cuộn

Nên và không nên

Nên

Không nên

Props

Slot

Cấu tạo

Khả năng truy cập

Cài đặt