Shadcn-ui codebase analysis: site-footer.tsx explained.
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-06-07 21:25:31

I wanted to find out how the below shown footer component is developed on [ui.shadcn.com](http://ui.shadcn.com), so I looked at its [source code](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx). Because shadcn-ui is built using app router, the files I was interested in were [layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx) and [footer.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx#L3)

![](https://media.licdn.com/dms/image/D5612AQESVV5FG635hw/article-inline_image-shrink_1500_2232/0/1717794184374?e=1723075200&v=beta&t=YtipwjWTIX33TYD7vePeIzFEnWKbGeJUWseDbQ2foPY)

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

[site-footer code snippet](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx#L3)

```javascript
 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:

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

Your footer would load this as

```
Built byshadcn
```

But what you want is

```
Built by shadcn
```

Hence the reason why you have {" "}

> _Want to learn how to build shadcn-ui/ui from scratch? Check out_ [_build-from-scratch_](https://github.com/Ramu-Narasinga/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_](https://tthroo.com/build-from-scratch)_._

About me:
---------

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

References:
-----------

1.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx](https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx)
2.  [https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx#L3](https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx#L3)