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

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>
 )
}

Enter fullscreen mode
Exit fullscreen mode

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>

Enter fullscreen mode
Exit fullscreen mode

Your footer would load this as

Built byshadcn

Enter fullscreen mode
Exit fullscreen mode

But what you want is

Built by shadcn

Enter fullscreen mode
Exit fullscreen mode

Hence the reason why you have {” “}

Want to learn how to build shadcn-ui/ui from scratch? Check out build-from-scratch and give it a star if you like it. Sovle challenges to build shadcn-ui/ui from scratch. If you are stuck or need help? solution is available.