Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Installation

bash

npx @galaxy-stack/nebula-cli@latest add scroll-area

bash

pnpm dlx @galaxy-stack/nebula-cli@latest add scroll-area

bash

yarn dlx @galaxy-stack/nebula-cli@latest add scroll-area

bash

bunx @galaxy-stack/nebula-cli@latest add scroll-area

bash

# If you have installed galaxy-design globally
galaxy-design add scroll-area

Usage

VueReactAngular

vue

<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area'
</script>

<template>
  <ScrollArea class="h-[200px] w-[350px] rounded-md border p-4">
    Jokester began sneaking into the castle in the middle of the night and leaving
    jokes all over the place: under the king's pillow, in his soup, even in the
    royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
    then, one day, the people of the kingdom discovered that the jokes left by
    Jokester were so funny that they couldn't help but laugh. And once they
    started laughing, they couldn't stop.
  </ScrollArea>
</template>

tsx

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

export default function App() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      Jokester began sneaking into the castle in the middle of the night and leaving
      jokes all over the place: under the king's pillow, in his soup, even in the
      royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
      then, one day, the people of the kingdom discovered that the jokes left by
      Jokester were so funny that they couldn't help but laugh. And once they
      started laughing, they couldn't stop.
    </ScrollArea>
  )
}

typescript

import { Component } from '@angular/core';
import { ScrollAreaComponent } from '@/components/ui/scroll-area';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScrollAreaComponent],
  template: `
    <ui-scroll-area class="h-[200px] w-[350px] rounded-md border p-4">
      Jokester began sneaking into the castle in the middle of the night and leaving
      jokes all over the place: under the king's pillow, in his soup, even in the
      royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
      then, one day, the people of the kingdom discovered that the jokes left by
      Jokester were so funny that they couldn't help but laugh. And once they
      started laughing, they couldn't stop.
    </ui-scroll-area>
  `
})
export class AppComponent {}

API Reference

ScrollArea

Prop	Type	Default	Description
`class`	`string`	-	Custom CSS classes
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Scrollbar orientation

Examples

Horizontal Scrolling

VueReactAngular

vue

<ScrollArea orientation="horizontal" class="w-96 whitespace-nowrap rounded-md border">
  <div class="flex w-max space-x-4 p-4">
    <div v-for="i in 10" :key="i" class="shrink-0">
      <div class="overflow-hidden rounded-md">
        <img
          :src="`https://images.unsplash.com/photo-${i}?w=250&h=330`"
          :alt="`Photo ${i}`"
          class="aspect-[3/4] h-fit w-fit object-cover"
        />
      </div>
    </div>
  </div>
</ScrollArea>

tsx

<ScrollArea orientation="horizontal" className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {Array.from({ length: 10 }).map((_, i) => (
      <div key={i} className="shrink-0">
        <div className="overflow-hidden rounded-md">
          <img
            src={`https://images.unsplash.com/photo-${i}?w=250&h=330`}
            alt={`Photo ${i}`}
            className="aspect-[3/4] h-fit w-fit object-cover"
          />
        </div>
      </div>
    ))}
  </div>
</ScrollArea>

typescript

<ui-scroll-area orientation="horizontal" class="w-96 whitespace-nowrap rounded-md border">
  <div class="flex w-max space-x-4 p-4">
    @for (i of [1,2,3,4,5,6,7,8,9,10]; track i) {
      <div class="shrink-0">
        <div class="overflow-hidden rounded-md">
          <img
            [src]="'https://images.unsplash.com/photo-' + i + '?w=250&h=330'"
            [alt]="'Photo ' + i"
            class="aspect-[3/4] h-fit w-fit object-cover"
          />
        </div>
      </div>
    }
  </div>
</ui-scroll-area>

Accessibility

Adheres to the WAI-ARIA Scrollbar Pattern.

Provides custom scrollbars that are keyboard accessible
Maintains proper focus management
Supports both vertical and horizontal scrolling
Compatible with screen readers

Author

Bùi Trọng Hiếu (kevinbui)

GitHub: @buikevin
Email: kevinbui210191@gmail.com

Scroll Area

Tags

Installation

Usage

API Reference

ScrollArea

Examples

Horizontal Scrolling

Accessibility

Author

License

Scroll Area ​

Tags

Installation ​

Usage ​

API Reference ​

ScrollArea ​

Examples ​

Horizontal Scrolling ​

Accessibility ​

Author ​

License ​

Scroll Area

Installation

Usage

API Reference

ScrollArea

Examples

Horizontal Scrolling

Accessibility

Author

License