We are launching v2: only $99 during beta phase.

DirectoryStack Logo Light Mode

You are currently viewing the v2 documentation.
You can view the v1 documentation here.

Content

Create and update images & icons as described. Beware that Next.js in local development will not directly exchange images when you have changed them. You might need to restart your development server to see the new images - sometimes even deleting the .next folder and re-running npm run dev.

  • Dark Mode Logo: public/assets/logos/logo_for_dark.png
  • Light Mode Logo: public/assets/logos/logo_for_light.png
  • 512x512 Icon: public/assets/icons/icon-512.png
  • 128x128 Icon: public/assets/icons/icon-128.png
  • Apple Icon (190x190): app/apple-icon.png
  • Favicon (48x48): public/favicon.ico and app/icon.ico

Recommendation:
Use tools like SvgToPng to convert SVGs to PNGs and Favicon.io to generate other icon sizes. Keep the provided naming conventions.

  • 1080x1080: public/assets/img/og_1080x1080.png
  • 1200x630: public/assets/img/og_1200x630.png
  • 1600x900: public/assets/img/og_1600x900.png
  • Placeholder: public/assets/img/placeholder.jpg
    (This image is used as a fallback when no other image is provided.)

To update the primary color (default is red):

  1. Visit ui.shadcn.com and select a new color.
  2. Copy the generated code.
  3. Replace the corresponding keys in app/globals.css within the @layer base {} block.
  4. Note: Only replace the keys provided by shadcn; the default configuration may include additional colors.

Interested in kickstarting your directory business?

Get the latest news, guides and changelog updates straight to your inbox.

By signing up, you agree to our Privacy Policy