Almost done with template perhaps. Have not tested yet though.

src/components/default/form-message.tsx

@@ -0,0 +1,24 @@
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export const FormMessage = ({ message }: { message: Message }) => {
+  return (
+    <div className='flex flex-col gap-2 w-full max-w-md text-sm'>
+      {'success' in message && (
+        <div className='text-foreground border-l-2 border-foreground px-4'>
+          {message.success}
+        </div>
+      )}
+      {'error' in message && (
+        <div className='text-destructive-foreground border-l-2 border-destructive-foreground px-4'>
+          {message.error}
+        </div>
+      )}
+      {'message' in message && (
+        <div className='text-foreground border-l-2 px-4'>{message.message}</div>
+      )}
+    </div>
+  );
+};

src/components/default/index.tsx

@@ -0,0 +1,4 @@
+import { FormMessage, type Message } from '@/components/default/form-message';
+import { SubmitButton } from '@/components/default/submit-button';
+
+export { FormMessage, type Message, SubmitButton };

src/components/default/submit-button.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { type ComponentProps } from 'react';
+import { useFormStatus } from 'react-dom';
+
+type Props = ComponentProps<typeof Button> & {
+  pendingText?: string;
+};
+
+export const SubmitButton = ({
+  children,
+  pendingText = 'Submitting...',
+  ...props
+}: Props) => {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button type='submit' aria-disabled={pending} {...props}>
+      {pending ? pendingText : children}
+    </Button>
+  );
+};