Customize the Shipfastai frontend and branding

Shipfastai’s frontend is a Next.js 14 App Router application built with Tailwind CSS and shadcn/ui. Every visual aspect — the color palette, typography, logo, and page layouts — is designed to be overridden without touching the core business logic. The steps below walk you through the most common customizations, from swapping your brand name to adding entirely new pages.

Updating branding

The app name appears in browser tabs, Open Graph tags, and the default metadata defined in src/app/layout.tsx. Update it in two places: 1. Metadata in layout.tsx

src/app/layout.tsx

export const metadata: Metadata = {
  title: {
    default: 'Your App Name - AI SaaS',
    template: '%s | Your App Name',
  },
  description: 'Your app description here.',
};

2. Logo and favicon Place your logo files inside the public/ directory at the project root. Reference them in your header component using Next.js’s Image component:

src/components/shared/logo.tsx

import Image from 'next/image';

export function Logo() {
  return <Image src="/logo.png" alt="Your App Name" width={120} height={32} />;
}

Replace public/favicon.ico with your own favicon. For broader browser and PWA support, also add public/apple-touch-icon.png (180×180 px) and public/icon-192.png.

Colors and theme

Shipfastai uses CSS custom properties to define its color system, which Tailwind maps through tailwind.config.ts. You change the entire color palette by editing the variable values in src/app/globals.css — you never need to modify tailwind.config.ts itself. The light and dark theme values are defined under :root and .dark respectively:

src/app/globals.css

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --accent: 210 40% 96.1%;
    --radius: 0.5rem;
    /* ... other tokens */
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    /* ... other tokens */
  }
}

All values use the HSL space format (H S% L%) without the hsl() wrapper, which lets Tailwind compose opacity variants automatically. To change your primary brand color, update --primary (and --primary-foreground for text on primary backgrounds) in both :root and .dark.

Use Tailwind’s dark: prefix in your components to apply dark-mode-specific utility classes without needing additional CSS. For example, className="text-gray-900 dark:text-gray-100" automatically responds to the active theme class on <html>.

shadcn/ui components

Shipfastai uses shadcn/ui with the new-york style and neutral base color, configured in components.json at the project root:

components.json

{
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

To add a new shadcn/ui component, run the CLI from your frontend directory:

npx shadcn@latest add <component>

For example, to add the dialog component:

npx shadcn@latest add dialog

This writes the component source to src/components/ui/dialog.tsx, which you can then import and customize freely. Because the components are copied into your repository, you own the code and can modify them without overriding a package.

Modifying pages

The frontend follows the Next.js App Router convention. All user-facing routes live under src/app/, grouped into three route groups:

Route group	Path	Purpose
`(marketing)`	`/`, `/pricing`	Public landing pages
`(dashboard)`	`/dashboard`, `/billing`, `/settings`	Authenticated app pages
`(auth)`	`/login`, `/register`	Authentication flows

To edit the landing page, open src/app/(marketing)/page.tsx. The hero section, features grid, and CTA section are each a self-contained JSX block you can rearrange or replace:

src/app/(marketing)/page.tsx

export default function HomePage() {
  return (
    <>
      {/* Hero — edit headline and description here */}
      <section className="py-20 sm:py-32">
        <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">
          Your new headline
          <span className="block text-primary">goes here</span>
        </h1>
      </section>

      {/* Features grid */}
      <section id="features" className="border-t border-border py-20">
        {/* Add or remove <FeatureCard> entries */}
      </section>
    </>
  );
}

To edit the dashboard, open src/app/(dashboard)/dashboard/page.tsx. The stat cards, recent activity feed, and quick-action buttons are all rendered inline and easy to replace with your own data.

Adding new pages

To add a new public page, create a page.tsx file inside src/app/(marketing)/:

# Creates the route /about
touch src/app/(marketing)/about/page.tsx

src/app/(marketing)/about/page.tsx

export default function AboutPage() {
  return (
    <section className="py-20">
      <h1 className="text-4xl font-bold">About us</h1>
      <p className="mt-4 text-muted-foreground">Your content here.</p>
    </section>
  );
}

To add a new authenticated app page, create the file inside src/app/(dashboard)/:

# Creates the route /analytics
touch src/app/(dashboard)/analytics/page.tsx

The (dashboard) layout in src/app/(dashboard)/layout.tsx automatically wraps the page with the sidebar and authentication guard, so you do not need to add those yourself.

Dark mode

Dark mode is pre-configured using the class strategy in tailwind.config.ts. When the dark class is present on the <html> element, Tailwind applies your .dark CSS variables and any dark: utility overrides in your components. Shipfastai’s providers.tsx wraps the app in a QueryClientProvider, and you can add next-themes to manage theme toggling:

npm install next-themes

src/app/providers.tsx

'use client';

import { ThemeProvider } from 'next-themes';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </ThemeProvider>
  );
}

Then add a toggle button anywhere in your UI using the useTheme hook:

src/components/shared/theme-toggle.tsx

'use client';

import { useTheme } from 'next-themes';
import { Button } from '@/components/ui/button';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
    >
      {theme === 'dark' ? 'Light mode' : 'Dark mode'}
    </Button>
  );
}

Get Started

Core Features

Configuration

Deployment

Guides

Customize the Shipfastai frontend and branding

Updating branding

Colors and theme

shadcn/ui components

Modifying pages

Adding new pages

Dark mode

​Updating branding

​Colors and theme

​shadcn/ui components

​Modifying pages

​Adding new pages

​Dark mode

Updating branding

Colors and theme

shadcn/ui components

Modifying pages

Adding new pages

Dark mode