Please document how to use form with server actions in nextjs

[realtebo]

I am unable to understand how to build a form with your excellent package but using next 15 server actions.

I found an example, but it's using absolutely undocumented things !

Where are singole form component documented ?!

import { SubmitButton } from "@/components/form/Buttons";
import FormContainer from "@/components/form/FormContainer";
import FormInput from "@/components/form/FormInput";
import { createProfileAction } from "@/utils/actions";
import { currentUser } from '@clerk/nextjs/server';
import { redirect } from 'next/navigation';

async function CreateProfile() {
  // If user is already logged in, we skip creation profile form
  const user = await currentUser();
  // this metata has been set in utils/actions.ts -> createProfile
  if (user?.privateMetadata?.hasProfile) redirect('/');

  return (
    <section>
      <h1 className="text-2xl font-semibold mb-8 capitalize">new user</h1>
      <div className="border p-8 rounded-md">
        <FormContainer action={createProfileAction}>
          <div className="grid md:grid-cols-2 gap-4 mt-4 ">
            <FormInput type="text" name="firstName" label="First Name" />
            <FormInput type="text" name="lastName" label="Last Name" />
            <FormInput type="text" name="username" label="Username" />
          </div>
          <SubmitButton text="Create Profile" className="mt-8" />
        </FormContainer>
      </div>
    </section>
  );
}
export default CreateProfile;

[realtebo]

Ok, I found that form container was a custom component, anyway, please document how to use with server action !