> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <MakeswiftComponent>

> The `<MakeswiftComponent>` component takes a `MakeswiftComponentSnapshot` (returned from calling [getComponentSnapshot](/developer/reference/client/get-component-snapshot)) and renders React elements using [components registered](/developer/reference/runtime/register-component) with the runtime.

## Props

1. <ParamField query="snapshot" type="MakeswiftComponentSnapshot" required>
     The Makeswift snapshot to render.
   </ParamField>
2. <ParamField query="label" type="string" required>
     The label of the component used in the Visual Builder.
   </ParamField>
3. <ParamField query="description" type="string">
     The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
     Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).
   </ParamField>
4. <ParamField query="type" type="string" required>
     The type of the registered Makeswift component. This should match the
     `type` property that was used when calling
     [registerComponent](/developer/reference/runtime/register-component).
   </ParamField>

## Example

<Warning>
  The following examples expects that you have integrated Makeswift into your
  project according to the [App Router
  Installation](/developer/app-router/installation) guide. If you have not, you
  may need to tweak the code snippets below to match your project setup and file
  structure.
</Warning>

The following example registers a `<Header>` component that is editable by the user and will be displayed on each page.

<Frame>
  <img src="https://mintcdn.com/makeswift/AOijlpVp0npNQ8wB/images/developer/reference/makeswift-component/header-example.jpg?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=69de3f0c21cdd90ea7f440e57b92d4bb" alt="Properties of a header component in the Makeswift Visual Builder" width="1600" height="527" data-path="images/developer/reference/makeswift-component/header-example.jpg" />
</Frame>

### Creating the component

First, you'll need a React component. Here, we're going to create one that takes three properties: `className`, `logo`, and `links`.

```tsx @/components/header/index.tsx theme={null}
"use client";

import Image from "next/image";
import Link from "next/link";

interface Props {
  className: string;
  logo: {
    src?: string;
    alt: string;
    width: number;
    height: number;
  };
  links: Array<{
    label: string;
    link: { href: string };
  }>;
}

export function Header({ className, links, logo }: Props) {
  return (
    <header className={className}>
      <nav className="mx-auto max-w-6xl flex items-center justify-between gap-4 p-8">
        {logo?.src && (
          <div className="flex items-center justify-start self">
            <Image
              src={logo.src}
              alt={logo.alt}
              width={logo.width}
              height={logo.height}
            />
          </div>
        )}

        <ul className="flex gap-6">
          {links.map((item, i) => (
            <li key={i} value={i.toString()}>
              <Link href={item.link.href}>{item.label}</Link>
            </li>
          ))}
        </ul>
      </nav>
    </header>
  );
}
```

### Registering with Makeswift

Next, this component needs to be registered with Makeswift. This example registers the same three properties: `className`, `logo`, and `links`. Notice these property names match the property names defined in the `Header` component.

<Note>
  In `registerComponent` the `hidden` property is set to `true` which hides it
  from being listed in the Component Tray. This is because we will be
  hard-coding where this component will be incorporated into the page and we
  don't want the user to drag and drop multiple instances of it.
</Note>

```tsx @/components/header/register.ts theme={null}
import {
  Group,
  Image,
  Link,
  List,
  Number,
  Style,
  TextInput,
} from "@makeswift/runtime/controls";

import { Header } from "./";

import { runtime } from "@/makeswift/runtime";

export const HEADER_COMPONENT_TYPE = "makeswift-header";

const logo = Group({
  label: "Logo",
  preferredLayout: Group.Layout.Popover,
  props: {
    src: Image({ label: "Logo" }),
    alt: TextInput({ label: "Alt text", defaultValue: "Logo alt" }),
    width: Number({ label: "Width", suffix: "px", defaultValue: 200 }),
    height: Number({ label: "Height", suffix: "px", defaultValue: 200 }),
  },
});

const links = List({
  label: "Links",
  type: Group({
    label: "Link",
    props: {
      label: TextInput({ label: "Text", defaultValue: "Text" }),
      link: Link({ label: "URL" }),
    },
  }),
  getItemLabel: (item) => item?.label ?? "Text",
});

runtime.registerComponent(Header, {
  type: HEADER_COMPONENT_TYPE,
  label: "Site Header",
  hidden: true,
  props: {
    className: Style(),
    logo,
    links,
  },
});
```

You'll then need to import this component into your `makeswift/components.ts` file with the rest of your components. If you don't already have this file, refer to the [App Router Installation](/developer/app-router/installation#register-components-with-makeswift) guide to ensure it's created and imported in the correct places.

### Rendering the component

Then, you'll need to retrieve the snapshot of the component from the Makeswift API by calling [`getComponentSnapshot`](/developer/reference/client/get-component-snapshot) with a unique ID and pass that snapshot to `<MakeswiftComponent>`.

Here, we are adding the `<Header>` to the root `layout.tsx` file so that it shows up on each page.

```tsx @/app/layout.tsx theme={null}
import { draftMode } from "next/headers";
import { MakeswiftProvider } from "@/makeswift/provider";
import "@/makeswift/components";
import "./globals.css";
import { MakeswiftComponent } from "@makeswift/runtime/next";
import { getSiteVersion } from "@makeswift/runtime/next/server";
import { HEADER_COMPONENT_TYPE } from "@/components/header/register";
import { client } from "@/makeswift/client";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const myHeaderSnapshot = await client.getComponentSnapshot(
    `my-header-id`, //unique identifier of the component rendered on the page
    { siteVersion: await getSiteVersion() }
  );

  return (
    <html lang="en">
      <body>
        <MakeswiftProvider siteVersion={await getSiteVersion()}>
          <MakeswiftComponent
            snapshot={myHeaderSnapshot}
            label={`Site Header`}
            type={HEADER_COMPONENT_TYPE}
          />
          {children}
        </MakeswiftProvider>
      </body>
    </html>
  );
}
```

The header should now be visible on each page within the Visual Builder.

<Frame>
  <img src="https://mintcdn.com/makeswift/AOijlpVp0npNQ8wB/images/developer/reference/makeswift-component/header-finished.jpg?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=47cae6a22ad0b13e4c921d0a41bf0cfe" alt="Header component showing on a page in the Makeswift Visual Builder" width="1600" height="537" data-path="images/developer/reference/makeswift-component/header-finished.jpg" />
</Frame>

### Adding a description

We can define a description string using markdown formatting, and then in this \`layout.tsx' we can add the description field.

```typescript theme={null}
const mdDescription = `
# Site Header Description

![Site Header Example](https://mintlify.s3.us-west-1.amazonaws.com/makeswift/images/developer/reference/makeswift-component/header-example.jpg)

Find out how you can \`create\` a *header* like the **example** above.

## Styles, Logo and Links

This component has the following controls:
* Width
* Margin
* Logo
* Links
  * You can add multiple links!

Click this [link](https://docs.makeswift.com/product/introduction) to learn more!
`
```

```tsx @/app/layout.tsx theme={null}
...

          <MakeswiftComponent
            snapshot={myHeaderSnapshot}
            label={`Site Header`}
            type={HEADER_COMPONENT_TYPE}
            description = {mdDescription}
          />
...

```

You should now be able to see an info icon next to the label when selecting the component in the Visual Builder. To view your description, simply hover over the label and the popover will open.

<Frame>
  <img src="https://mintcdn.com/makeswift/AOijlpVp0npNQ8wB/images/developer/reference/makeswift-component/siteheaderopendesc.png?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=d6dc19b248367d8b46d4cf91d31502e6" alt="Site header description open" width="1562" height="1218" data-path="images/developer/reference/makeswift-component/siteheaderopendesc.png" />
</Frame>