Skip to main content
Most changes happen in /config.ts and /app/globals.css. Keep these files open.

​
Brand Identity

1

Configure Your Brand

Open /config.ts:
/config.ts
const domain = "yourapp.com";
const appName = "YourApp";
const creatorName = "Your Name";

export const config = {
  name: appName,
  description: "Your one-line pitch",
  siteUrl: `https://${domain}`,
  // ... more settings
}
Every setting has inline comments. Read through and update.
Changes apply instantly. Save and refresh.
2

Add Your Logo

Replace /public/logo.svg with your logo.Requirements:
  • Format: SVG (recommended) or PNG
  • Height: 40-50px
  • Keep filename as logo.svg or update imports
SVG scales perfectly. PNG can look blurry on retina displays.
3

Set Your Colors

Two options:

​
Option 1: Use a Pre-made Theme

  1. Browse themes at tweakcn.com or 21st.dev/community/themes
  2. Copy the theme code
  3. Open /app/globals.css
  4. Replace between comment blocks:
app/globals.css
/* ===== THEME START ===== */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* ... paste theme here ... */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... paste dark mode ... */
}
/* ===== THEME END ===== */
Preview colors at oklch.com first.

​
Option 2: Custom Colors

Edit variables in /app/globals.css:
app/globals.css
:root {
  --primary: oklch(0.6 0.2 250);    /* Your brand color */
  --secondary: oklch(0.7 0.1 200);
  /* Adjust others */
}
4

Change Fonts

​
Google Fonts (Default)

Open /app/layout.tsx:
app/layout.tsx
import { Inter } from 'next/font/google'

// Change 'Inter' to your font
const font = Inter({ 
  subsets: ['latin'],
  variable: '--font-sans',
})
Popular choices:
  • Inter - Clean, modern (default)
  • Poppins - Friendly, rounded
  • Roboto - Professional
  • Montserrat - Bold
Browse: fonts.google.com

​
Custom Fonts

  1. Add font files to /public/fonts/
  2. Define in /app/globals.css:
app/globals.css
@font-face {
  font-family: 'YourFont';
  src: url('/fonts/your-font.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@theme inline {
  --font-yourfont: 'YourFont', sans-serif;
}
5

Update Favicons

Replace in /public/favicon/:
  • favicon.ico - Browser tab
  • favicon-96x96.png - Standard icon
  • apple-touch-icon.png - iOS home screen
Quick way: Use realfavicongenerator.net
  1. Upload your logo
  2. Download the package
  3. Replace files in /public/favicon/
Done ✅
6

Social Share Image

use ogimage.clickWhen people share your site, this image appears on Twitter/Facebook.Replace /public/og.jpg (1200x630px).
Include your logo, tagline, and clean background. Keep text large.

​
Dark Mode

Dark mode is built in:
  • Follows system preference
  • Toggle in footer
  • Colors defined in /app/globals.css under .dark
Test both modes: Click the theme toggle and check everything.

​
Custom Component Styles

Components inherit from globals.css. Customize individually if needed. Example - Custom button:
components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        outline: "border border-input bg-background hover:bg-accent",
        gradient: "bg-gradient-to-r from-blue-500 to-purple-600 text-white",
      },
    },
  }
)
Use it: 
<Button variant="gradient">Click Me</Button>

​
Testing Checklist

  • Logo displays correctly
  • Colors match your brand
  • Text readable in light mode
  • Text readable in dark mode
  • Fonts load properly
  • Favicon shows in browser tab
  • Test on mobile (responsive viewer)