Logo Component

The Logo component is a reusable component that provides a consistent way for users to return to the homepage from various parts of the application. It typically consists of an image or text representing the application's logo, which is wrapped with a link to the root URL.

You can find the Logo component in src/components/Logo.tsx.

Usage

To use the Logo component, simply import it into the desired file and render it within your TSX:

import Logo from "@/components/Logo";
 
export default function Header() {
  return (
    <header>
      <Logo />
      {/* Other header content */}
    </header>
  );
}

Customization

To customize the Logo component, you can:

Uncomment the Image component and provide the correct path to your logo image file.
Adjust the styling of the logo content by modifying the CSS classes applied to the div and p elements.
Update the application name in the config.ts file to display your desired name.

src/config.ts

const config = {
  // ...
  app: {
    name: "BuilderKit",
    description: "NextJS SaaS AI Boilerplate",
    url: "https://base.builderkit.ai",
  },
  // ...
};

By using the Logo component throughout your application, you provide a consistent and easily recognizable way for users to navigate back to the homepage.

Shadcn Modal