Nest Coachmark

React UI library for marketplace created by Nest design team.

Getting Started

$ npm i @nest-ui/coachmark

Basic usage

import { Coachmark } from '@nest-ui/coachmark';
import { Button } from '@nest-ui/core';
import { useRef, useState } from 'react';

const Basic = () => {
  const target = useRef<HTMLButtonElement>(null);
  const [show, setShow] = useState(false);

  const showCoachmark = () => {
    setShow(true);
  };

  return (
    <>
      <Button ref={target} onClick={showCoachmark}>
        Show Coachmark
      </Button>
      {show && (
        <Coachmark onClose={setShow}>
          <Coachmark.Item css={{ width: 320, maxWidth: 'calc(100vw - 32px)' }} target={() => target.current}>
            Single coachmark item will be displayed as a simple coachmark.
          </Coachmark.Item>
        </Coachmark>
      )}
    </>
  );
};

export default Basic;

Showcase

Comming soon...

Future ideas

TBH...