Customization

NestSaaS is designed to be highly customizable, allowing you to adapt the platform to your specific needs. This section covers the various ways you can customize your NestSaaS installation.

Overview

You can customize NestSaaS at several levels:

Themes - Visual appearance and branding
Layouts - Page structure and components
Components - UI elements and functionality
Spaces - Content types and metadata
Functionality - Adding new features and capabilities

Theme Customization

NestSaaS uses Tailwind CSS for styling, making it easy to customize the visual appearance of your site.

Tailwind Configuration

Modify the tailwind.config.js file to customize colors, typography, spacing, and more:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // Add your custom colors here
      },
      // Customize other theme aspects
    },
  },
  plugins: [require("tailwindcss-animate")],
}

CSS Variables

Update CSS variables in app/globals.css to change the color scheme:

:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* Add your custom variables here */
}
 
.dark {
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  /* Add your dark mode variables here */
}

Learn more about theme customization

Layout Customization

Customize the layout of your pages by modifying or creating layout components.

Default Layout

The default layout is defined in app/layout.tsx:

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="min-h-screen bg-background font-sans antialiased">
        <Header />
        <main className="container mx-auto py-6">{children}</main>
        <Footer />
      </body>
    </html>
  )
}

Custom Layouts

Create custom layouts for specific sections of your site:

// app/blog/layout.tsx
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="container mx-auto py-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2">{children}</div>
        <aside className="md:col-span-1">
          <BlogSidebar />
        </aside>
      </div>
    </div>
  )
}

Learn more about layout customization

Component Customization

NestSaaS uses Shadcn UI components, which can be easily customized.

Customizing Existing Components

Modify components in the components/ui directory:

// components/ui/button.tsx
export const Button = React.forwardRef<
  HTMLButtonElement,
  ButtonProps
>(({ className, variant, size, ...props }, ref) => {
  // Customize the button component
  return (
    <button
      className={cn(buttonVariants({ variant, size, className }))}
      ref={ref}
      {...props}
    />
  )
})

Creating New Components

Create new components to extend functionality:

// components/feature-card.tsx
export function FeatureCard({
  title,
  description,
  icon,
}: {
  title: string
  description: string
  icon: React.ReactNode
}) {
  return (
    <div className="rounded-lg border p-6 shadow-sm">
      <div className="mb-4 text-primary">{icon}</div>
      <h3 className="text-xl font-bold mb-2">{title}</h3>
      <p className="text-muted-foreground">{description}</p>
    </div>
  )
}

Learn more about component customization

Space Customization

Spaces are highly customizable, allowing you to define different content types with specific metadata structures.

Defining Custom Spaces

Modify the config/spaces.ts file to define custom spaces:

// config/spaces.ts
export const spaces = [
  {
    id: "blog",
    name: "Blog",
    slug: "blog",
    type: "blog",
    description: "Our blog posts",
    metadata: {
      // Define metadata structure for blog posts
      fields: [
        {
          name: "featured",
          type: "boolean",
          label: "Featured Post",
          default: false,
        },
        {
          name: "readingTime",
          type: "number",
          label: "Reading Time (minutes)",
        },
      ],
    },
  },
  // Add more custom spaces
]

Custom Space Templates

Create custom templates for different space types:

// app/[spaceSlug]/page.tsx
export default async function SpacePage({
  params,
}: {
  params: { spaceSlug: string }
}) {
  const space = await getSpaceBySlug(params.spaceSlug)
  
  // Render different templates based on space type
  switch (space.type) {
    case "blog":
      return <BlogTemplate space={space} />
    case "directory":
      return <DirectoryTemplate space={space} />
    default:
      return <DefaultTemplate space={space} />
  }
}

Learn more about space customization

Advanced Customization

API Extensions

Extend the API functionality by creating custom API routes:

// app/api/custom/route.ts
import { NextResponse } from "next/server"
 
export async function GET() {
  // Custom API logic
  return NextResponse.json({ message: "Custom API endpoint" })
}

Server Actions

Create custom server actions for specific functionality:

// app/actions.ts
"use server"
 
import { revalidatePath } from "next/cache"
import { prisma } from "@/lib/prisma"
 
export async function createCustomContent(formData: FormData) {
  // Process form data and create content
  const result = await prisma.article.create({
    data: {
      // ...
    },
  })
  
  revalidatePath("/custom")
  return { success: true, data: result }
}

Plugin System

NestSaaS includes a plugin system for extending functionality:

// plugins/my-plugin/index.ts
import type { NestSaaSPlugin } from "@/types"
 
export const myPlugin: NestSaaSPlugin = {
  name: "my-plugin",
  version: "1.0.0",
  setup: (app) => {
    // Plugin initialization
    app.registerHook("beforeArticleCreate", async (data) => {
      // Modify data before article creation
      return data
    })
  },
}

Next Steps

Theme Customization - Detailed theming guide
Component Development - Creating custom components
Space Configuration - Advanced space customization
Plugin Development - Creating plugins for NestSaaS

Customization

On this page