Onborda

Docs

Navigation

Card

Card types and example

Your card component describes the content of your step, it's also used for navigating back and forth through your product tour.

Example card with shadcn/ui

As Onborda is written in typescript, to build your card you'll need to import the prop types drectly from onborda as shown below.

import type { CardComponentProps } from "onborda";
PropertyType
stepStep
currentStepnumber
totalStepsnumber
nextStep() => void
prevStep() => void
arrowJSX.Element

Basic example

This is a basic example of a card component with a title and content.

Your card will need to be a client component and so make sure to add the "use client"; directive.

"use client";
import React from "react";
import type { CardComponentProps } from "onborda";
import { useOnborda } from "onborda";

export const TourCard: React.FC<CardComponentProps> = ({
  step,
  currentStep,
  totalSteps,
  nextStep,
  prevStep,
  arrow,
}) => {
  // Onborda hooks
  const { closeOnborda } = useOnborda();

  function handleClose() {
    closeOnborda();
    console.log("Closed onborda");
  }

  return (
    <>
      <p>{currentStep + 1} of {totalSteps}</p>
      <p>{step.icon} {step.title}</p>
      <button onClick={() => closeOnborda()}>Close</button>

      <p>{step.content}</p>

      {currentStep !== 0 && (
        <button onClick={() => prevStep()}>Previous</button>
      )}
      {currentStep + 1 !== totalSteps && (
        <button onClick={() => nextStep()}>Next</button>
      )}
      {currentStep + 1 === totalSteps && (
        <button onClick={handleClose}>🎉 Finish!</button>
      )}
      <span className="text-white">{arrow}</span>
    </>
  );
};