Custom Registry

A component that encapsulates meta pixel logic for Facebook tracking.

Installation

bunx --bun shadcn@latest add https://registry.rchoudhury.dev/r/meta-pixel.json

Exports

• MetaPixel: Injects the Meta Pixel script and sends the initial PageView.
• event: Triggers additional pixel events after the script has loaded.

Props

• mpId: string: Your Meta Pixel ID.

Usage

Non-visual component. Add it to your layout or pages where tracking is needed.

import { MetaPixel, event } from "@/components/meta-pixel";
 
export default function Layout({ children }) {
  return (
    <>
      <MetaPixel mpId="1234567890" />
      {children}
    </>
  );
}
 
export function BuyButton() {
  return (
    <button
      type="button"
      onClick={() => event("Purchase", { currency: "USD", value: 99 })}
    >
      Buy now
    </button>
  );
}

Notes

• This registry item also installs public/scripts/pixel.js, which MetaPixel loads with next/script.
• MetaPixel should usually live in a shared layout so page views are tracked consistently.
• Call event(...) only on the client, after MetaPixel has mounted.

Component and hook for managing multi-step flows.

Installation

bunx --bun shadcn@latest add https://registry.rchoudhury.dev/r/multi-step.json

Exports

• MultiStep: Renders the active step and keeps navigation state in context.
• useMultiStep: Reads the current step state and navigation helpers.

Hook API

• currStep: number: Zero-based index of the active step.
• totalSteps: number: Total number of child steps passed to MultiStep.
• isFirstStep: boolean: true when the first step is active.
• isLastStep: boolean: true when the last step is active.
• nextStep(): void: Moves forward and clamps at the last step.
• prevStep(): void: Moves backward and clamps at the first step.
• goToStep(step: number): void: Jumps to a step index and clamps invalid values.

Usage

// page.tsx
import { MultiStep } from "@/components/multi-step";
 
export default function Page() {
  return (
    <MultiStep>
      <Step1 />
      <Step2 />
      ...
    </MultiStep>
  );
}
 
// step1.tsx
import { useMultiStep } from "@/components/multi-step";
 
export function Step1() {
  const { nextStep, prevStep, isFirstStep, isLastStep } = useMultiStep();
 
  return (
    <form>
      ...
      <button type="button" disabled={isFirstStep} onClick={prevStep}>
        Previous
      </button>
      <button type="button" disabled={isLastStep} onClick={nextStep}>
        Next
      </button>
    </form>
  );
}

Notes

• MultiStep calculates the total step count from its children, so you do not need to pass a separate step count prop.
• Only the active child is rendered.
• currStep is zero-based, which makes it easy to drive custom progress indicators.

A button component with loading state.

Installation

bunx --bun shadcn@latest add https://registry.rchoudhury.dev/r/submit-button.json

Preview

Props

• children: string: Button label.
• className?: string: Optional extra classes passed to the underlying button.
• isPending?: boolean: Explicitly control the loading state. When omitted, the component relies on disabled/group styles.

Usage

import { SubmitButton } from "@/components/ui/submit-button";
 
export function MyForm() {
  const { isPending } = submitData();
 
  return (
    <form>
      <fieldset disabled={isPending} className="group">
        ... {/* Your form inputs */}
        <SubmitButton>Submit</SubmitButton>
      </fieldset>
    </form>
  );
}

Notes

• When isPending is omitted, wrap the button in a disabled fieldset with the group class so the loader can react to the pending state.
• When isPending is provided, the component becomes fully controlled and does not depend on group selectors.
• This component is built on top of the registry's button dependency.

A utility component that displays the current breakpoint. Only visible in development.

Installation

bunx --bun shadcn@latest add https://registry.rchoudhury.dev/r/tailwind-helper.json

Exports

• TailwindHelper: Shows the active Tailwind breakpoint label in the bottom-left corner.

Usage

import { TailwindHelper } from "@/components/tw-helper";
 
export default function Layout({ children }) {
  return (
    <>
      {children}
      <TailwindHelper />
    </>
  );
}

Notes

• The component returns null in production, so it is safe to leave mounted in app layouts.
• The labels map to Tailwind's default breakpoints: xs, sm, md, lg, xl, and 2xl.
• This is intended as a local development aid, not a user-facing UI element.