Step

<Step number="1" heading="Write slides">
  One MDX file per slide — `01-campfire.mdx`, `02-why.mdx`.
</Step>

<Step number="2" heading="Shape the story">
  Layouts and components are plain React.
</Step>

<Step number="3" heading="Present">
  `camp` watches the filesystem and hot reloads.
</Step>

camp add step

bunx shadcn@latest add https://campfire-deck.vercel.app/r/step.json

import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";

export type StepProps = ComponentProps<"div"> & {
  /** The step marker rendered in the badge. */
  number: number | string;
  /** Step heading. */
  heading: string;
};

/** A numbered step with heading and optional detail. */
export default function Step({
  number,
  heading,
  className,
  children,
  ...props
}: StepProps) {
  return (
    <div
      className={cn("flex items-start gap-6", className)}
      data-slot="step"
      {...props}
    >
      <span
        className="flex size-12 shrink-0 items-center justify-center rounded-full bg-primary font-bold text-background text-xl"
        data-slot="step-number"
      >
        {number}
      </span>
      <div className="flex flex-col gap-2">
        <span
          className="font-heading font-semibold text-3xl"
          data-slot="step-heading"
        >
          {heading}
        </span>
        {children ? (
          <div
            className="text-xl leading-relaxed opacity-75"
            data-slot="step-detail"
          >
            {children}
          </div>
        ) : null}
      </div>
    </div>
  );
}