Welcome to my Next.js starter!

This starter serves as a minimal template for me to kick off my Next.js projects. It is powered by Next.js, Tailwind CSS, and shadcn/ui.

While largely unopinionated, there are a few things I've included/changed which you may want to opt out of.

Base Styles

This is using Tailwind's "Neutral" color palette which you can change in the global.css file. However, be sure to update components.json with whichever Base Color you prefer. Learn more about shadcn/ui's Base colors.

I tried to keep all the base styles inside globals.css which you can see below.

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground leading-relaxed text-pretty antialiased;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply leading-none font-bold tracking-tight text-balance;
  }

  main a {
    @apply text-blue-500;
  }

  .inline-code {
    @apply bg-muted p-1 font-mono text-sm;
  }
}

I encourage you to delete the .inline-code class as it's only being used for this homepage.

If you are unsure of what these classes do, be sure to look them up on Tailwind's docs.

Components

Again, largely unopinionated, there are a few things I've included/changed which you may want to change based on your preferences.

Navbar

A basic navbar designed to have a logo on the left and links on the right. It also includes the mode-toggle for changing themes.

Don't want it?

Delete the navbar.tsx component inside app > components > navbar.tsx. Also be sure to remove it from layout.tsx.

Footer

Likewise, the footer is a basic one with copyright text on the left and social links on the right. Change this up however you see fit. I've chosen to make the footer stick to the bottom of the page as this is the most common behavior I've seen in my years on the web.

Don't want it?

Delete the footer.tsx component inside app > components > footer.tsx. Also be sure to remove it from layout.tsx.

Link

I've included a custom Link component that extends Next's so you can use the attribute externalLink and it will use a regular anchor tag rather than Next's Linktag. It also adds rel="noopener noreferrer" as it is an external link.

Don't want this? Just delete the link.tsx in app > components > ui > link.tsx

shadcn/ui

I have included minimal components from shadcn/ui with this, however, you can just install whatever you want. What I have included are the button, dropdown-menu, mode-toggle, and theme-provider. These were the minimum components needed to make the mode toggle function.

If you're unsure how these work, I encourage to read shadcn/ui's docs on Dark mode.