> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipfastai.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Customize the Shipfastai frontend and branding
> Tailor the Next.js frontend to match your brand — update colors, fonts, logo, and page layouts using Tailwind CSS and shadcn/ui.
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`**
```typescript src/app/layout.tsx theme={null}
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:
```typescript src/components/shared/logo.tsx theme={null}
import Image from 'next/image';
export function Logo() {
return ;
}
```
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:
```css src/app/globals.css theme={null}
@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 ``.
## shadcn/ui components
Shipfastai uses shadcn/ui with the `new-york` style and `neutral` base color, configured in `components.json` at the project root:
```json components.json theme={null}
{
"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:
```bash theme={null}
npx shadcn@latest add
```
For example, to add the `dialog` component:
```bash theme={null}
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:
```typescript src/app/(marketing)/page.tsx theme={null}
export default function HomePage() {
return (
<>
{/* Hero — edit headline and description here */}
Your new headline
goes here
{/* Features grid */}
{/* Add or remove entries */}
);
}
```
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)/`:
```bash theme={null}
# Creates the route /about
touch src/app/(marketing)/about/page.tsx
```
```typescript src/app/(marketing)/about/page.tsx theme={null}
export default function AboutPage() {
return (
About us
Your content here.
);
}
```
To add a new authenticated app page, create the file inside `src/app/(dashboard)/`:
```bash theme={null}
# 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 `` 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:
```bash theme={null}
npm install next-themes
```
```typescript src/app/providers.tsx theme={null}
'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 (
{children}
);
}
```
Then add a toggle button anywhere in your UI using the `useTheme` hook:
```typescript src/components/shared/theme-toggle.tsx theme={null}
'use client';
import { useTheme } from 'next-themes';
import { Button } from '@/components/ui/button';
export function ThemeToggle() {
const { theme, setTheme } = useTheme();
return (
);
}
```