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.
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:
<a
href={siteConfig.links.twitter}
target=“_blank”
rel=“noreferrer”
className=“font-medium underline underline-offset-4”
>
shadcn
</a>
Your footer would load this as
But what you want is
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.
About me:
Website: https://ramunarasinga.com/
Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/
Github: https://github.com/Ramu-Narasinga
Email: ramu.narasinga@gmail.com
References:
https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx
https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx#L3
