Customization

Configuration Overview

The configuration of the template is broken into two areas:

1. App Configuration: Handles configuration options for application.
2. Tailwind Configuration: Handles styling and theming.

Environment Configuration

We are using T3 Env for Nextjs to handle environment variables. It is being managed under file at src/env.ts

Environment Variables:

We provide a .env.example file for reference of the required environment variables. It also includes optional environment variables

• Supabase Service Key (SUPABASE_SERVICE_KEY): Provides access to Supabase services.
• JWT Secret Key (JWT_SECRET_KEY): Used for signing and verifying JSON Web Tokens (JWTs).
• Resend API Key and Email Information: Manages transactional email settings, including:
  • Resend API Key (RESEND_API_KEY)
  • From Domain (RESEND_FROM_DOMAIN)
  • Audience IDs (RESEND_AUDIENCE_ID, RESEND_WAITLIST_AUDIENCE_ID)
  • Webhook Secret (RESEND_WEBHOOK_SECRET)
• Billing Environment (BILLING_ENVIRONMENT): Its value is either development or production used to manage product prices for different environment.

These public-facing environment variables are essential for the client-side app:

• Supabase URL: NEXT_PUBLIC_SUPABASE_URL
• Supabase Anon Key: NEXT_PUBLIC_SUPABASE_ANON_KEY
• Site Base URL: NEXT_PUBLIC_SITE_BASE_URL

Important: Server configurations, such as API keys, must never be exposed to the client side for security reasons.

Email Configuration:

The email section allows you to customize email notifications for various system events:

• Onboarding Emails: Sent when new users join, from the support email.
• Subscription Changes: Sent when a subscription is updated, from the billing email.
• Subscription Cancellations: Sent when a user cancels a subscription, from the billing email.
• Organization Deletion: Sent when an organization is deleted, from the support email.

Payment Configuration:

We support Stripe and Lemonsqueezy payment gateway. You can modify the paymentGateway setting for the payment gateway you prefer. You can learn more about it Subscription docs

Storage Configuration:

• Bucket Name: The default storage bucket used for file uploads is set to avatars.

Application Settings

• App Name and Description:
  • name: The name of your application, currently set to "useSAASkit".
  • description: "Start Your Startup with useSAASkit's Next.js Supabase AI Template | Launch 10X Faster." This is the tagline displayed on the site.
  • Template: The template for your page titles, where %s is replaced by the current page title.
• Default Language: The defaultLocal is set to "en", but can be customized to other languages if supported by the DictionariesKeys.
• Default Theme: Choose between light or dark themes with defaultTheme. By default, it is set to "light".
• Email Logo Path: Update the logo used in emails by modifying the emailLogoPath, currently set to "/logo.png".
• Social Media Links: Customize the app’s social media presence by updating URLs in the socialMedia section.

Authentication Settings

Configure various authentication features to enhance security and user management:

• Enable Password Update: Set enablePasswordUpdate to true or false to allow users to update their passwords.
• Enable Multi-Factor Authentication (MFA): Turn on or off MFA by updating enableMFA. By default, it is enabled (true).
• OAuth Providers (Optional): Enable OAuth providers like Google and GitHub in the providers.oAuth array.

Feature Flags

Control various app features by toggling these flags:

• Theme Switcher: Toggle between light and dark modes with enableThemeSwitcher (default: true).
• Language Switcher: Enable or disable language switching with enableLanguageSwitcher (default: true).
• Account and Organization Deletion: Manage whether users can delete their accounts (enableAccountDeletion) or organizations (enableOrganizationDeletion).

Date Formatting

You can customize the date format by updating the format property under the date section. The format follows the Day.js library, and the default format is DD MMM YYYY.

Validations

Configure input validations under the validations section:

• Max Input Character Limit: Set MAX_INPUT_CHARACTER_LIMIT (default is 42).
• Password Length: Define password complexity, minimum and maximum lengths, and requirements for lowercase, uppercase, and numeric characters.

Storage

Configure file storage settings, including the name of the bucket used for uploads:

• Bucket Name: The default bucket for file uploads is set to avatars.

Tailwind Configuration

The Tailwind Configuration allows you to control the CSS and theming of your application. You can customize a variety of design tokens, including colors, border radius, and theming for both light and dark modes.

• Colors: Adjust the primary, secondary, background, and foreground colors across the light and dark themes. For example, the background and foreground colors are set using custom CSS variables like --background and --foreground.
• Border Radius: The border radius for UI elements is defined by the --radius variable (default: 0.4rem).
• Charts: Customize your charts using predefined colors such as --chart-1, --chart-2, etc., for both light and dark modes.
• Global Styles: Apply global background and text colors, as well as component-level styles, by modifying the @layer base, @layer components, and @layer utilities.

The configuration utilizes TailwindCSS and follows the design patterns of shadcn and TailwindCSS. You can further customize these settings by updating the tailwind.css and tailwind.config.ts files.

You can extend or modify the base, components, and utilities layers as needed to adjust the global styles and ensure consistent theming throughout your application.

For more information, visit the TailwindCSS documentation and shadcn UI documentation.