Steps

Use this to showcase sequential instructions in your project with highlighted code snippets and copy code functionality.

Title

Description

Your code

Highlight Code

Highlighting specific lines in your code

import React from 'react';
import Component from './components/ComponentName';
function App() {
  return (
    <div>
      <Component/>
    </div>
  );
}
export default App;

Installation

npx @ayushmxxn/serenity-ui@latest add steps

Usage

import Steps from './components/ui/Steps';

const steps = [
  {
    title: "Title",
    description: "Description",
    code: "Your code",
  },
  {
    title: "Highlight Code",
    description: "Highlighting specific lines in your code",
    code: `/\$import React from 'react';
import Component from './components/ComponentName';

function App() {
  return (
    <div>
      <Component/>
    </div>
  );
}

export default App;/`,
    highlightLines: [1,6],
  },
];

function Page() {
  return (
    <div>
      <Steps steps={steps} />
    </div>
  )
}

export default Page;

Props

Prop Name	Type	Description
title	string	Title of the step
description	string	Description of the step
code	string	Code of the step
highlightLines	number[]	Line numbers you want to highlight in your code