Introduction

The footer UX4G specifies for government sites: a brand block with a tagline and social links, up to four columns of links, a departmental attribution, and a primary strip along the bottom for the copyright and policy links.

Measured from the kit: the body is 312px tall at 1440px wide, the bottom strip is 52px, and each social button is a 28px circle with a neutral-200 border.

Installation

npx shadcn@latest add https://indiacn.in/r/footer.json

import {
Footer,
FooterAttribution,
FooterBody,
FooterBottom,
FooterBottomLink,
FooterBrand,
FooterColumn,
FooterColumns,
FooterLink,
FooterSocial,
FooterSocialLink,
} from '@/components/ui/footer';

Usage

<Footer>
<FooterBody>
  <FooterBrand tagline='A citizen services platform.'>
    <Title2 className='text-primary'>Sewa Setu</Title2>
  </FooterBrand>
  <FooterColumns>
    <FooterColumn title='Services'>
      <FooterLink href='/ration-card'>Ration card</FooterLink>
    </FooterColumn>
  </FooterColumns>
</FooterBody>
<FooterBottom>© 2026 Sewa Setu. All rights reserved.</FooterBottom>
</Footer>

Examples

Default

FooterDefault

import { Facebook, Instagram, Linkedin, Twitter, Youtube } from 'lucide-react';

import {
  Footer,
  FooterAttribution,
  FooterBody,
  FooterBottom,
  FooterBottomLink,
  FooterBrand,
  FooterColumn,
  FooterColumns,
  FooterLink,
  FooterSocial,
  FooterSocialLink,
} from '@/components/ui/footer';
import { Body2, Label2, Title2 } from '@/components/ui/typography';

const COLUMNS = [
  { title: 'Services', items: ['Ration card', 'Scholarships', 'Pension', 'Certificates'] },
  { title: 'Citizen corner', items: ['Track application', 'Grievance', 'Downloads', 'Fees'] },
  { title: 'About', items: ['Department', 'Right to Information', 'Tenders', 'Careers'] },
  { title: 'Help', items: ['Contact us', 'Seva Kendras', 'Accessibility', 'Sitemap'] },
];

const SOCIALS = [
  { label: 'Twitter', Icon: Twitter },
  { label: 'Facebook', Icon: Facebook },
  { label: 'Instagram', Icon: Instagram },
  { label: 'LinkedIn', Icon: Linkedin },
  { label: 'YouTube', Icon: Youtube },
];

export function FooterDefault() {
  return (
    <Footer>
      <FooterBody>
        <FooterBrand tagline='A comprehensive citizen services platform for the state.'>
          <Title2 className='text-primary font-semibold'>Sewa Setu</Title2>
          <FooterSocial>
            {SOCIALS.map(({ label, Icon }) => (
              <FooterSocialLink key={label} href='#social' label={label}>
                <Icon aria-hidden />
              </FooterSocialLink>
            ))}
          </FooterSocial>
        </FooterBrand>

        <FooterColumns>
          {COLUMNS.map(column => (
            <FooterColumn key={column.title} title={column.title}>
              {column.items.map(item => (
                <FooterLink key={item} href='#link'>
                  {item}
                </FooterLink>
              ))}
            </FooterColumn>
          ))}
        </FooterColumns>

        <FooterAttribution>
          <Label2 className='text-neutral font-semibold'>National e-Governance Division</Label2>
          <Body2 className='text-neutral-600'>
            Ministry of Electronics &amp; IT, Government of India
          </Body2>
          <Body2 className='text-neutral-500'>Powered by Digital India</Body2>
        </FooterAttribution>
      </FooterBody>

      <FooterBottom
        actions={
          <>
            <FooterBottomLink href='#terms'>Terms &amp; Conditions</FooterBottomLink>
            <FooterBottomLink href='#privacy'>Privacy Policy</FooterBottomLink>
          </>
        }
      >
        © 2026 Sewa Setu. All rights reserved.
      </FooterBottom>
    </Footer>
  );
}

Accessibility

Footer renders a <footer> landmark, so it is reachable from a screen reader's landmark list.
Each FooterColumn is a <nav> labelled by its own title — without the label, five navigation landmarks in one footer are indistinguishable.
FooterSocialLink requires a label. The icon is decorative, so the label is the only accessible name the link has.
The bottom strip is primary-foreground on primary, which the contrast check holds at 4.5:1 or better in both themes.

API Reference

FooterBrand

Prop	Type	Default	Description
`tagline`	`ReactNode`	—	One line under the brand, capped at 280px

FooterSocialLink

Prop	Type	Default	Description
`label`	`string`	—	Required accessible name, e.g. `"Twitter"`

FooterColumn

Prop	Type	Default	Description
`title`	`string`	—	Column heading, also the `<nav>`'s `aria-label`

FooterBottom

Prop	Type	Default	Description
`actions`	`ReactNode`	—	Links pushed to the far end of the strip

Footer, FooterBody, FooterSocial, FooterColumns, FooterAttribution, FooterLink and FooterBottomLink accept the props of the element they render.

Footer

On this page