Registry

MetaPixel

A component that encapsulates meta pixel logic for Facebook tracking.

Installation

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

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

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

Usage

import { TailwindHelper } from "@/components/tw-helper";

export default function Layout({ children }) {
  return (
    <>
      {children}
      <TailwindHelper />
    </>
  );
}

useCarouselApi

A React hook for controlling carousel components with an improved API.

Installation

npx shadcn@latest add https://registry.rchoudhury.dev/r/use-carousel-api

Usage

// my-carousel.tsx
import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";
import { useCarouselApi } from "@/hooks/use-carousel-api";

export function MyCarousel() {
  const { api, setApi, current, count } = useCarouselApi();

  return (
    <Carousel setApi={setApi} className="w-full max-w-xs">
      <CarouselContent>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
        <CarouselItem>...</CarouselItem>
      </CarouselContent>
    </Carousel>
  );
}

useCarouselScale

A React hook to provide scaling logic for the active item in a carousel.

Installation

npx shadcn@latest add https://registry.rchoudhury.dev/r/use-carousel-scale

Usage

// my-carousel.tsx
import { Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel";
import { useCarouselScale } from "@/hooks/use-carousel-api";

export function MyCarousel() {
  const { setApi, current, count } = useCarouselScale();

  return (
    <Carousel setApi={setApi} opts={{ loop: true }} className="w-full max-w-xs">
      <CarouselContent>
        <CarouselItem className="basis-1/3">...</CarouselItem>
        <CarouselItem className="basis-1/3">...</CarouselItem>
        <CarouselItem className="basis-1/3">...</CarouselItem>
      </CarouselContent>
    </Carousel>
  );
}

Multi Step Form

Components and hook for managing multi step forms.

Installation

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

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

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.