Extras

Templates

Tailwind CSS Templates - Tailwind UI

Beautiful UI components and templates by the creators of Tailwind CSS.

Official daisyUI Store — Tailwind CSS Components ( version 4 update is here )

daisyUI Store - Professional templates made by daisyUI

Themes

ShipFast uses DaisyUI for it’s themes.

daisyUI themes — Tailwind CSS Components ( version 4 update is here )

How to use daisyUI 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.

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

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"] });

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.

/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.

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.

Lucide

Beautiful & consistent icon toolkit made by the community.

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

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 | 3100+ Notion-style Illustrations, Icons and Wallpapers

Over 600 free and premium Notion-style Illustrations, 2200+ Notion Icons and Notion Wallpapers.

Niche Tools

A place to find web tools to build

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.

Extras

Table of Contents:

Templates

Themes

Fonts

Logo & Social Images

Useful Resources