Extras

Templates

Themes

ShipFast uses DaisyUI for it’s themes.

To edit the theme in ShipFast you have have to first add the theme in the tailwind.config.js file:

tailwind.config.js

1daisyui: {
2  themes: ["light", "dark", "halloween"],
3},

And to then use theme you have to edit the colors section of the config.ts file:

config.ts

1colors: {
2    theme: "halloween",
3    main: themes["halloween"]["primary"],
4  },

To override the colors used in the theme edit the theme in the tailwind.config.js file like this:

tailwind.config.js

1daisyui: {
2  themes: [
3    "light",
4    "dark",
5    {
6      "halloween": {
7        primary: "#ffbe1a",
8        "base-100": "#212121",
9        "base-200": "#0f0f0f",
10        "text-base-content": "#cfcfcf",
11        "bg-hover": "4a4949"
12      }
13    }
14  ],
15},

Fonts

ShipFast by default uses Google Fonts which is free.

ShipFast website and documentation uses Bricolage_Grotesque for the font.

You can use the same font or use another by editing the /app/layout.tsx file:

/app/layout.tsx

1import { Bricolage_Grotesque } from "next/font/google";
2
3const font = Bricolage_Grotesque({ subsets: ["latin"] });

Logo & Social Images

  • Add your own logo in the /app folder and name it icon.png.
  • Not using .png extension? Update components that use icon.png like the Header component.

  • Create your site favicon with this free Favicon Generator. Download the zip file and put this 2 files in the /app folder:
    • apple-touch-icon.png (rename it apple-icon.png)
    • favicon.ico
  • Create a 200x50 logo with your name like the one below. Name it logoAndName.png and add it to the /public folder. Next-Auth will automatically add it to your login pages.
  • ShipFast Logo

    /libs/next-auth.ts

    1theme: {
    2  brandColor: config.colors.main,
    3  logo: `https://${config.domainName}/logoAndName.png`,
    4},
  • Create two 1200x660 images for social media sharing. Name the first opengraph-image.png and the second twitter-image.png and add them to the /app folder.

NextJS will automatically reference them in the <head /> of your HTML page. Read more about metadata file convention.

Useful Resources

LogoFast | Make Beautiful Logos Fast and Free

LogoFast is a free AI logo maker. Create a beautiful logo in seconds. No design skills needed.

DataFast | Grow your startup with data, not guesses

DataFast is the analytics tool for entrepreneurs. From first click to customer, it helps you understand where the money is and how to increase your revenue without bombarding you with data.

DataFast | Grow your startup with data, not guesses

unDraw - Open source illustrations for any idea

The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free.

Hero Patterns | Free repeatable SVG background patterns for your web projects

Zondicons

Heroicons

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

Heroicons

Lucide

Beautiful & consistent icon toolkit made by the community.

Lucide

Doodle icons | Figma

Beautiful hand-drawn icons Hand-drawn icons using an icon grid400+ icons with 15 categoriesFree for personal & commercial useNo attribution requiredIcons available in PNG, SVG & figma format Download all the icons here

Figma

Haikei

A web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more! Our generators let you discover, customize, randomize, and export generative SVG design assets ready to use with your favorite design tools.

Snippets

A collection of animation snippets made with TailwindCSS

Overflow Design | 4550+ Notion-style Illustrations, Icons and Wallpapers

Over 1350 free and premium Notion-style Illustrations, 3300+ Notion Icons and Notion Wallpapers.

Overflow Design

Niche Tools

A place to find web tools that make $$

Niche Tools

Screen Studio — Professional screen recorder for macOS

Screen recorder for macOS. Create engaging product demos, courses, tutorial and social media videos. Add automatic zoom on mouse actions, smooth mouse movement, and other powerful effects and animations. Designed for macOS.

Screen Studio

ShipFast

Learn how to ship startups in weeks, not months

ShipFast

Just Ship It | Newsletter for Solopreneurs

How to find startup ideas, launch fast, and get profitable. Join 29,000+ Solopreneurs

Just Ship It

Bill's Newsletter

Bill's Newsletter