React components
Integration scrollable
A carousel showcasing integration cards with ratings and install counts.
Overview
The IntegrationScrollable component displays a horizontal scrolling list of integration cards. Each card shows an app logo, title, description, ratings, and other metadata. It's built on top of the Shadcn/UI Carousel.
Usage
import { IntegrationScrollable } from '@/components/core/integration-scrollable';
const integrations = [
{
id: 1,
title: 'Slack',
description: 'Connect with your team.',
logo: '/slack.png',
stars: 4.8,
install: 5000
},
// ... more items
];
function Marketplace() {
return (
<div className="py-10">
<IntegrationScrollable items={integrations} />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | IntegrationsItem[] | Required | Array of integration data objects. |
className? | string | - | Optional CSS class names. |
Data Interface
interface IntegrationsItem {
id: string | number;
title: string;
description: string;
link: string;
logo?: string;
author?: string;
verifiedAuthor?: boolean;
free?: boolean;
stars?: number;
install?: number;
reviews?: number;
}