Components

Integrations & Best Practices

All integrations mentioned in these documentation pages are already properly integrated using best practices within the project. These documentation pages are primarily for developers who want to dive deep into the code and understand the implementation details.

Your Get Cracked Starter SaaS boilerplate includes a set of pre-built React components designed for seamless integration into your Markdown content using MDX.

This section outlines how to utilize these components effectively. For instructions on extending your template with custom components, refer to the Custom Components section below.

Built-in Components

1. Callout

<Callout type="default | warning | danger | note | info | success">
  This is a default callout. You can embed **Markdown** inside a `callout`.
</Callout>

callout

type="warning"

type="danger"

type="note"

type="info"

type="success"

2. Card

<Card href="#">

#### Heading

You can use **markdown** inside cards.

</Card>

You can also use HTML to embed cards in a grid.

<div className="grid grid-cols-2 gap-4">
  <Card href="#">
    #### Card One 
    You can use **markdown** inside cards.
  </Card>

  <Card href="#">
    #### Card Two 
    You can also use `inline code` and code blocks.
  </Card>
</div>

inline code

Custom Components

The Get Cracked Starter SaaS boilerplate is designed for easy customization. You can effortlessly extend its functionality by integrating your own custom React components into the MDX environment.

// Import your custom components here
import { Callout } from "@/components/shared/callout";
import { MdxCard } from "@/components/content/mdx-card";

// Define a map of your custom components
const components = {
  Callout,
  Card: MdxCard, // Example: mapping a custom Card component
  // Add your custom components here
};

interface MdxProps {
  code: string;
}

export function Mdx({ code }: MdxProps) {
  const Component = useMDXComponent(code);

  return (
    <div className="mdx">
      <Component components={components} />
    </div>
  );
}

To integrate your custom component:

1. Create your React component: Develop your component as you normally would in a

   .tsx
   file (e.g.,

   components/custom-ui/MyCustomComponent.tsx
   ).
2. Import into

   lib/mdx.tsx
   : Add an import statement for your new component at the top of

   lib/mdx.tsx
   .
3. Map your component: Add your component to the

   components
   object in

   lib/mdx.tsx
   . The key will be the name you use in your MDX files, and the value will be the imported component. Example:

   MyCustomComponent: MyCustomComponent,
4. Use in MDX: You can now use your custom component directly in any

   .mdx
   file.

Once you've added your custom component, you can use it in MDX as follows:

<CustomComponent propName="value" />

HTML Elements

You can overwrite HTML elements using the same technique above.

// Example of overwriting an HTML element
const components = {
  ...baseComponents, // Include existing components
  h1: ({ className, ...props }) => (
    <h1 className={cn("mt-2 scroll-m-20 text-4xl font-bold tracking-tight", className)} {...props} />
  ),
  p: ({ className, ...props }) => (
    <p className={cn("leading-7 [&:not(:first-child)]:mt-6", className)} {...props} />
  ),
  hr: ({ ...props }) => <hr className="my-4 border-slate-200 md:my-6" {...props} />,
};

This example demonstrates how to overwrite the default rendering of

<h1>

<p>

<hr />

This will overwrite the

<hr />

---

Styling

Your Get Cracked Starter SaaS boilerplate leverages Tailwind CSS for a highly customizable styling experience. You can apply Tailwind CSS classes directly within your MDX content to style components and elements.

<p className="text-red-600">This text will be red.</p>

Ensure that your

tailwind.config.js

content/**/*.mdx

content