ObjectUIComponentsComplex
Scroll Area
Customizable scrollable container with styled scrollbars
The Scroll Area component provides a scrollable container with styled scrollbars that match your design system.
Basic Usage
Vertical Scroll
Horizontal Scroll
Horizontal Scroll
Custom Heights
Short 150px
Tall 300px
Schema
interface ScrollAreaSchema {
type: 'scroll-area';
// Dimensions
height?: string; // Container height (e.g., '200px', '50vh')
width?: string; // Container width (default: '100%')
// Configuration
orientation?: 'vertical' | 'horizontal' | 'both'; // Scroll direction (default: 'vertical')
// Content
content?: SchemaNode | SchemaNode[]; // Scrollable content
children?: SchemaNode | SchemaNode[]; // Alternative content prop
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string | { dialect?: string; source: string };
testId?: string;
}