Chronos UI/ Row Scrollable
View Source
↔ Component

Row Scrollable

Horizontally scrollable card row with snap-scrolling, custom scrollbar, and optional section title.

npm install @chronos-ui/core

Interactive Demo Playground

<row-scrollable> Playground
⚙️ Configure Properties
Optional heading for the scrollable row.
❌ Invalid JSON Formatting
Array of cards. { id, title, subtitle, media, mapLinks }
Applies shimmer loading skeleton.
Show next/prev navigation buttons.
Hide navigation buttons if row content fits container width.
Hide browser scrollbars.

Usage Code Generator 

import RowScrollable from '@chronos-ui/core/react/RowScrollable';
import '@chronos-ui/core/theme.css';

const items = [
  { id: '1', title: 'Linen Dress',  subtitle: '$89.00', media: { type: 'image', url: '/p1.jpg' }, mapLinks: [{ url: '/p/1' }] },
  { id: '2', title: 'Oxford Shirt', subtitle: '$55.00', media: { type: 'image', url: '/p2.jpg' }, mapLinks: [{ url: '/p/2' }] },
];

<RowScrollable title="Featured Products" items={items} />
<script lang="ts">
  import RowScrollable from '@chronos-ui/core/svelte/RowScrollable.svelte';
  const items = [
    { id: '1', title: 'Linen Dress', subtitle: '$89', media: { type: 'image', url: '/p1.jpg' } },
  ];
</script>

<RowScrollable title="Featured" {items} />
<script type="module"
  src="node_modules/@chronos-ui/core/webcomponents/RowScrollable.js"></script>

<row-scrollable
  title="Featured Products"
  items='[{"id":"1","title":"Linen Dress"}]'
></row-scrollable>

Props API Reference

PropTypeDefaultDescription
items required RowScrollableItem[] — Array of card items to render in the scrollable row
title string undefined Optional section heading displayed above the row
className string undefined Additional CSS class names on the root container
config.showArrows boolean undefined Show next/previous arrows (default: true)
config.hideArrowsIfNoScroll boolean undefined Hide navigation arrows if content doesn't overflow container width
config.hideScrollbar boolean undefined Hide the browser scrollbar while keeping swipe/scroll functionality
isLoading boolean undefined Applies shimmer skeleton loading animation to all items
lazyLoad boolean undefined Defer mounting card media until the row scrolls near the viewport (default: true)
lazyThreshold number undefined IntersectionObserver threshold, 0-1 (default: 0.1)
lazyRootMargin string undefined IntersectionObserver rootMargin (default: '200px')