UI Components for Next.js Supabase SaaS Applications

import { Button, Input, Card } from '@kit/ui/button';
import { DataTable } from '@kit/ui/enhanced-data-table';
import { MultiStepForm } from '@kit/ui/multi-step-form';

'use client';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Button } from '@kit/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@kit/ui/card';
import { Form, FormField, FormItem, FormLabel, FormControl } from '@kit/ui/form';
import { Input } from '@kit/ui/input';
const schema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Invalid email'),
});
export function ContactForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { name: '', email: '' },
  });
  return (
    <Card>
      <CardHeader>
        <CardTitle>Contact Us</CardTitle>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(console.log)} className="space-y-4">
            <FormField
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Name</FormLabel>
                  <FormControl>
                    <Input {...field} placeholder="Your name" />
                  </FormControl>
                </FormItem>
              )}
            />
            <FormField
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input {...field} type="email" placeholder="you@example.com" />
                  </FormControl>
                </FormItem>
              )}
            />
            <Button type="submit">Send Message</Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}

import { DataTable } from '@kit/ui/enhanced-data-table';
function UsersTable({ users, pageCount }) {
  const columns = [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'email', header: 'Email' },
    { accessorKey: 'role', header: 'Role' },
  ];
  return (
    <DataTable
      columns={columns}
      data={users}
      pageIndex={0}
      pageSize={10}
      pageCount={pageCount}
    />
  );
}

import { MultiStepForm, MultiStepFormStep, createStepSchema } from '@kit/ui/multi-step-form';
const FormSchema = createStepSchema({
  account: z.object({
    email: z.string().email(),
    password: z.string().min(8),
  }),
  profile: z.object({
    name: z.string().min(1),
    company: z.string().optional(),
  }),
});
function OnboardingWizard() {
  const form = useForm({ resolver: zodResolver(FormSchema) });
  return (
    <MultiStepForm schema={FormSchema} form={form} onSubmit={handleSubmit}>
      <MultiStepFormStep name="account">
        <AccountFields />
      </MultiStepFormStep>
      <MultiStepFormStep name="profile">
        <ProfileFields />
      </MultiStepFormStep>
    </MultiStepForm>
  );
}

import { EmptyState } from '@kit/ui/empty-state';
import { PlusIcon } from 'lucide-react';
function ProjectsEmpty() {
  return (
    <EmptyState
      icon={<FolderIcon className="h-12 w-12" />}
      title="No projects yet"
      description="Create your first project to get started."
    >
      <Button>
        <PlusIcon className="mr-2 h-4 w-4" />
        Create Project
      </Button>
    </EmptyState>
  );
}

import { Stepper } from '@kit/ui/stepper';
function CheckoutProgress({ currentStep }) {
  return (
    <Stepper
      variant="numbers"
      steps={['Cart', 'Shipping', 'Payment', 'Confirmation']}
      currentStep={currentStep}
    />
  );
}

import { LoadingOverlay } from '@kit/ui/loading-overlay';
function DataPanel({ isLoading, children }) {
  return (
    <div className="relative">
      {isLoading && <LoadingOverlay />}
      {children}
    </div>
  );
}

import { CookieBanner } from '@kit/ui/cookie-banner';
function Layout({ children }) {
  return (
    <>
      {children}
      <CookieBanner />
    </>
  );
}

<Button className="bg-gradient-to-r from-blue-500 to-purple-600">
  Gradient Button
</Button>
<Card className="shadow-xl border-2 border-primary">
  <CardContent>Custom styled card</CardContent>
</Card>

// Button variants
<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
// Alert variants
<Alert variant="default">Info</Alert>
<Alert variant="success">Success</Alert>
<Alert variant="warning">Warning</Alert>
<Alert variant="destructive">Error</Alert>
// Badge variants
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>

packages/ui/src/
├── shadcn/           # Shadcn UI components
│   ├── button.tsx
│   ├── input.tsx
│   └── ...
├── makerkit/         # Makerkit components
│   ├── enhanced-data-table.tsx
│   ├── multi-step-form.tsx
│   └── ...
└── index.ts          # Exports

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Settings</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Account Settings</DialogTitle>
      <DialogDescription>
        Update your account preferences here.
      </DialogDescription>
    </DialogHeader>
    {/* Form content */}
  </DialogContent>
</Dialog>

import { ModeToggle } from '@kit/ui/mode-toggle';
function Header() {
  return (
    <header className="flex justify-between items-center p-4">
      <Logo />
      <ModeToggle />
    </header>
  );
}

// Good: Semantic button for actions
<Button onClick={handleSubmit}>Save Changes</Button>
// Avoid: Div with click handler
<div onClick={handleSubmit}>Save Changes</div>

<Button disabled={isSubmitting}>
  {isSubmitting ? (
    <>
      <Spinner className="mr-2 h-4 w-4" />
      Saving...
    </>
  ) : (
    'Save Changes'
  )}
</Button>

{projects.length > 0 ? (
  <ProjectList projects={projects} />
) : (
  <EmptyState
    title="No projects"
    description="Create your first project to get started."
  />
)}

<Button data-test="submit-form">Submit</Button>
<Input data-test="email-input" />