> ## Documentation Index
> Fetch the complete documentation index at: https://shipfast.so/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuration & Branding

> Customize shipfast.so to match your brand

<Info>
  Most changes happen in `/config.ts` and `/app/globals.css`. Keep these files open.
</Info>

## Brand Identity

<Steps>
  <Step title="Configure Your Brand">
    Open `/config.ts`:

    ```typescript /config.ts theme={null}
    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.

    <Tip>
      Changes apply instantly. Save and refresh.
    </Tip>
  </Step>

  <Step title="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

    <Note>
      SVG scales perfectly. PNG can look blurry on retina displays.
    </Note>
  </Step>

  <Step title="Set Your Colors">
    Two options:

    ### Option 1: Use a Pre-made Theme

    1. Browse themes at [tweakcn.com](https://tweakcn.com) or [21st.dev/community/themes](https://21st.dev/community/themes)
    2. Copy the theme code
    3. Open `/app/globals.css`
    4. Replace between comment blocks:

    ```css app/globals.css theme={null}
    /* ===== 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 ===== */
    ```

    <Tip>
      Preview colors at [oklch.com](https://oklch.com) first.
    </Tip>

    ### Option 2: Custom Colors

    Edit variables in `/app/globals.css`:

    ```css app/globals.css theme={null}
    :root {
      --primary: oklch(0.6 0.2 250);    /* Your brand color */
      --secondary: oklch(0.7 0.1 200);
      /* Adjust others */
    }
    ```
  </Step>

  <Step title="Change Fonts">
    ### Google Fonts (Default)

    Open `/app/layout.tsx`:

    ```typescript app/layout.tsx theme={null}
    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](https://fonts.google.com)

    ### Custom Fonts

    1. Add font files to `/public/fonts/`
    2. Define in `/app/globals.css`:

    ```css app/globals.css theme={null}
    @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;
    }
    ```
  </Step>

  <Step title="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](https://realfavicongenerator.net)

    1. Upload your logo
    2. Download the package
    3. Replace files in `/public/favicon/`

    Done ✅
  </Step>

  <Step title="Social Share Image">
    use [ogimage.click](https://ogimage.click/)

    When people share your site, this image appears on Twitter/Facebook.

    Replace `/public/og.jpg` (1200x630px).

    <Tip>
      Include your logo, tagline, and clean background. Keep text large.
    </Tip>
  </Step>
</Steps>

## 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:**

```tsx components/ui/button.tsx theme={null}
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:

```tsx theme={null}
<Button variant="gradient">Click Me</Button>
```

## Testing Checklist

<Accordion title="Before moving on, check:">
  * 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](https://responsiveviewer.org))
</Accordion>