/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    span: "span",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "We are excited to announce the Makerkit UI Storybook. This is a collection of all the components that make up the Makerkit UI. You can use this to see how the components work and to get inspiration for your own projects."
    }), "\n", _jsxs(_components.h2, {
      id: "what-is-storybook",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#what-is-storybook",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "What is Storybook?"]
    }), "\n", _jsx(_components.p, {
      children: "Storybook is an open source tool for developing UI components in isolation, which can improve component reuse, testability, and development speed. It allows you to browse a component library, view the different states of each component, and interactively develop and test components."
    }), "\n", _jsxs(_components.h2, {
      id: "where-can-i-find-the-makerkit-ui-storybook",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#where-can-i-find-the-makerkit-ui-storybook",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Where can I find the Makerkit UI Storybook?"]
    }), "\n", _jsxs(_components.p, {
      children: ["You can find the Makerkit UI Storybook at ", _jsx(_components.a, {
        href: "https://ui.makerkit.dev",
        children: "https://ui.makerkit.dev"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "It still early days for the Makerkit UI, so I am\nworking hard on writing more documentation and examples so to help you use\nthe Makerkit components in your projects."
    }), "\n", _jsx(_components.p, {
      children: "If you have any suggestions for components you would like to see, please let us know in the Makerkit Discord."
    }), "\n", _jsxs(_components.h2, {
      id: "what-will-you-be-working-on-next",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#what-will-you-be-working-on-next",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "What will you be working on next?"]
    }), "\n", _jsx(_components.p, {
      children: "My goals for the Makerkit UI are to:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "providing a more consistent and accessible UI for all the kits"
      }), "\n", _jsx(_components.li, {
        children: "document all the components and how to use them in a better way, and I do\nthink the Storybook will greatly help with this"
      }), "\n", _jsx(_components.li, {
        children: "break more components into many smaller components, so that they can be\nused in more places and be more flexible"
      }), "\n", _jsx(_components.li, {
        children: "ultimately, adding more components to the Makerkit UI, so to be a\nstandalone UI kit"
      }), "\n"]
    }), "\n", _jsxs(_components.h2, {
      id: "conclusion",
      children: [_jsx(_components.a, {
        "aria-hidden": "true",
        tabIndex: "-1",
        href: "#conclusion",
        children: _jsx(_components.span, {
          className: "icon icon-link"
        })
      }), "Conclusion"]
    }), "\n", _jsx(_components.p, {
      children: "I hope the Makerkit UI Storybook can be helpful in its current state already.\nIf you have any questions or suggestions, please let us know in the Makerkit Discord."
    }), "\n", _jsx(_components.p, {
      children: "Ciao!"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


Where can I find the Makerkit UI Storybook?

Changelog


I am super happy to introduce a new set of Marketing Components that will help you create stunning landing pages for your projects. These components are designed to be highly customizable, responsive, and easy to use, allowing you to focus on creating engaging content without worrying about the underlying layout and styling.

Let's dive into what makes these components so exciting:

1. **Hero Component**: The centerpiece of any great landing page. The new Hero component is a game-changer. It's a versatile, customizable section that allows you to create stunning above-the-fold content with ease. With props for title, subtitle, CTA, and even an optional "pill" for highlighting new features, you can create a compelling first impression in minutes.
2. **Feature Showcase**: Highlight Your Product's Best Attributes. The FeatureShowcase, FeatureGrid, and FeatureCard components work together seamlessly to help you present your product's features in an visually appealing and organized manner. Whether you're showcasing a beautiful dashboard, authentication options, or billing features, these components have got you covered.
3. **SecondaryHero**: For When One Hero Isn't Enough. Sometimes you need to emphasize multiple key points on your landing page. The SecondaryHero component is perfect for creating additional attention-grabbing sections, ideal for pricing information or secondary CTAs.
4. **Header and Footer**: Polished Navigation and Information. No landing page is complete without a sleek header and informative footer. Makerkit's new Header and Footer components are fully customizable and responsive, ensuring your page looks professional from top to bottom.
5. **Call-to-Action Buttons**: Drive User Engagement. The new CtaButton component makes it easy to create eye-catching call-to-action buttons. Whether you're encouraging sign-ups or directing users to contact you, these buttons are designed to convert.
6. **Gradient Text Components**: Add a Touch of Flair. With GradientText and GradientSecondaryText components, you can add a modern, stylish touch to your typography. These components leverage Tailwind CSS, allowing for easy customization of gradient colors.

For a complete list of available components and detailed documentation, check out the [Marketing Components documentation](https://makerkit.dev/docs/next-supabase-turbo/marketing-components).

## Using Marketing Components in Your Next.js Supabase SaaS Kit

Let's dive into some practical examples to see just how easy it is to create stunning landing pages with Makerkit's new Marketing Components:

### Creating an Attention-Grabbing Hero Section

Here's how you can use the Hero component to create a compelling hero section for your landing page:

```tsx
import { Hero, Pill } from '@kit/ui/marketing';
import { Button } from '@kit/ui/button';
import Image from 'next/image';

function LandingPage() {
  return (
    <Hero
      pill={<Pill>New Feature</Pill>}
      title="Welcome to Our Revolutionary App"
      subtitle="Discover the power of our innovative solution"
      cta={<Button>Get Started Free</Button>}
      image={
        <Image
          src="/hero-image.jpg"
          alt="App Dashboard"
          width={1200}
          height={600}
        />
      }
    />
  );
}
```

With just a few lines of code, you've created a professional-looking hero section complete with a highlighted pill, compelling title and subtitle, a call-to-action button, and a featured image. The Hero component handles all the layout and styling, allowing you to focus on your content.

<Image src="/assets/images/posts/hero-component.webp" alt="Hero Component" width={3080} height={1756} />

### Showcasing Your Product's Features

The FeatureShowcase, FeatureGrid, and FeatureCard components work together to help you present your product's features in a visually appealing way. Here's an example of how you can use these components to showcase a beautiful dashboard:

```tsx
import { FeatureShowcase, FeatureGrid, FeatureCard, FeatureShowcaseIconContainer } from '@kit/ui/marketing';
import { LayoutDashboard } from 'lucide-react';
import Image from 'next/image';

function FeaturesSection() {
  return (
    <FeatureShowcase
      heading={
        <>
          <b className="font-semibold dark:text-white">
            The ultimate SaaS Starter Kit
          </b>
          .{' '}
          <GradientSecondaryText>
            Unleash your creativity and build your SaaS faster than ever
            with Makerkit.
          </GradientSecondaryText>
        </>
      }
      icon={
        <FeatureShowcaseIconContainer>
          <LayoutDashboard className="h-5" />
          <span>All-in-one solution</span>
        </FeatureShowcaseIconContainer>
      }
    >
      <FeatureGrid>
        <FeatureCard
          className="relative col-span-2 overflow-hidden bg-violet-500 text-white lg:h-96"
          label="Beautiful Dashboard"
          description="Makerkit provides a beautiful dashboard to manage your SaaS business."
        >
          <Image
            className="absolute right-0 top-0 hidden h-full w-full rounded-tl-2xl border border-border lg:top-36 lg:flex lg:h-auto lg:w-10/12"
            src="/images/dashboard-header.webp"
            width={2061}
            height={800}
            alt="Dashboard Header"
          />
        </FeatureCard>
        {/* Add more FeatureCard components as needed */}
      </FeatureGrid>
    </FeatureShowcase>
  );
}
```

This example demonstrates how easy it is to create a visually appealing feature showcase. The FeatureShowcase component provides a clean layout, while FeatureGrid and FeatureCard components allow you to highlight individual features with images and descriptions.

<Image src="/assets/images/posts/features-grid-component.webp" alt="Features Grid Component" width={3052} height={2166} />

### Adding a Secondary Hero Section

Sometimes you need to emphasize multiple key points on your landing page. The SecondaryHero component is perfect for creating additional attention-grabbing sections. Here's an example of how you can use it to showcase pricing information:

```tsx
import { SecondaryHero, Pill } from '@kit/ui/marketing';

function PricingSection() {
  return (
    <SecondaryHero
      pill={<Pill>Get started for free. No credit card required.</Pill>}
      heading="Fair pricing for all types of businesses"
      subheading="Get started on our free plan and upgrade when you are ready."
    />
  );
}
```

<Image src="/assets/images/posts/secondary-hero.webp" alt="Secondary Hero Component" width={3052} height={1528} />

### Creating a Professional Footer

A polished footer is essential for any landing page. Makerkit's Footer component makes it easy to create a professional footer that complements your page's design:

```tsx
import { Footer } from '@kit/ui/marketing';
import { Trans } from '@kit/ui/trans';
import { AppLogo } from '~/components/app-logo';
import appConfig from '~/config/app.config';

export function SiteFooter() {
  return (
    <Footer
      logo={<AppLogo className="w-[85px] md:w-[95px]" />}
      description={<Trans i18nKey="marketing:footerDescription" />}
      copyright={
        <Trans
          i18nKey="marketing:copyright"
          values={{
            product: appConfig.name,
            year: new Date().getFullYear(),
          }}
        />
      }
      sections={[
        {
          heading: <Trans i18nKey="marketing:about" />,
          links: [
            { href: '/blog', label: <Trans i18nKey="marketing:blog" /> },
            { href: '/contact', label: <Trans i18nKey="marketing:contact" /> },
          ],
        },
        // Add more sections as needed
      ]}
    />
  );
}
```

The Footer component allows you to quickly set up a comprehensive footer with multiple sections, links, and even supports internationalization out of the box.

## Conclusion

This is the first iteration of Makerkit's Marketing Components, but you can expect some more components to be released in the future.

Can't wait to see how you'll use these components to create stunning landing pages for your projects! 🚀

Introducing Marketing Components: Crafting Stunning Landing Pages with Ease


Ever wished you could effortlessly display glowing reviews from your happy customers?

The new Testimonial Plugin for Makerkit is here to make your life a whole lot easier (and your app a whole lot more impressive)!

## What's in the Box?

The Testimonial Plugin comes packed with features that'll make managing and displaying testimonials a breeze:

1. **Testimonial Component**: Think of this as your personal hype squad. It's a React component that showcases your testimonials in various eye-catching styles. Whether you want a "Wall of Love" that stops scrollers in their tracks or a sleek, compact display that packs a punch, we've got you covered.
2. **Form Component**: Give your users a voice! This nifty form lets them submit testimonials directly through your app. And because we know one size doesn't fit all, it supports both text and video testimonials. After all, some folks are wordsmiths, while others shine on camera!
3. **Admin Panel**: Your command center for all things testimonial. Approve the gems, politely decline the not-so-greats, or remove outdated ones. It's like being a curator for your own success story museum.
4. **Manual Entry**: For those times when you receive a glowing review via carrier pigeon (or, you know, email), you can easily add it to your collection through the admin panel.

**This plugin will easily save you $30-50 spent on a third-party testimonial service**, and it's fully customizable to match your app's branding.

## Getting Started: As Easy as Pie

Excited to get started? I don't blame you! Head over to our [Testimonial Plugin documentation](/docs/next-supabase-turbo/testimonials-plugin) for a step-by-step guide on installation. Trust me, it's so straightforward, you'll have it up and running faster than you can say "five-star review"!

## The Heart of the Matter: The Testimonial Form

Every great testimonial starts with a great form. Our Testimonial Form Component is the secret sauce that makes collecting feedback a joy for your users. Let's take a peek at how it works:

```tsx
'use client';

import { useState } from 'react';
import {
  TestimonialContainer,
  TestimonialForm,
  TestimonialSuccessMessage,
  VideoTestimonialForm,
} from '@kit/testimonial/client';

export function Testimonial() {
  const [success, setSuccess] = useState(false);
  const onSuccess = () => setSuccess(true);

  if (success) {
    return <SuccessMessage />;
  }

  return (
    <TestimonialContainer
      className={
        'w-full max-w-md rounded-lg border bg-background p-8 shadow-xl'
      }
      welcomeMessage={<WelcomeMessage />}
      enableTextReview={true}
      enableVideoReview={true}
      textReviewComponent={<TestimonialForm onSuccess={onSuccess} />}
      videoReviewComponent={<VideoTestimonialForm onSuccess={onSuccess} />}
      textButtonText="Write your thoughts"
      videoButtonText="Share a video message"
      backButtonText="Switch review method"
    />
  );
}

// ... (SuccessMessage and WelcomeMessage components)
```

This little snippet of code packs a powerful punch. It creates a form that's as flexible as a yoga instructor, allowing users to submit either text or video testimonials. And when they hit that submit button? Boom! A success message appears, making them feel like they just won the lottery (of feedback).

<Image src="/assets/images/posts/testimonial-form.webp" width="2606" height="2056" alt="Testimonial Form Component" />

## Choose Your Weapon: Text or Video?

### The Power of Words

For the Hemingways among your users, the Text Testimonial Form is their canvas. They can pour their hearts out, painting a picture of their experience with your app in vivid verbal detail.

<Image src="/assets/images/posts/testimonial-form-text.webp" width="2606" height="2056" alt="Testimonial Form Component" />

### Lights, Camera, Action!

But for those who believe a picture is worth a thousand words (and a video is worth a million), we've got the Video Testimonial Form. Users can record their glowing reviews right from their browser, adding a personal touch that's hard to beat.

<Image src="/assets/images/posts/testimonial-form-video.webp" width="2632" height="2066" alt="Testimonial Form Component" />

## The Pièce de Résistance: The Wall of Love

Once you've collected all these amazing testimonials, it's time to show them off! Enter the Testimonial Wall of Love - a React component that turns your testimonials into a work of art. It's like Instagram for your app's fan club!

<Image src="/assets/images/posts/testimonial-wall-of-love.webp" width="2970" height="2028" alt="Testimonial Wall of Love" />

## Behind the Scenes: The Admin Panel

Every great show needs a great director, and that's where the Testimonial Admin Panel comes in. It's your backstage pass to managing all the testimonials. Approve the standing ovations, gently decline the constructive criticism, and keep your testimonial collection fresh and relevant.

<Image src="/assets/images/posts/testimonials-admin.webp" width="1932" height="1556" alt="Testimonials Admin Panel" />

Want to dive deep into a particular review? The detailed view lets you see every aspect of each testimonial. It's like having X-ray vision for feedback!

<Image src="/assets/images/posts/testimonials-admin-detail.webp" width="2336" height="732" alt="Testimonials Admin Detail" />

## For the Personal Touch: Manual Entry

Sometimes, you get a review so good, you want to frame it. With the manual entry feature, you can add these gems to your collection yourself. It's perfect for those reviews that come in through unconventional channels or from your VIP customers.

<Image src="/assets/images/posts/testimonials-manual-entry.webp" width="1702" height="1515" alt="Testimonials Manual Entry" />

## Wrapping Up

I hope you're as excited about the Testimonial Plugin as I am! It's a game-changer for showcasing your app's success stories and building trust with your users. Head over to the [Testimonial Plugin documentation](/docs/next-supabase-turbo/testimonials-plugin) to get started, and let the testimonials roll in!

Introducing the Testimonial Plugin for Makerkit


The release of Multi-Step forms for Makerkit opens up a world of possibilities for creating delightful onboarding experiences. In this post, we'll show you how to create a delightful onboarding experience using the Multi-Step Form Component for Makerkit.

While Makerkit Turbo does not include an Onboarding (customers in v1 were not interested in this feature), some customers are still needing this feature. In this post, I'll show you how easy it is with Makerkit.

The final result will be a multi-step form that guides users through the onboarding process, collecting information along the way:

<Video src="/assets/videos/onboarding-flow.mp4" />

## Differentiating between Onboarded and Non-Onboarded Users

First - we must be able to differentiate between onboarded and non-onboarded users. This can be done by checking if the user has completed the onboarding process. If they have, we can redirect them to the dashboard. If they haven't, we can show them the onboarding form.

To store this data, we can use the Supabase Auth `app_metadata` field. This field is a JSON object that can store any data you want (with limitations). In this case, we'll store a boolean value that indicates whether the user has completed the onboarding process.

### Checking if the User is Onboarded in the Middleware

To check if the user is onboarded, we add a check in the middleware. If the user is not onboarded, we redirect them to the onboarding page.

In your middleware, you can add the following code after the user has been fetched:

```tsx title="apps/web/app/middleware.ts" {19-23}
{
  pattern: new URLPattern({ pathname: '/home/*?' }),
  handler: async (req: NextRequest, res: NextResponse) => {
    const {
      data: { user },
    } = await getUser(req, res);

    const origin = req.nextUrl.origin;
    const next = req.nextUrl.pathname;

    // If user is not logged in, redirect to sign in page.
    if (!user) {
      const signIn = pathsConfig.auth.signIn;
      const redirectPath = `${signIn}?next=${next}`;

      return NextResponse.redirect(new URL(redirectPath, origin).href);
    }

    const isOnboarded = user?.app_metadata.onboarded;

    if (!isOnboarded) {
      return NextResponse.redirect(new URL('/onboarding', origin).href);
    }

    const supabase = createMiddlewareClient(req, res);

    const requiresMultiFactorAuthentication =
      await checkRequiresMultiFactorAuthentication(supabase);

    // If user requires multi-factor authentication, redirect to MFA page.
    if (requiresMultiFactorAuthentication) {
      return NextResponse.redirect(
        new URL(pathsConfig.auth.verifyMfa, origin).href,
      );
    }
  },
}
```

### Creating the Onboarding Page

With the middleware in place, we can now create the onboarding page. The onboarding page is where the user will complete the onboarding process. This page will contain the multi-step form that the user will fill out.

Let's create a page for the onboarding at `apps/web/app/onboarding/page.tsx`:

```tsx title="apps/web/app/onboarding/page.tsx"
import { AppLogo } from '~/components/app-logo';
import { OnboardingForm } from '~/onboarding/_components/onboarding-form';

export default function OnboardingPage() {
  return (
    <div className={'flex flex-1 flex-col h-screen items-center justify-center space-y-16'}>
      <AppLogo />

      <OnboardingForm />
    </div>
  );
}
```

NB: we don't have the `OnboardingForm` component yet, but we'll create it in the next section. Please leave it empty for now and then import it back.

#### Installing the package react-confetti

To make the onboarding experience more delightful, we can add some confetti animation when the user completes the onboarding process. We'll use the `react-confetti` package for this.

To install the package, run:

```bash
pnpm --filter web add react-confetti
```

### Creating the Multi-Step Form

Now that we have the onboarding page, we can create the multi-step form. The multi-step form will guide the user through the onboarding process, collecting the necessary information along the way.

To create the multi-step form, we'll use the Multi-Step Form Component for Makerkit. This component provides a simple API to create multi-step forms with ease.

In the onboarding form, we ask the user the following information:

1. Their full name
2. The name of the Team they want to create

We split the form into two steps, with each step collecting one piece of information - which is a good practice for onboarding forms and helps to reduce friction.

Now let's dive deep into the multi-step form implementation. We'll break down each part of the `OnboardingForm` component and explain its purpose and functionality.

### 1. Defining the Form Schema

First, we define the schema for our form using Zod:

```typescript
const FormSchema = createStepSchema({
  profile: z.object({
    name: z.string().min(1).max(255),
  }),
  team: z.object({
    name: z.string().min(1).max(255),
  }),
});
```

This schema defines two steps: 'profile' and 'team', each with a 'name' field. The `createStepSchema` function is a helper that ensures our schema is compatible with the Multi-Step Form component.

### 2. The OnboardingForm Component

The `OnboardingForm` component is the main container for our multi-step form:

```tsx
export function OnboardingForm() {
  const form = useForm({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      profile: { name: '' },
      team: { name: '' },
    },
    mode: 'onBlur',
  });

  const onSubmit = useCallback((data: z.infer<typeof FormSchema>) => {
    console.log(data);
  }, []);

  return (
    <div>
      <MultiStepForm
        className={/* ... */}
        schema={FormSchema}
        form={form}
        onSubmit={onSubmit}
      >
        {/* Form content */}
      </MultiStepForm>
    </div>
  );
}
```

Here, we:
- Use `useForm` from react-hook-form to manage our form state
- Set up form validation using the Zod schema we defined
- Define an `onSubmit` callback (currently just logging the data)
- Render the `MultiStepForm` component, passing in our schema, form, and onSubmit handler

### 3. Form Header with Stepper

Inside the `MultiStepForm`, we first render a header with a stepper:

```tsx
<MultiStepFormHeader>
  <MultiStepFormContextProvider>
    {({ currentStepIndex }) => (
      <Stepper
        variant={'numbers'}
        steps={['Profile', 'Team', 'Complete']}
        currentStep={currentStepIndex}
      />
    )}
  </MultiStepFormContextProvider>
</MultiStepFormHeader>
```

This creates a visual indicator of progress through the form steps. The `MultiStepFormContextProvider` gives us access to the current step index, which we use to highlight the active step.

### 4. Form Steps

Next, we define each step of our form:

```tsx
<MultiStepFormStep name={'profile'}>
  <ProfileStep />
</MultiStepFormStep>

<MultiStepFormStep name={'team'}>
  <TeamStep />
</MultiStepFormStep>

<MultiStepFormStep name={'complete'}>
  <CompleteStep />
</MultiStepFormStep>
```

Each `MultiStepFormStep` corresponds to a step in our form schema. The `name` prop should match the keys in our schema.

### 5. The Profile Step

The `ProfileStep` component renders the first step of our form:

```tsx
function ProfileStep() {
  const { nextStep, form } = useMultiStepFormContext();

  return (
    <Form {...form}>
      <div className={'flex flex-col space-y-6'}>
        {/* Welcome text */}
        <FormField
          render={({ field }) => (
            <FormItem>
              <FormLabel>Your Name</FormLabel>
              <FormControl>
                <Input {...field} placeholder={'Name'} />
              </FormControl>
              <FormDescription>Enter your full name here</FormDescription>
            </FormItem>
          )}
          name={'profile.name'}
        />
        <div className={'flex justify-end'}>
          <Button onClick={nextStep}>Continue</Button>
        </div>
      </div>
    </Form>
  );
}
```

This step:
- Uses the `useMultiStepFormContext` hook to access form utilities
- Renders a form field for the user's name
- Provides a 'Continue' button to move to the next step

### 6. The Team Step

The `TeamStep` component is similar to the `ProfileStep`, but adds team creation functionality:

```tsx
function TeamStep() {
  const { nextStep, prevStep, form, mutation } = useMultiStepFormContext();

  return (
    <Form {...form}>
      {/* Similar structure to ProfileStep */}
      <div className={'flex justify-end space-x-2'}>
        <Button variant={'ghost'} onClick={prevStep}>
          Go Back
        </Button>
        <Button
          onClick={async (e) => {
            await mutation.mutateAsync();
            nextStep(e);
          }}
        >
          {mutation.isPending ? 'Processing...' : 'Create Team'}
        </Button>
      </div>
    </Form>
  );
}
```

This step adds:
- A 'Go Back' button to return to the previous step
- A 'Create Team' button that triggers a mutation (e.g., to create the team in your backend) before moving to the next step

The `mutation` object uses `useMutation` from React Query and provides utilities for handling asynchronous operations, which is very useful when you need additional control over form submission.

### 7. The Complete Step

The `CompleteStep` component renders the final step of our form:

```tsx
function CompleteStep() {
  const { form } = useMultiStepFormContext();

  return (
    <div className={'flex flex-col space-y-6'}>
      {/* Completion message */}
      <Button asChild>
        <Link href={'/home'}>Finish</Link>
      </Button>
    </div>
  );
}
```

This step:
- Displays a completion message, including the user's name from the form data
- Provides a 'Finish' button that links to the home page

### Handling Form Submission

Finally, we handle form submission in the `onSubmit` callback. In this function, we will execute a Server Action to update the user profile, create the team, and mark the user as onboarded.

```tsx title="apps/web/app/onboarding/_lib/server/server-actions.ts"
'use server';

import { z } from 'zod';

import { enhanceAction } from '@kit/next/actions';
import { getSupabaseServerActionClient } from '@kit/supabase/server-actions-client';
import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';

export const submitOnboardingFormAction = enhanceAction(
  async (data, user) => {
    const client = getSupabaseServerComponentClient();

    const createTeamResponse = await client.rpc('create_team_account', {
      account_name: data.team.name,
    });

    if (createTeamResponse.error) {
      throw new Error(
        `Failed to create team: ${createTeamResponse.error.message}`,
      );
    }

    const profileResponse = await client
      .from('accounts')
      .update({
        name: data.profile.name,
      })
      .eq('id', user.id);

    if (profileResponse.error) {
      throw new Error(
        `Failed to update profile: ${profileResponse.error.message}`,
      );
    }

    const adminClient = getSupabaseServerActionClient({ admin: true });

    await adminClient.auth.admin.updateUserById(user.id, {
      app_metadata: {
        onboarded: true,
      },
    });

    return {
      success: true,
    };
  },
  {
    auth: true,
    schema: z.object({
      profile: z.object({
        name: z.string().min(1).max(255),
      }),
      team: z.object({
        name: z.string().min(1).max(255),
      }),
    }),
  },
);
```

This action updates the user's profile, creates the team, and marks the user as onboarded. It uses the `enhanceAction` helper to handle authentication and validation.

This is just an example - your onboarding process may involve different steps or actions. You can customize the `submitOnboardingFormAction` to suit your specific requirements.

### Integrating the Server Action

Let's now integrate the `submitOnboardingFormAction` with our form submission:

```tsx title="apps/web/app/onboarding/onboarding-form.tsx"
import { submitOnboardingFormAction } from './_lib/server/server-actions';
```

```tsx title="apps/web/app/onboarding/onboarding-form.tsx"
const onSubmit = useCallback(async (data: z.infer<typeof FormSchema>) => {
  try {
    await submitOnboardingFormAction(data);
  } catch (error) {
    console.error('Failed to submit form:', error);
  }
}, []);
```

### Putting It All Together

With all the pieces in place, our `OnboardingForm` component looks like this:

```tsx title="apps/web/app/onboarding/onboarding-form.tsx"
'use client';

import { useCallback } from 'react';

import { createPortal } from 'react-dom';

import dynamic from 'next/dynamic';
import Link from 'next/link';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import { Button } from '@kit/ui/button';
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import {
  MultiStepForm,
  MultiStepFormContextProvider,
  MultiStepFormHeader,
  MultiStepFormStep,
  createStepSchema,
  useMultiStepFormContext,
} from '@kit/ui/multi-step-form';
import { Stepper } from '@kit/ui/stepper';

import { submitOnboardingFormAction } from '~/onboarding/_lib/server/server-actions';

const Confetti = dynamic(
  () => {
    return import('react-confetti');
  },
  {
    ssr: false,
  },
);

const FormSchema = createStepSchema({
  profile: z.object({
    name: z.string().min(1).max(255),
  }),
  team: z.object({
    name: z.string().min(1).max(255),
  }),
});

export function OnboardingForm() {
  const form = useForm({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      profile: {
        name: '',
      },
      team: {
        name: '',
      },
    },
    mode: 'onBlur',
  });

  const onSubmit = useCallback(async (data: z.infer<typeof FormSchema>) => {
    try {
      await submitOnboardingFormAction(data);
    } catch (error) {
      console.error('Failed to submit form:', error);
    }
  }, []);

  return (
    <div>
      <MultiStepForm
        className={
          'w-full max-w-md space-y-8 rounded-lg border p-8 shadow-sm duration-500 animate-in fade-in-90 zoom-in-95 slide-in-from-bottom-12'
        }
        schema={FormSchema}
        form={form}
        onSubmit={onSubmit}
      >
        <MultiStepFormHeader>
          <MultiStepFormContextProvider>
            {({ currentStepIndex }) => (
              <Stepper
                variant={'numbers'}
                steps={['Profile', 'Team', 'Complete']}
                currentStep={currentStepIndex}
              />
            )}
          </MultiStepFormContextProvider>
        </MultiStepFormHeader>

        <MultiStepFormStep name={'profile'}>
          <ProfileStep />
        </MultiStepFormStep>

        <MultiStepFormStep name={'team'}>
          <TeamStep />
        </MultiStepFormStep>

        <MultiStepFormStep name={'complete'}>
          <CompleteStep />
        </MultiStepFormStep>
      </MultiStepForm>
    </div>
  );
}

function ProfileStep() {
  const { nextStep, form } = useMultiStepFormContext();

  return (
    <Form {...form}>
      <div className={'flex flex-col space-y-6'}>
        <div className={'flex flex-col space-y-2'}>
          <h1 className={'text-xl font-semibold'}>Welcome to Makerkit</h1>

          <p className={'text-sm text-muted-foreground'}>
            Welcome to the onboarding process! Let&apos;s get started by
            entering your name.
          </p>
        </div>

        <FormField
          render={({ field }) => {
            return (
              <FormItem>
                <FormLabel>Your Name</FormLabel>

                <FormControl>
                  <Input {...field} placeholder={'Name'} />
                </FormControl>

                <FormDescription>Enter your full name here</FormDescription>
              </FormItem>
            );
          }}
          name={'profile.name'}
        />

        <div className={'flex justify-end'}>
          <Button onClick={nextStep}>Continue</Button>
        </div>
      </div>
    </Form>
  );
}

function TeamStep() {
  const { nextStep, prevStep, form, mutation } = useMultiStepFormContext();

  return (
    <Form {...form}>
      <div className={'flex flex-col space-y-6'}>
        <div className={'flex flex-col space-y-2'}>
          <h1 className={'text-xl font-semibold'}>Create Your Team</h1>

          <p className={'text-sm text-muted-foreground'}>
            Let&apos;s create your team. Enter your team name below.
          </p>
        </div>

        <FormField
          render={({ field }) => {
            return (
              <FormItem>
                <FormLabel>Your Team Name</FormLabel>

                <FormControl>
                  <Input {...field} placeholder={'Name'} />
                </FormControl>

                <FormDescription>
                  This is the name of your team.
                </FormDescription>
              </FormItem>
            );
          }}
          name={'team.name'}
        />

        <div className={'flex justify-end space-x-2'}>
          <Button
            disabled={mutation.isPending}
            variant={'ghost'}
            onClick={prevStep}
          >
            Go Back
          </Button>

          <Button
            onClick={async (e) => {
              await mutation.mutateAsync();

              nextStep(e);
            }}
          >
            {mutation.isPending ? 'Processing...' : 'Create Team'}
          </Button>
        </div>
      </div>
    </Form>
  );
}

function CompleteStep() {
  const { form } = useMultiStepFormContext();

  return (
    <div className={'flex flex-col space-y-6'}>
      {createPortal(<Confetti numberOfPieces={500} recycle={false} />, document.body)}

      <div className={'flex flex-col space-y-2'}>
        <h1 className={'text-xl font-semibold'}>
          Hello, {form.getValues('profile').name}!
        </h1>

        <p className={'text-sm text-muted-foreground'}>
          You&apos;re almost done! Click the button below to finish the
          onboarding process.
        </p>
      </div>

      <Button asChild>
        <Link href={'/home'}>Finish</Link>
      </Button>
    </div>
  );
}
```

## Conclusion

By leveraging Makerkit's Multi-Step Form component, we've created a smooth, intuitive onboarding process. This approach:

1. Breaks down the onboarding into manageable steps
2. Provides clear visual feedback on progress
3. Allows for easy validation and error handling
4. Creates a flexible structure that can be easily extended or modified

With this onboarding flow in place, you're well on your way to creating a delightful first-time user experience that sets the tone for your entire application. Happy onboarding!

Creating a Delightful Onboarding Experience with Multi-Step Forms


I am super excited to announce the release of the Multi-Step Form Component for Makerkit. This component allows you to create multi-step forms with ease.

If you want to know how it's implemented, check out the [blog post that explains how to use the Multi-Step Form Component](multi-step-forms-reactjs) in your projects.

## Usage of the Multi-Step Form Component

The component is a wrapper around React Hook Form, Zod and Shadcn UI - it provides a simple API to create multi-step forms with ease.

<Video src="/assets/videos/multi-step-demo.mp4" />

Here's a simple example of how you can use the Multi-Step Form Component, which we use in conjunction with our built-in `Stepper` component:

```tsx
'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import { Button } from '@kit/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@kit/ui/form';
import { Input } from '@kit/ui/input';
import {
  MultiStepForm,
  MultiStepFormContextProvider,
  MultiStepFormHeader,
  MultiStepFormStep,
  createStepSchema,
  useMultiStepFormContext,
} from '@kit/ui/multi-step-form';
import { Stepper } from '@kit/ui/stepper';

const FormSchema = createStepSchema({
  account: z.object({
    username: z.string().min(3),
    email: z.string().email(),
  }),
  profile: z.object({
    password: z.string().min(8),
    age: z.coerce.number().min(18),
  }),
});

type FormValues = z.infer<typeof FormSchema>;

export function MultiStepFormDemo() {
  const form = useForm<FormValues>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      account: {
        username: '',
        email: '',
      },
      profile: {
        password: '',
      },
    },
    reValidateMode: 'onBlur',
    mode: 'onBlur',
  });

  const onSubmit = (data: FormValues) => {
    console.log('Form submitted:', data);
  };

  return (
    <MultiStepForm
      className={'space-y-10 p-8 rounded-xl border'}
      schema={FormSchema}
      form={form}
      onSubmit={onSubmit}
    >
      <MultiStepFormHeader
        className={'flex w-full flex-col justify-center space-y-6'}
      >
        <h2 className={'text-xl font-bold'}>Create your account</h2>

        <MultiStepFormContextProvider>
          {({ currentStepIndex }) => (
            <Stepper
              variant={'numbers'}
              steps={['Account', 'Profile', 'Review']}
              currentStep={currentStepIndex}
            />
          )}
        </MultiStepFormContextProvider>
      </MultiStepFormHeader>

      <MultiStepFormStep name="account">
        <AccountStep />
      </MultiStepFormStep>

      <MultiStepFormStep name="profile">
        <ProfileStep />
      </MultiStepFormStep>

      <MultiStepFormStep name="review">
        <ReviewStep />
      </MultiStepFormStep>
    </MultiStepForm>
  );
}

function AccountStep() {
  const { form, nextStep, isStepValid } = useMultiStepFormContext();

  return (
    <Form {...form}>
      <div className={'flex flex-col gap-4'}>
        <FormField
          name="account.username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="account.email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <div className="flex justify-end">
          <Button onClick={nextStep} disabled={!isStepValid()}>
            Next
          </Button>
        </div>
      </div>
    </Form>
  );
}

function ProfileStep() {
  const { form, nextStep, prevStep } = useMultiStepFormContext();

  return (
    <Form {...form}>
      <div className={'flex flex-col gap-4'}>
        <FormField
          name="profile.password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password</FormLabel>
              <FormControl>
                <Input type="password" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          name="profile.age"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Age</FormLabel>
              <FormControl>
                <Input type="number" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <div className="flex justify-end space-x-2">
          <Button type={'button'} variant={'outline'} onClick={prevStep}>
            Previous
          </Button>

          <Button onClick={nextStep}>Next</Button>
        </div>
      </div>
    </Form>
  );
}

function ReviewStep() {
  const { prevStep, form } = useMultiStepFormContext<typeof FormSchema>();
  const values = form.getValues();

  return (
    <div className={'flex flex-col space-y-4'}>
      <div className={'flex flex-col space-y-4'}>
        <div>Great! Please review the values.</div>

        <div className={'flex flex-col space-y-2 text-sm'}>
          <div>
            <span>Username</span>: <span>{values.account.username}</span>
          </div>
          <div>
            <span>Email</span>: <span>{values.account.email}</span>
          </div>
          <div>
            <span>Age</span>: <span>{values.profile.age}</span>
          </div>
        </div>
      </div>

      <div className="flex justify-end space-x-2">
        <Button type={'button'} variant={'outline'} onClick={prevStep}>
          Back
        </Button>

        <Button type={'submit'}>Create Account</Button>
      </div>
    </div>
  );
}
```

In the example above we have a simple multi-step form with three steps: `account`, `profile` and `review`. Each step is a separate component that renders the form fields for that step.

The `MultiStepForm` component takes care of managing the form state and transitions between steps. It also provides a simple API to access the form state and navigate between steps.

I hope you enjoy using the Multi-Step Form Component as much as I enjoyed building it. If you have any feedback or suggestions, feel free to reach out to on our Discord!

Introducing the Multi-Step Form Component for Makerkit


I am happy to announce the release of the new feedback plugin for Makerkit. This plugin allows your users to give feedback on your app, making it easier for you to understand what they like and what they don't like.

NB: this new version is exclusive to the Next.js and Remix Turbo versions. The older version have a different feedback plugin.

## How does the feedback plugin work?

1. **Feedback form**: The feedback plugin adds a feedback form to your app that allows users to submit feedback on your app. The trigger is customizable and can be placed anywhere in your app.
2. **Feedback collection**: The feedback submitted by users is collected in the Makerkit admin dashboard, where you can view and manage the feedback.

<Image src='/assets/images/posts/feedback-plugin.webp' width="1060" height="772" />

## How to add the feedback plugin to your Kit

First, you will want to pull the plugin from the mirror repository. You can do this by running the following command from your project's root directory:

```bash
npx @makerkit/cli plugins install feedback
```

This will install the feedback plugin in your project using `git subtree` and place the required files in the `packages/plugins/feedback` directory.

### Add the package to your app

Next, you will need to add the feedback package to your app's dependencies. You can do this by adding the following line to your `package.json` file:

```json
{
  "dependencies": {
    "@kit/feedback": "workspace:*"
  }
}
```

Now run the install command to install the package:

```bash
pnpm install
```

### Add the migrations

Since the feedback relies on a new table in the database, you will need to run the migrations to create the table. Please create a new migration file:

```
pnpm --filter web supabase migration new feedback
```

And copy the content of the migration file from the plugin repository to your new migration file.

Run the reset command to apply the migration:

```
pnpm run supabase:web:reset
```

And then regenerate the types:

```
pnpm run supabase:web:typegen
```

### Add the feedback form to your app

Finally, you will need to add the feedback form to your app. You can do this by importing the feedback component and placing it in your app where you want the feedback form to appear:

```tsx
import { FeedbackPopup } from '@kit/feedback';

<FeedbackPopup>
    <Button>Gimme feedback</Button>
</FeedbackPopup>
```

That's it! You now have a feedback form in your app that allows users to submit feedback on your app.

## Adding the feedback admin pages

To view and manage the feedback submitted by users, you will need to add the feedback admin pages to your app. You can do this by importing the feedback admin pages and placing them in your app.

Add the following to your `apps/web/admin/feedback/page.tsx` file:

```tsx title="apps/web/admin/feedback/page.tsx"
import { FeedbackSubmissionsPage } from '@kit/feedback/admin';

export default FeedbackSubmissionsPage;
```

And the submission detail page at `apps/web/admin/feedback/[id]/route.tsx`:

```tsx title="apps/web/admin/feedback/[id]/route.tsx"
import { FeedbackSubmissionPage } from '@kit/feedback/admin';

export default FeedbackSubmissionPage;
```

Add the sidebar item to `apps/web/app/admin/_components/admin-sidebar.tsx`:

```tsx title="apps/web/app/admin/_components/admin-sidebar.tsx"
<SidebarItem
    path={'/admin/feedback'}
    Icon={<MessageCircle className={'h-4'} />}
    >
    Feedback
</SidebarItem>
```

That's it! You now have the feedback admin pages in your app that allow you to view and manage the feedback submitted by users.

<Image src='/assets/images/posts/feedback-plugin-admin.webp' width="2316" height="988" />


Announcing the Feedback plugin


One of the issues arising from hybrid applications is that keeping the client and server in sync can be a challenge.

**Scenario**: Your app has a few users who are currently using the application - and at the same time you deploy your new version - it's possible to hit issues where the client and server are out of sync.

This can lead to unexpected behavior, crashes, even data loss and vague 404s since the referenced script hashes are no longer valid (as they were wiped out).

Hosting services like Vercel have a feature called "Skew Protection" that takes care of this specific issue, but outside of it you're largely on your own. This is where the new version updater component comes in.

The version updater component is a new feature that allow your app to check for updates and prompt the user to install them. It's a simple component that you can drop into your app and it will take care of the rest. It's designed to be as unobtrusive as possible, only showing a prompt when an update is available.

NB: this feature is specific to the Next.js and Remix Turbo versions.

## How does the version updater work?

1. **App version**: At build time, we store the current version of your app in a route at `/version` containing the git commit hash.
2. **Polling for updates**: When the app loads, it fetches the current version from the server and compares it to the version stored in the route. We refetch in the background every 2 minutes - but you can configure this.
3. **Prompt user to reload**: If a new version is available, the component will show a prompt to the user asking them to install the update. If they accept, the app will reload and the new version will be installed.

<Image src='/assets/images/posts/version-updater.webp' width="1390" height="772" />

Once the user clicks on "Reload and Update", the app will reload and the new version will be installed. At this point, all the files will be updated and the app will be in sync with the server. The customer will be able to continue using the app without any issues.

## How to use the version updater

The version updated is off by default - and this is because Vercel already protects you from this issue. However, if you're not using Vercel or you want to have more control over the update process, you can enable it by flipping the environment variable `NEXT_PUBLIC_ENABLE_VERSION_UPDATER` to `true`.

```bash
NEXT_PUBLIC_ENABLE_VERSION_UPDATER=true
```

To configure the polling interval, you can set the environment variable `NEXT_PUBLIC_VERSION_UPDATER_REFETCH_INTERVAL_SECONDS` to the number of seconds you want to wait between each poll. The default is 120 seconds (2 minutes).

```bash
NEXT_PUBLIC_VERSION_UPDATER_REFETCH_INTERVAL_SECONDS=480
```

Above, we set it to 480 seconds (8 minutes), but you can set it to whatever you feel is appropriate for your app.

## Conclusion

I strive to make Makerkit the best possible kit for building a SaaS application - and this means taking care of the small details that can make a big difference. The version updater is one of those features that can save you a lot of headaches down the line.

Let me know what you think of this feature and if you have any suggestions for improvements. I'm always looking for ways to make Makerkit better and your feedback is invaluable.

Ciao!

Announcing the Version Updater component


We are excited to announce the Makerkit UI Storybook. This is a collection of all the components that make up the Makerkit UI. You can use this to see how the components work and to get inspiration for your own projects.

## What is Storybook?

Storybook is an open source tool for developing UI components in isolation, which can improve component reuse, testability, and development speed. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

## Where can I find the Makerkit UI Storybook?

You can find the Makerkit UI Storybook at [https://ui.makerkit.dev](https://ui.makerkit.dev).

It still early days for the Makerkit UI, so I am
working hard on writing more documentation and examples so to help you use
the Makerkit components in your projects.

If you have any suggestions for components you would like to see, please let us know in the Makerkit Discord.

## What will you be working on next?

My goals for the Makerkit UI are to:
- providing a more consistent and accessible UI for all the kits
- document all the components and how to use them in a better way, and I do
think the Storybook will greatly help with this
- break more components into many smaller components, so that they can be
used in more places and be more flexible
- ultimately, adding more components to the Makerkit UI, so to be a
standalone UI kit

## Conclusion

I hope the Makerkit UI Storybook can be helpful in its current state already.
If you have any questions or suggestions, please let us know in the Makerkit Discord.

Ciao!


Introducing the Makerkit UI Storybook

Announcing the Makerkit UI Storybook: a collection of all the components that make up the Makerkit kits. You can use this to see how the components work and to get inspiration for your own projects.

What is Storybook?