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

Live Preview

RowScrollable — scroll to see more →
Featured Products
👗
Linen Dress
$89.00
👔
Oxford Shirt
$55.00
👟
Canvas Shoes
$120.00
👜
Tote Bag
$45.00
🧢
Baseball Cap
$30.00

Usage 

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

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