Custom Registry

A custom registry for distributing code using shadcn.

MetaPixel

A component that encapsulates meta pixel logic for Facebook tracking.

Installation

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

Usage

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

import { MetaPixel } from "@/components/meta-pixel";
 
export default function Layout({ children }) {
  return (
    <>
      <MetaPixel mpId={your-tracking-id} />
      {children}
    </>
  );
}

Multi Step Form

Components and hook for managing multi step forms.

Installation

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

Usage

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

SubmitButton

A button component with loading state.

Installation

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

Preview

Normal state

Loading state

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>
  );
}

NOTE: It relies on the the "group" className to work.

TailwindHelper

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

Installation

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

Usage

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