# Footer component 01

> Simple three-section footer with logo and brand name, centered navigation links, social media icons, separator line, and copyright text with heart emoji

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/footer-component-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/footer-component-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/footer-component-01-light-e35cff39f0ec4864.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/footer-component-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/footer-component-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `separator`, `utils`

## Files

### `src/registry/new-york/blocks/marketing-ui/footer-component/footer-component-01/page.tsx`

```tsx
import Footer from '@/registry/new-york/components/blocks/footer-component-01/footer-component-01'

const FooterPage = () => {
  return <Footer />
}

export default FooterPage
```

### `src/assets/svg/facebook-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const FacebookIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'></path>
    </svg>
  )
}

export default FacebookIcon
```

### `src/assets/svg/instagram-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const InstagramIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <rect width='20' height='20' x='2' y='2' rx='5' ry='5'></rect>
      <path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'></path>
      <line x1='17.5' x2='17.51' y1='6.5' y2='6.5'></line>
    </svg>
  )
}

export default InstagramIcon
```

### `src/assets/svg/logo.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const Logo = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg width='1em' height='1em' viewBox='0 0 328 329' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
      <rect y='0.5' width='328' height='328' rx='164' fill='black' className='dark:fill-white' />
      <path
        d='M165.018 72.3008V132.771C165.018 152.653 148.9 168.771 129.018 168.771H70.2288'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <path
        d='M166.627 265.241L166.627 204.771C166.627 184.889 182.744 168.771 202.627 168.771L261.416 168.771'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='238.136'
        y1='98.8184'
        x2='196.76'
        y2='139.707'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='135.688'
        y1='200.957'
        x2='94.3128'
        y2='241.845'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='133.689'
        y1='137.524'
        x2='92.5566'
        y2='96.3914'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
      <line
        x1='237.679'
        y1='241.803'
        x2='196.547'
        y2='200.671'
        stroke='white'
        strokeWidth='20'
        className='dark:stroke-black'
      />
    </svg>
  )
}

export default Logo
```

### `src/assets/svg/twitter-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const TwitterIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='24'
      height='24'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z'></path>
    </svg>
  )
}

export default TwitterIcon
```

### `src/assets/svg/youtube-icon.tsx`

```tsx
// React Imports
import type { SVGAttributes } from 'react'

const YoutubeIcon = (props: SVGAttributes<SVGElement>) => {
  return (
    <svg
      xmlns='http://www.w3.org/2000/svg'
      width='1em'
      height='1em'
      viewBox='0 0 24 24'
      fill='none'
      stroke='currentColor'
      strokeWidth='2'
      strokeLinecap='round'
      strokeLinejoin='round'
      aria-hidden='true'
      {...props}
    >
      <path d='M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17'></path>
      <path d='m10 15 5-3-5-3z'></path>
    </svg>
  )
}

export default YoutubeIcon
```

### `src/registry/new-york/components/blocks/footer-component-01/footer-component-01.tsx`

```tsx
import { Separator } from '@/registry/new-york/ui/separator'

import Logo from '@/components/layout/logo'

import FacebookIcon from '@/assets/svg/facebook-icon'
import InstagramIcon from '@/assets/svg/instagram-icon'
import TwitterIcon from '@/assets/svg/twitter-icon'
import YoutubeIcon from '@/assets/svg/youtube-icon'

const Footer = () => {
  return (
    <footer>
      <div className='mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-4 max-md:flex-col sm:px-6 sm:py-6 md:gap-6 md:py-8'>
        <a href='#'>
          <div className='flex items-center gap-3'>
            <Logo className='gap-3' />
          </div>
        </a>

        <div className='flex items-center gap-5 whitespace-nowrap'>
          <a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
            About
          </a>
          <a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
            Features
          </a>
          <a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
            Works
          </a>
          <a href='#' className='opacity-80 transition-opacity duration-300 hover:opacity-100'>
            Career
          </a>
        </div>

        <div className='flex items-center gap-4'>
          <a href='#'>
            <FacebookIcon className='size-5' />
          </a>
          <a href='#'>
            <InstagramIcon className='size-5' />
          </a>
          <a href='#'>
            <TwitterIcon className='size-5' />
          </a>
          <a href='#'>
            <YoutubeIcon className='size-5' />
          </a>
        </div>
      </div>

      <Separator />

      <div className='mx-auto flex max-w-7xl justify-center px-4 py-8 sm:px-6'>
        <p className='text-center font-medium text-balance'>
          {`©${new Date().getFullYear()}`}{' '}
          <a href='#' className='hover:underline'>
            shadcn/studio
          </a>
          , Made with ❤️ for better web.
        </p>
      </div>
    </footer>
  )
}

export default Footer
```

### `src/components/layout/logo.tsx`

```tsx
// SVG Imports
import LogoSvg from '@/assets/svg/logo'

// Util Imports
import { cn } from '@/registry/new-york/lib/utils'

const Logo = ({ className }: { className?: string }) => {
  return (
    <div className={cn('flex items-center gap-2.5', className)}>
      <LogoSvg className='size-8.5' />
      <span className='text-xl font-bold'>shadcn/studio</span>
    </div>
  )
}

export default Logo
```