Shadcn-ui codebase analysis: site-footer.tsx explained.

#javascript #opensource #nextjs #shadcnui

I wanted to find out how the below shown footer component is developed on ui.shadcn.com, so I looked at its source code. Because shadcn-ui is built using app router, the files I was interested in were layout.tsx and footer.tsx

site-footer is a small component with code related to footer as shown above.

site-footer code snippet

 import { siteConfig } from "@/config/site"

export function SiteFooter() {
  return (
    <footer className="py-6 md:px-8 md:py-0">
      <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
        <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
          Built by{" "}
          <a
            href={siteConfig.links.twitter}
            target="\_blank"
            rel="noreferrer"
            className="font-medium underline underline-offset-4"
          >
            shadcn
          </a>
          . The source code is available on{" "}
          <a
            href={siteConfig.links.github}
            target="\_blank"
            rel="noreferrer"
            className="font-medium underline underline-offset-4"
          >
            GitHub
          </a>
          .
        </p>
      </div>
    </footer>
  )
}

Have you noticed the Built by{“ “}? I did not know this, I had struggled with providing a space while keeping words equally spaced when there is an anchor tag. The problem is words can be spaced equally until there is anchor tag.

For example, if you had written your footer like below:

Built by
<a
  href={siteConfig.links.twitter}
  target="\_blank"
  rel="noreferrer"
  className="font-medium underline underline-offset-4"
>
  shadcn
</a>