Sequence
docs
React components

Pipeline stages

A card carousel component showing different pipeline alerts or stages.

Overview

The PipelineStages component rotates through a set of informational cards, such as "Confidence Boost" or "Risk Flags". It's useful for demonstrating insights or notifications in a pipeline view.

Usage

import { PipelineStages } from '@/components/core/features/pipeline-stages';

function Insights() {
  return <PipelineStages delay={3000} />;
}

Props

PropTypeDefaultDescription
data?StagesData[]defaultDataArray of stage/alert items.
delay?number2500Time until auto-advancing to the next item.
className?string-Optional CSS class names.

Data Interface

interface StagesData {
  title: string;
  icon: LucideIcon;
  type: 'success' | 'warning' | 'info' | 'danger';
  desc: string;
}

On this page