Components

---

🎨 All React Components Are Built with TailwindCSS

---

🌗 Themes

By default, light and dark themes are enabled. The system will automatically switch based on user preferences.

To change or add themes:

1️⃣ Add or remove themes in the tailwind.config.js file under daisyui.themes 📌 (Make sure to keep at least one theme)

2️⃣ Add the theme name in the config.js file under both theme and main:

• Path: config.js

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

🗂️ Here’s a list of over 20 available themes

---

🧩 Custom Components

All custom components are located inside the /components folder in your SaaSFast project. Each component is fully documented in the code and this guide.

📸 Example: Here's the Hero component

---

🧱 daisyUI Components

SaaSFast uses daisyUI as its UI kit, which includes simple components like buttons, inputs, tabs, and more. 🔗 Explore all daisyUI components

Example:

Demo

To render this button, use:

className: "btn btn-primary"

---

🎞️ Animations

You can explore some built-in animations in the config.tailwind.css file:

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

---

🔤 Custom Fonts

1️⃣ Go to the Layout.js file in the /components folder

2️⃣ Import your preferred font from next/font/google:

import { Bricolage_Grotesque } from "next/font/google";

3️⃣ Replace the current font with your custom one:

const font = Bricolage_Grotesque({ subsets: ["latin"] });

---