Scroll Area
Use a fixed height (or width for horizontal) so content scrolls. Optional orientation="horizontal" for horizontal scrolling.
Add this component
The command below includes <strong>ScrollArea</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npx rizzo-css add ScrollArea
pnpm dlx rizzo-css add ScrollArea
npx rizzo-css add ScrollArea
bunx rizzo-css add ScrollArea
Vertical
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import ScrollArea from '../components/astro/ScrollArea.astro';
---
<ScrollArea style="height: 18rem; width: 12rem;">
<div style="padding: var(--spacing-4);">
<h4>Tags</h4>
<div>Item 1</div>
<div>Item 2</div>
</div>
</ScrollArea>
<!-- Rizzo CSS. BEM: scroll-area, scroll-area__viewport, scroll-area__scrollbar. Set height/width on wrapper. -->
<div class="scroll-area" style="height: 18rem; width: 12rem;">
<div class="scroll-area__viewport">
<div style="padding: var(--spacing-4);">
<h4>Tags</h4>
<div>Item 1</div>
<div>Item 2</div>
</div>
</div>
</div>
<script>
import { ScrollArea } from '$lib/rizzo';
</script>
<ScrollArea style="height: 18rem; width: 12rem;">
<div style="padding: var(--spacing-4);">
<h4>Tags</h4>
<div>Item 1</div>
<div>Item 2</div>
</div>
</ScrollArea>
<script setup>
import ScrollArea from '@/components/rizzo/ScrollArea.vue';
</script>
<template>
<ScrollArea orientation="vertical" style="max-height: 200px">
<div>Scrollable content here.</div>
</ScrollArea>
</template>
import { ScrollArea } from './components/react';
<ScrollArea orientation="vertical" style={{ maxHeight: '200px' }}>
<div>Scrollable content here.</div>
</ScrollArea>
Other frameworks: Vanilla · Svelte · Vue · React
npm 
pnpm 
yarn 
bun