Customize The Templates

Our templates are flexible and ready for many use cases, but your project is unique!
You can tweak the layout, colors, and components to make it truly yours.
Follow this guide to give your site a personal touch.

1. Getting Started

Once you’ve installed your template, take a quick look at the folder structure:

app/           # Pages & routes
components/    # Reusable UI components
data/          # All the static data (Menu, pricing, testimonials etc)
public/        # Static assets (images)
content/       # Docs Markdown content

2. Update the Styles

We use Tailwind CSS v4 for styling.

• To change colors, typography, or radius, open the globals.css inside app/ directory.

Inside the globals.css file you can update the variables in :root to change the styles.

:root {
  ...
 
  --primary: oklch(0.6299 0.1983 263.7542);
  --primary-foreground: oklch(1 0 0);
 
  --font-sans: Roboto, sans-serif;
 
  --radius: 0.6rem;
  --shadow: 0px 4px 80px 0px hsla(0, 0.00%, 81.60%, 0.18),
    0px 1px 2px -1px hsl(0 0% 0% / 0.18);
  ...
}

As you can see above, you can update the primary and primary-foreground colors and it’ll update these colors everywhere. Just like that you can update border-radius and define different types of shadows too.

3. Customize Layout & Components

Every template comes with a ready-to-use layout that includes a header, footer, and navigation.

• Header & Footer: Found in components/layout/. Add your logo, links, or CTAs here.
• Navigation Menu: The menuData lives in the /data/index.ts file. Update it to match your site’s pages.
• UI Components: Buttons, cards, and sections can be restyled or extended as you like.

We’ve used Shadcn/UI to build the components, which makes customization super flexible. You can easily adjust or extend any component to fit your needs.

4. Replace Demo Content

All demo text and images are placeholders. Swap them out with your own:

• Text lives inside page files in app/ (e.g., app/page.tsx).
• Images live in public/. Replace them with your own while keeping the same file name, or update the <Image /> paths.
• Static data like testimonials, pricing card, and features data are in /data folder.
• Icons come from Lucide  or Phosphor —feel free to swap them.

5. Add New Pages

Need an “About” or “Contact” page? Easy:

1. Create a new folder inside app/ (e.g., app/about/page.tsx).
2. Add your page content using React components.
3. Update your navigation to include the new route.

Boom! New page live.

6. Have Fun 🎉

Don’t be afraid to experiment, the templates are here to give you a strong starting point, not limit your creativity. Make it yours!