Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Requires JavaScript
Installation
Add the component to your project:
rails generate shadcn:component scroll_areaUsage
<%= render Shadcn::ScrollAreaComponent.new(class_name: "h-72 w-48 rounded-md border") do %>
<div class="p-4">
<h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
<% tags = ["React", "Next.js", "Tailwind CSS", "Radix UI", "shadcn/ui", "Ruby on Rails", "ViewComponent", "Stimulus", "Hotwire", "Turbo"] %>
<% tags.each do |tag| %>
<div class="text-sm">
<%= tag %>
</div>
<%= tag_sep %>
<% end %>
</div>
<% end %>Examples
Vertical Scroll
The default orientation for scrollable content.
<%= render Shadcn::ScrollAreaComponent.new(orientation: :vertical, class_name: "h-72 w-48 rounded-md border") do %>
<div class="p-4">
<h4 class="mb-4 text-sm font-medium leading-none">Framework</h4>
<% (1..30).each do |i| %>
<div class="text-sm">Item <%= i %></div>
<%= content_tag(:div, "", class: "my-2 h-px bg-border") unless i == 30 %>
<% end %>
</div>
<% end %>Horizontal Scroll
Use for horizontally scrolling content like image galleries.
<%= render Shadcn::ScrollAreaComponent.new(orientation: :horizontal, class_name: "w-96 whitespace-nowrap rounded-md border") do %>
<div class="flex w-max space-x-4 p-4">
<% image_urls = (1..10).map { |i| "https://picsum.photos/300/200?random=#{i}" } %>
<% image_urls.each do |url| %>
<%= image_tag url, class: "h-[200px] w-[300px] rounded-md object-cover" %>
<% end %>
</div>
<% end %>Tags List
Combine with other components like badges for rich content.
<%= render Shadcn::ScrollAreaComponent.new(class_name: "h-48 w-full rounded-md border") do %>
<div class="p-4">
<h4 class="mb-4 text-sm font-medium leading-none">Popular Tags</h4>
<div class="space-y-1">
<% tags = ["Ruby", "Rails", "ViewComponent", "Stimulus", "Hotwire", "Turbo", "React", "Next.js", "Vue", "Angular", "Svelte", "TypeScript", "JavaScript", "Python", "Django", "Flask"] %>
<% tags.each_with_index do |tag, index| %>
<%= render Shadcn::BadgeComponent.new(variant: :secondary) { tag } %>
<%= " " unless index == tags.length - 1 %>
<% end %>
</div>
</div>
<% end %>Fixed Height Container
Ideal for containing long content in a fixed-height area with custom scrollbars.
API Reference
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation |
Symbol
|
:vertical
|
Scroll orientation (:vertical, :horizontal, :both) |
| type |
Symbol
|
:hover
|
When to show scrollbar (:auto, :always, :scroll, :hover) |
| class_name |
String
|
nil
|
Additional CSS classes to apply to the scroll area container |
Orientation Options
| Value | Description |
|---|---|
| :vertical | Vertical scrolling only (default) |
| :horizontal | Horizontal scrolling only |
| :both | Both vertical and horizontal scrolling |
Type Options
| Value | Description |
|---|---|
| :hover | Show scrollbar on hover (default) |
| :always | Always show scrollbar |
| :scroll | Show scrollbar only when scrolling |
| :auto | Browser default behavior |
Accessibility
- The scroll area maintains native scrolling behavior for keyboard navigation
- Supports standard scroll keyboard shortcuts (arrow keys, Page Up/Down, Home/End)
- Custom scrollbars are purely visual enhancements and don't affect accessibility
- Screen readers treat the content as a normal scrollable region
- The component preserves focus management within the scrollable area
On This Page