Customization

Setup

1. Logo
   • Create a logo (PNG, ~50×50px recommended)
   • Save to:

     public/images/logo.png
     

   • Update your config:
     shared/config.ts

     brandingImages: {
       logo: '/images/logo.png',
       openGraphImage: '/images/open-graph.png',
     },
     

2. Open Graph Image (Social Preview)
   • Create an OG image using Canva or OG Image Generator.
   • Recommended size: 1200×630px
   • Save to:

     public/images/open-graph.png
     

3. Favicon
   • Generate favicon assets using Favicon.io.
   • Place them in public/images/:
     • android-chrome-512x512.png → pwa-icon-48x48.png
     • android-chrome-192x192.png → pwa-icon-192x192.png
     • android-chrome-512x512.png → pwa-icon-512x512.png
     • apple-touch-icon.png
     • favicon.ico
4. Font Family
   • Choose a font and apply it globally:
     app/assets/styles/main.css

     @theme {
         --font-sans: 'Inter', sans-serif;
     }
     

5. Theme (Radius & Colors)
   • Radius:
     app/assets/styles/main.css

     :root {
         --ui-radius: 0.5rem;
     }
     

   • Colors:
     app/app.config.ts

     ui: {
       colors: {
         primary: 'blue',
         neutral: 'neutral',
       },
     },
     

6. Icons (Icones.js)
   • Browse icons at icones.js.org and use the icon name in your components:

     <UIcon name="lucide:heart" />
     

Usage

• Run npm run dev to preview changes
• Verify logo, favicon, fonts, and theme in the browser
• Use a social preview checker to confirm the OG image
• UI Components: For customizing UI elements (buttons, cards, modals, etc.), refer to the NuxtUI