ShipFastCheap Docs

All the React components are made with TailwindCSS.

Themes

By default, 5 themes are enabled: shipfast, light, dark, cupcake and retro. It will automatically switch based on the user's preferences.

To change or add themes:

1. Add/remove themes in tailwind.config.js > daisyui.themes (keep at least one)

2. Add the theme name to the layout.tsx root files.

daisyui: {
                    themes: [
                      {
                        shipfast: {
                          "primary": "#FFBE1A",
                          "neutral": "#3d4451",
                          "base-100": "#212121",
                          "base-200": "#2F1A04",
                          "error": '#f87171',
                        },
                      },
                      "dark",
                      "cupcake",
                      "retro", 
                    ],

Here is a list of the 20+ available themes

Custom components

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

Example: This is a Hero component.

daisyUI components

ShipFastCheap 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:

Demo

Custom font

1. Head over the the layout.js file in /app

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

Components