Step Indicator

[sewerynkorzekwa]

Hey everyone,

I just wanted to say that I think it would be really helpful if the Step Indicator, which is used in all the documentation, was available as a standalone component. It could be really useful in so many projects!

Right now, I’ve copied the shad/cn version from the source code, but a native solution would be awesome!

I am very open to feedback on how I can improve. 😊

function StepContainer({ children }: { children: React.ReactNode }) {
  return (
    <div className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]">
      {children}
    </div>
  );
}

function StepHeader({ children }: { children: React.ReactNode }) {
  return (
    <h3 className="font-heading mt-8 scroll-m-20 text-xl font-semibold tracking-tight">
      {children}
    </h3>
  );
}

export { StepContainer, StepHeader };

.steps>h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

.\[\&\>h3\]\:step>h3 {
  counter-increment: step;
}

.\[\&\>h3\]\:step>h3:before {
  position: absolute;
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 4px;
  border-color: hsl(var(--background));
  background-color: hsl(var(--muted));
  text-align: center;
  text-indent: -1px;
  font-family: var(--font-geist-mono),ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  margin-left: -50px;
  margin-top: -4px;
  content: counter(step);
}