Extras
Table of Contents:
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.
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 iticon.png
. - 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 itapple-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. - Create two 1200x660 images for social media sharing. Name the first
opengraph-image.png
and the secondtwitter-image.png
and add them to the/app
folder.
Not using .png extension? Update components that use icon.png like the Header
component.
/libs/next-auth.ts
1theme: {
2 brandColor: config.colors.main,
3 logo: `https://${config.domainName}/logoAndName.png`,
4},
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.
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 | 4550+ Notion-style Illustrations, Icons and Wallpapers
Over 1350 free and premium Notion-style Illustrations, 3300+ Notion Icons and Notion Wallpapers.
Niche Tools
A place to find web tools that make $$
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.
ShipFast
Learn how to ship startups in weeks, not months
Just Ship It | Newsletter for Solopreneurs
How to find startup ideas, launch fast, and get profitable. Join 29,000+ Solopreneurs
Bill's Newsletter