Components Overview

Fresh

Source: shipfa.st/docs/components

All React components use TailwindCSS and daisyUI.

Themes

Two themes enabled by default: light and dark (auto-switches by user preference).

To change themes:

1. Add/remove in tailwind.config.js > daisyui.themes
2. Update config.js:

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

See all 20+ available themes.

Custom Animations

Class	Effect
animate-opacity	Fade in
animate-wiggle	Wiggle effect
animate-appearFromRight	Slide from right
animate-popup	Pop up

Custom Font

1. Open layout.js in /app
2. Import font: import { Bricolage_Grotesque } from "next/font/google"
3. Use it: const font = Bricolage_Grotesque({ subsets: ["latin"] })

daisyUI Components

For simple UI components (buttons, inputs, tabs), use daisyUI. Example: className="btn btn-primary".