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