Customization

Configuration Overview

The configuration of the template is broken into three areas:

1. Server Configuration: Handles sensitive environment variables, and no changes are usually needed here.
2. Client Configuration: Offers several options for customizing the app's behavior, features, and appearance.
3. Tailwind Configuration: Handles styling and theming.

Server Configuration

The Server Configuration is crucial for managing sensitive environment variables, ensuring they remain strictly on the server-side. This includes API keys, secrets, and other confidential data. While most users won’t need to modify this configuration, it's essential for controlling the core behavior of your application.

Managed 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)
• Stripe Secret Keys: Controls payment processing and webhook validation:
  • Stripe Secret Key (STRIPE_SECRET_KEY)
  • Stripe Webhook Secret (STRIPE_WEBHOOK_SECRET)

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.

Stripe Payment Configuration:

Control your Stripe payment setup with flexible options:

• Trial Period: You can set the trial period duration for your products. By default, a 7-day trial is active.
• Product ID Filtering: Only the specified product IDs will be added to the database for payments.

Storage Configuration:

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

Client Configuration

The Client Configuration section is where most customizations for the application take place. This includes adjusting the app’s identity, features, authentication, and user experience.

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 SaaS 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.

Environment Variables

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

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.

Stripe Payment Plans

Update features and recommendations for different Stripe payment plans under the stripePayment section. This configuration offers flexible customization options to tailor the application to your specific needs, from appearance and language to authentication and payments.

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.