Components

By default, 2 themes are enabled: light & dark. It will automatically switch based on the user's preferences.

To change or add themes:

• Add/remove themes in tailwind.config.js > daisyui.themes (keep at least one)
• Add the theme name to the config.js file in theme & main

  config.js

  1colors: {
  2  theme: "YOUR_THEME",
  3  main: themes[`[data-theme=YOUR_THEME]`]["primary"],
  4}

Here is a list of the 20+ available themes

All custom-made components are inside the /components folder of your ShipFast repo. Each component is documented in details in the code and in this documentation.

Example: This is a Hero component.

ShipFast uses daisyUI as a UI kit for simple components like buttons, inputs, tabs, etc. Here are all the daisyUI components.

Example: Add className: "btn btn-primary" to display this button:

Discover some cool animations in the config.tailwind.css file:

• className: "animate-opacity"
• className: "animate-wiggle"
• className: "animate-appearFromRight"
• className: "animate-popup"

1. Head over the the Layout.js file in /components

2. Import your favorite font from next/font/google import { Bricolage_Grotesque } from "next/font/google";

3. Swap the current font in use const font = Bricolage_Grotesque({ subsets: ["latin"] });