Scroll Area
A neo-brutalist styled scroll area built on reka-ui's ScrollArea primitives, featuring custom scrollbar styling.
Demo
通知
标签
变体
尺寸
Installation
pnpm dlx brutx-vue@latest add scroll-areaUsage
<script setup>
import { ScrollArea } from 'brutx-ui-vue'
</script>
<template>
<ScrollArea class="h-72 w-48 border-3 border-brutal">
<div class="p-4">
<h4 class="mb-4 text-sm font-black leading-none">Tags</h4>
<div class="space-y-1">
<div v-for="tag in tags" :key="tag" class="text-sm font-medium">
{{ tag }}
</div>
</div>
</div>
</ScrollArea>
</template>Horizontal Scrolling
<script setup>
import { ScrollArea, ScrollBar } from 'brutx-ui-vue'
</script>
<template>
<ScrollArea class="w-96 border-3 border-brutal">
<div class="flex w-max space-x-4 p-4">
<div v-for="artwork in artworks" :key="artwork" class="shrink-0">
<div class="h-[250px] w-[200px] border-3 border-brutal bg-brutal-muted" />
</div>
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</template>Variants
Controls the scrollbar border and thumb color. Setting it on ScrollArea passes it to the default vertical scrollbar; manually added horizontal scrollbars need the variant set separately on ScrollBar.
| Variant | Border | Thumb |
|---|---|---|
default | border-brutal | bg-brutal-fg |
primary | border-brutal-primary | bg-brutal-primary |
accent | border-brutal-accent | bg-brutal-accent |
<script setup>
import { ScrollArea } from 'brutx-ui-vue'
const tags = Array.from({ length: 20 }, (_, i) => `Tag ${i + 1}`)
</script>
<template>
<ScrollArea variant="primary" class="h-72 w-48 border-3 border-brutal">
<div class="p-4 space-y-1">
<div v-for="tag in tags" :key="tag" class="text-sm font-medium">
{{ tag }}
</div>
</div>
</ScrollArea>
</template>Sizes
Controls the scrollbar thickness (via the --scroll-thickness token).
| Size | Thickness |
|---|---|
sm | 0.5rem |
default | 0.75rem |
lg | 1rem |
<script setup>
import { ScrollArea } from 'brutx-ui-vue'
const tags = Array.from({ length: 20 }, (_, i) => `Tag ${i + 1}`)
</script>
<template>
<ScrollArea size="lg" class="h-72 w-48 border-3 border-brutal">
<div class="p-4 space-y-1">
<div v-for="tag in tags" :key="tag" class="text-sm font-medium">
{{ tag }}
</div>
</div>
</ScrollArea>
</template>Sub-components
| Component | Description |
|---|---|
ScrollArea | Root scrollable container |
ScrollBar | Custom scrollbar (vertical by default, supports horizontal) |
API Reference
ScrollArea
| Name | Type | Default | Description |
|---|---|---|---|
variant | "accent" | "default" | "primary" | undefined | "default" | Selects the default, primary, or accent color variant for the scrollbar and thumb, passed to the internal ScrollBar. |
DetailsDeclared typeNonNullable<"default" | "primary" | "accent" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/scroll-area/ScrollArea.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | Selects the thickness of the internal scrollbar and passes it to ScrollBar. |
DetailsDeclared typeNonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/scroll-area/ScrollArea.vue | |||
class | string | undefined | undefined | Custom CSS classes appended to the Reka UI scroll-area root element. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/scroll-area/ScrollArea.vue | |||
viewportClass | string | undefined | undefined | Custom CSS classes appended to the scrollable viewport element. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/scroll-area/ScrollArea.vue | |||
| Name | Signature or type | Description |
|---|---|---|
#default | {} | Contains the content rendered in the scrollable viewport. |
DetailsDeclared type{}Sourcepackages/ui/src/components/scroll-area/ScrollArea.vue | ||
ScrollBar
| Name | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" | "horizontal" | undefined | "vertical" | Selects a vertical or horizontal scrollbar orientation. |
DetailsDeclared type"vertical" | "horizontal" | undefined Literal values
Default value details
Sourcepackages/ui/src/components/scroll-area/ScrollBar.vue | |||
variant | "accent" | "default" | "primary" | undefined | "default" | Selects the default, primary, or accent color variant for the scrollbar and thumb. |
DetailsDeclared typeNonNullable<"default" | "primary" | "accent" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/scroll-area/ScrollBar.vue | |||
size | "default" | "lg" | "sm" | undefined | "default" | Selects the scrollbar thickness. |
DetailsDeclared typeNonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values
Default value details
Sourcepackages/ui/src/components/scroll-area/ScrollBar.vue | |||
class | string | undefined | undefined | Custom CSS classes appended to the Reka UI scrollbar element. |
DetailsDeclared typestring | undefined Default value details
Sourcepackages/ui/src/components/scroll-area/ScrollBar.vue | |||
Accessibility
- Keyboard operation: Supports keyboard arrow keys, Page Up/Down, Home/End keys for scrolling content
- ARIA attributes: The scroll area automatically sets
role="region"andaria-label; the scrollbar sets appropriate ARIA attributes - Scrollbar interaction: The scrollbar thumb supports mouse dragging and keyboard operation, with visible focus indicators
- Content overflow: When content overflows, screen readers can identify the scrollable area and provide navigation hints