React Customizable Footer with Tailwind CSS

A highly customizable and responsive React footer component built with Tailwind CSS that can be easily integrated into any React application.

Features

• 🎨 Tailwind CSS Powered: Full Tailwind CSS integration for easy customization
• 📱 Responsive Design: Works perfectly on all screen sizes
• 🔗 Social Links: Built-in support for social media links
• 📧 Contact Information: Display email, phone, and address
• 🏢 Company Branding: Logo, company name, and tagline support
• 📑 Link Sections: Organize links into categorized sections
• 🎯 Event Callbacks: Handle link clicks and social media interactions
• 💅 Multiple Layouts: Grid, horizontal, and vertical layouts
• 🌙 Theme Support: Easy to integrate with dark/light themes
• ♿ Accessible: Built with accessibility best practices

Installation

```bash npm install react-customizable-footer ```

Note: This component requires Tailwind CSS to be installed and configured in your project.

Tailwind CSS Setup

Make sure you have Tailwind CSS installed in your project:

```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ```

Basic Usage

```tsx import React from 'react'; import Footer from 'react-customizable-footer';

const App = () => { return ( {/* Your app content */} ); }; ```

Advanced Usage with Custom Tailwind Classes

```tsx import React from 'react'; import Footer from 'react-customizable-footer';

const App = () => { const footerSections = [ { title: 'Products', links: [ { label: 'Web Development', url: '/web-dev' }, { label: 'Mobile Apps', url: '/mobile' }, { label: 'API Services', url: '/api' }, ], }, { title: 'Company', links: [ { label: 'About Us', url: '/about' }, { label: 'Careers', url: '/careers' }, { label: 'Blog', url: '/blog' }, ], }, ];

const socialLinks = [ { name: 'Facebook', url: 'https://facebook.com/yourcompany' }, { name: 'Twitter', url: 'https://twitter.com/yourcompany' }, { name: 'LinkedIn', url: 'https://linkedin.com/company/yourcompany' }, ];

return ( {/* Your app content */} <Footer companyName="TechCorp" tagline="Building the future, one line of code at a time" logo={} email="[email protected]" phone="+1 (555) 123-4567" address="123 Tech Street, Silicon Valley, CA 94000" sections={footerSections} socialLinks={socialLinks}

    // Tailwind CSS classes for styling
    bgColor="bg-slate-900"
    textColor="text-slate-100"
    linkColor="text-blue-400"
    linkHoverColor="hover:text-blue-300"
    borderColor="border-slate-700"
    
    // Custom classes for specific sections
    brandClassName="lg:col-span-2"
    sectionClassName="space-y-4"
    linkClassName="font-medium"
    
    layout="grid"
    onLinkClick={(url, label) => {
      console.log(\`Clicked: \${label} -> \${url}\`);
    }}
    onSocialClick={(platform, url) => {
      console.log(\`Social: \${platform} -> \${url}\`);
    }}
    customContent={
      <div className="bg-slate-800 p-6 rounded-lg text-center">
        <p className="text-lg font-semibold mb-4">Subscribe to our newsletter!</p>
        <button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
          Subscribe
        </button>
      </div>
    }
  />
</div>

); }; ```

Theme Examples

Dark Theme

```tsx

Light Theme

```tsx

Colorful Theme

```tsx

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | `companyName` | `string` | `'Your Company'` | Company or brand name | | `logo` | `React.ReactNode` | `undefined` | Logo component or image | | `tagline` | `string` | `undefined` | Company tagline or description | | `sections` | `FooterSection[]` | `[]` | Array of link sections | | `socialLinks` | `SocialLink[]` | `[]` | Array of social media links | | `email` | `string` | `undefined` | Contact email address | | `phone` | `string` | `undefined` | Contact phone number | | `address` | `string` | `undefined` | Physical address | | `copyrightText` | `string` | Auto-generated | Custom copyright text | | `showCopyright` | `boolean` | `true` | Show/hide copyright section | | `layout` | `'horizontal' \| 'vertical' \| 'grid'` | `'grid'` | Footer layout | | `showDivider` | `boolean` | `true` | Show/hide top border | | `customContent` | `React.ReactNode` | `undefined` | Custom content area |

Styling Props (Tailwind Classes)

| Prop | Type | Default | Description | |------|------|---------|-------------| | `bgColor` | `string` | `'bg-gray-800'` | Background color class | | `textColor` | `string` | `'text-gray-100'` | Text color class | | `linkColor` | `string` | `'text-blue-400'` | Link color class | | `linkHoverColor` | `string` | `'hover:text-blue-300'` | Link hover color class | | `borderColor` | `string` | `'border-gray-700'` | Border color class |

Custom Class Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | `className` | `string` | `''` | Additional classes for footer | | `containerClassName` | `string` | `''` | Container classes | | `contentClassName` | `string` | `''` | Content area classes | | `brandClassName` | `string` | `''` | Brand section classes | | `sectionClassName` | `string` | `''` | Link section classes | | `linkClassName` | `string` | `''` | Individual link classes | | `socialClassName` | `string` | `''` | Social links section classes | | `copyrightClassName` | `string` | `''` | Copyright section classes |

Event Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | `onLinkClick` | `(url: string, label: string) => void` | `undefined` | Link click handler | | `onSocialClick` | `(platform: string, url: string) => void` | `undefined` | Social link click handler |

Framework Compatibility

This package works with:

• ✅ Vite applications
• ✅ Next.js (App Router & Pages Router)
• ✅ Create React App
• ✅ Remix
• ✅ Gatsby
• ✅ Any React-based framework with Tailwind CSS

Requirements

• React 16.8+
• Tailwind CSS 3.0+

License

MIT © [Your Name]