feat(scroll-area): add raw prop to disable Radix wrapper via asChild

[Harshul23]

Summary

This PR introduces an optional raw prop to the ScrollArea component, allowing developers to render the viewport’s children directly without the internal Radix wrapper

<div style="min-width: 100%; display: table;">

This solves layout issues where the default wrapper conflicts with flex or grid-based children (e.g., in responsive or dynamic UIs).

Motivation

By default, Radix UI’s ScrollArea.Viewport adds a structural wrapper that enforces a table display and min-width of 100%.
This behavior is fine for most cases, but it restricts flexibility for advanced layouts like flex rows or grids inside scrollable containers.

Developers have raised this issue in:

• #8342
• #3833

Adding this prop provides control while maintaining backward compatibility.

Changes

• Added raw?: boolean prop to ScrollArea.
• Passed raw to Radix’s Viewport via asChild={raw}.
• Added prop documentation comment.
• Default remains unchanged (raw = false).

Example Usage

Before (default behavior)

<ScrollArea className="h-40 w-40 border">
  <div className="flex gap-4">
    <div className="w-20 h-20 bg-red-500" />
    <div className="w-20 h-20 bg-blue-500" />
  </div>
</ScrollArea>

❌ Wrapped by Radix → display: table; min-width: 100% breaks flex layout.

After (with raw)

<ScrollArea raw className="h-40 w-40 border">
  <div className="flex gap-4">
    <div className="w-20 h-20 bg-red-500" />
    <div className="w-20 h-20 bg-blue-500" />
  </div>
</ScrollArea>

✅ Renders children directly, preserving flex/grid behavior.

Checklist

• Added prop type and inline docs
• Backward compatible
• Tested with flex, grid, and content-overflow cases
• Linked related issues ([bug]: ScrollArea always wraps children in a <div style="min-width: 100%; display: table;"> #8342)

Notes for Maintainers

This implementation leverages Radix’s asChild prop, aligning with Radix best practices.
No breaking changes or additional dependencies introduced.

[vercel]

@Harshul23 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.