Scroll Area

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add scroll-area --yes

The scroll-area registry item installs these files:

• app/components/ui_component.rb
• app/components/ui/scroll_area_component.rb
• app/components/ui/scroll_area/viewport_component.rb
• app/components/ui/scroll_area/content_component.rb
• app/components/ui/scroll_area/scrollbar_component.rb
• app/components/ui/scroll_area/thumb_component.rb
• app/components/ui/scroll_area/corner_component.rb
• app/helpers/ui/scroll_area_helper.rb
• app/javascript/controllers/ui_scroll_area_controller.js
• vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Use the helper in views, or render the ViewComponent class directly when you need the component object.

<%= ui_scroll_area(class: "h-[200px] w-[350px] rounded-md border p-4") do %>
  Your scrollable content here.
<% end %>

<%= render Ui::ScrollAreaComponent.new(class: "h-[200px] w-[350px] rounded-md border p-4") do %>
  Your scrollable content here.
<% end %>

Composition

shadcn's anatomy is ScrollArea with an optional ScrollBar. In Shadwire, ui_scroll_area renders the viewport, the content, the bars, the thumb and the corner for you.

ScrollArea
`-- ScrollBar

Examples

<%= ui_scroll_area(class: "h-[200px] w-[350px] rounded-md border p-4", data: { testid: "scroll-area-vertical" }) do %>
  <div class="flex flex-col gap-4 text-sm leading-6">
    <% 12.times do |index| %>
      <p>
        Release note <%= index + 1 %>: Rails components are copied into the app and can be edited in place after installation.
      </p>
    <% end %>
  </div>

<%= ui_scroll_area(class: "h-[200px] w-[350px] rounded-md border p-4", data: { testid: "scroll-area-vertical" }) do %>
  <div class="flex flex-col gap-4 text-sm leading-6">
    <% 12.times do |index| %>
      <p>
        Release note <%= index + 1 %>: Rails components are copied into the app and can be edited in place after installation.
      </p>
    <% end %>
  </div>
<% end %>

Horizontal

Use ui_scroll_bar(orientation: :horizontal) or pass scrollbars: [ :horizontal ] for horizontal scrolling.

Horizontal

Use a horizontal scrollbar for galleries and wide content.

ExpandCopy

<% works = [
  {
    artist: "Ornella Binni",
    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
  },
  {
    artist: "Tom Byrom",
    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80"

<%= ui_scroll_area(scrollbars: [ :horizontal ], class: "w-96 rounded-md border whitespace-nowrap") do %>
  <div class="flex w-max gap-4 p-4">...</div>
<% end %>

RTL

Pass the standard HTML direction attributes through the component when rendering right-to-left content.

<%= ui_scroll_area(dir: "rtl", class: "h-[200px] w-[350px] rounded-md border p-4", data: { testid: "scroll-area-rtl" }) do %>
  <div class="flex flex-col gap-4 text-sm leading-6">
    <% [
      "هذا مثال على محتوى طويل داخل منطقة تمرير باتجاه من اليمين إلى اليسار.",
      "يمكنك تمرير المحتوى مع الحفاظ على اتجاه النص العربي داخل المكون.",
      "تنتقل خصائص HTML مثل dir وdata وaria مباشرة إلى الجذر.",
      "تظل أشرطة التمرير المخصصة متوافقة مع السلوك الأصلي للمتصفح.",
      "هذا السطر الإضافي يجعل المثال قابلاً للتمرير عمودياً."

<%= ui_scroll_area(dir: "rtl", class: "h-[200px] w-[350px] rounded-md border p-4", data: { testid: "scroll-area-rtl" }) do %>
  <div class="flex flex-col gap-4 text-sm leading-6">
    <% [
      "هذا مثال على محتوى طويل داخل منطقة تمرير باتجاه من اليمين إلى اليسار.",
      "يمكنك تمرير المحتوى مع الحفاظ على اتجاه النص العربي داخل المكون.",
      "تنتقل خصائص HTML مثل dir وdata وaria مباشرة إلى الجذر.",
      "تظل أشرطة التمرير المخصصة متوافقة مع السلوك الأصلي للمتصفح.",
      "هذا السطر الإضافي يجعل المثال قابلاً للتمرير عمودياً."
    ].each do |line| %>
      <p><%= line %></p>
    <% end %>
  </div>
<% end %>

API reference

This Rails port mirrors those Base UI-style parts with ViewComponent classes and data attributes. The helpers preserve free-form HTML attributes, including data: and aria:.