); } ``` ### Vertical Scroll Shadow [#vertical-scroll-shadow] Add scroll shadow indicators to show users there's more content to scroll. The shadow fades in/out based on scroll position. ```tsx import { ScrollArea, ScrollAreaContent, Separator } from "@tilt-legal/cubitt-components/primitives"; export default function Component() { const tags = Array.from({ length: 50 }).map( (_, i, a) => `v1.2.0-beta.${a.length - i}` ); return (

Tags

{tags.map((tag) => (

{tag}

))} ); } ``` ### Horizontal Scroll Shadow [#horizontal-scroll-shadow] ```tsx import { ScrollArea, ScrollAreaContent } from "@tilt-legal/cubitt-components/primitives"; export default function Component() { return ( {/* Content items */} ); } ``` ### Both Scroll Shadows [#both-scroll-shadows] ```tsx import { ScrollArea, ScrollAreaContent } from "@tilt-legal/cubitt-components/primitives"; export default function Component() { return ( {/* Wide and tall content */} ); } ``` ### Custom Shadow Configuration [#custom-shadow-configuration] Fine-tune the scroll shadow appearance with custom size, gradient stop percentage, and opacity values. ```tsx import { ScrollArea, ScrollAreaContent, Separator } from "@tilt-legal/cubitt-components/primitives"; export default function Component() { const tags = Array.from({ length: 50 }).map( (_, i, a) => `v1.2.0-beta.${a.length - i}` ); return (

Custom Shadow Configuration

This scroll area has a larger shadow (80px) that stays solid for 60% of its height, then fades at 90% opacity before becoming transparent.

{tags.map((tag) => (

{tag}

))} ); } ``` *** ## API Reference [#api-reference] ### ScrollArea [#scrollarea] The root scrollable container component. | Prop | Type | Default | Description | | -------------- | -------------------------------------------------------------------------------------------------------------- | ------------ | ---------------------------------------- | | `orientation` | `"vertical"` \| `"horizontal"` \| `"both"` | `"vertical"` | Direction of scrolling. | | `scrollShadow` | `"vertical"` \| `"horizontal"` \| `"both"` \| `"none"` \| `ScrollShadowAxisConfig` \| `ScrollShadowSideConfig` | `"none"` | Scroll shadow indicator configuration. | | `className` | `string` | - | Additional CSS classes for the viewport. | #### ScrollShadowConfig [#scrollshadowconfig] The base configuration object for individual shadow settings: | Property | Type | Default | Description | | ------------- | --------- | -------- | ------------------------------------------------------------------------------------------- | | `size` | `string` | `"40px"` | Size of the shadow gradient (e.g., `"40px"`, `"100px"`). | | `stopPercent` | `number` | `0` | Percentage (0-100) where the solid color ends and fading begins. | | `stopOpacity` | `number` | `100` | Opacity (0-100) of the starting color before fading to transparent. | | `snap` | `boolean` | `false` | When true, shadow appears at full size immediately instead of growing with scroll progress. | #### ScrollShadowObjectConfig [#scrollshadowobjectconfig] The object configuration allows flexible shadow setup with type-safe constraints: * **Vertical axis**: Use either `vertical` OR `top`/`bottom` (not both) * **Horizontal axis**: Use either `horizontal` OR `left`/`right` (not both) * **Cross-axis mixing**: You CAN mix `vertical` with `left`/`right` (different axes) | Property | Type | Description | | ------------ | --------------------------------- | ------------------------------------------------ | | `vertical` | `boolean` \| `ScrollShadowConfig` | Shortcut for top and bottom shadows. | | `horizontal` | `boolean` \| `ScrollShadowConfig` | Shortcut for left and right shadows. | | `top` | `boolean` \| `ScrollShadowConfig` | Top shadow (cannot be used with `vertical`). | | `bottom` | `boolean` \| `ScrollShadowConfig` | Bottom shadow (cannot be used with `vertical`). | | `left` | `boolean` \| `ScrollShadowConfig` | Left shadow (cannot be used with `horizontal`). | | `right` | `boolean` \| `ScrollShadowConfig` | Right shadow (cannot be used with `horizontal`). | ```tsx // Axis shortcuts scrollShadow={{ vertical: true }} scrollShadow={{ vertical: { size: "60px" }, horizontal: true }} // Individual sides scrollShadow={{ top: true, bottom: false }} scrollShadow={{ left: { size: "40px" }, right: { size: "80px" } }} // Cross-axis mixing (allowed - different axes) scrollShadow={{ vertical: true, left: { size: "60px" } }} scrollShadow={{ top: true, horizontal: { size: "40px" } }} scrollShadow={{ top: { size: "80px" }, bottom: false, left: true, right: true }} ``` TypeScript enforces that you cannot mix axis shortcuts with their corresponding sides: ```tsx // ✅ Valid - cross-axis mixing scrollShadow={{ vertical: true, left: true }} scrollShadow={{ top: true, horizontal: true }} // ❌ Invalid - TypeScript error (same-axis conflict) scrollShadow={{ vertical: true, top: false }} // Error! scrollShadow={{ horizontal: true, left: true }} // Error! ``` ### ScrollAreaContent [#scrollareacontent] Container for the scrollable content. | Prop | Type | Default | Description | | ----------- | -------- | ------- | --------------------------------------- | | `className` | `string` | - | Additional CSS classes for the content. | ### ScrollBar [#scrollbar] Custom scrollbar component (used internally, but can be customized). | Prop | Type | Default | Description | | ------------- | ------------------------------ | ------------ | ----------------------------------------- | | `orientation` | `"vertical"` \| `"horizontal"` | `"vertical"` | Direction of the scrollbar. | | `className` | `string` | - | Additional CSS classes for the scrollbar. |