Docs
    Components

    Components

    Use React components in Markdown using MDX.

    Below are several custom components integrated into the project. These examples demonstrate how to use them in Markdown by leveraging MDX.

    1. ListView

    Renders an array of items using a custom render function.

    import ListView from "@/components/global/list-view";
 
<ListView
  items={["First", "Second", "Third"]}
  render={(item) => <div>{item}</div>}
/>

    2. BlurImage

    Displays a Next.js Image with a blur effect until fully loaded.

    import BlurImage from "@/components/global/blur-image";
 
<BlurImage
  src="/example.jpg"
  alt="Example"
  width={400}
  height={300}
/>

    3. CopyButton

    Copies text to the clipboard. Shows a check icon briefly after copying.

    import CopyButton from "@/components/global/copy-button";
 
<CopyButton text="Hello, World!" />

    4. Heading

    Displays a title and optional description in a simple wrapping layout.

    import Heading from "@/components/global/heading";
 
<Heading
  title="Section Title"
  description="Additional description text."
/>

    5. MaxWidthWrapper

    Wraps content in a container with a customizable max width.

     
import { MaxWidthWrapper } from "@/components/global/max-width-wrapper";
 
<MaxWidthWrapper large>
  <Heading title="Inside a wide container" />
</MaxWidthWrapper>

    6. CardSkeleton

    Renders a placeholder skeleton card for loading states.

    import { CardSkeleton } from "@/components/global/card-skeleton";
 
<CardSkeleton />

    Make sure you have configured the path to your content in your tailwind.config.js file: