@inmotioncloud/shared-components

Shared React components for InMotion Cloud applications, including Header, Footer, Button, and SocialLinks components with built-in Tailwind CSS styling.

Installation

NPM Package

npm install @inmotioncloud/shared-components

Git Submodule

To add this repository as a git submodule:

git submodule add https://github.com/inmotioncloud/imcloud-shared-components.git src/shared-components

To clone a repository that already has this submodule:

git clone --recurse-submodules <your-repo-url>

Or if you've already cloned the repository:

git submodule init
git submodule update

To update the submodule to the latest version:

git submodule update --remote

Requirements

Peer Dependencies

• react ^19.0.0
• react-dom ^19.0.0
• react-router-dom ^6.0.0 || ^7.0.0

Tailwind CSS

This package uses Tailwind CSS classes. Ensure your project has Tailwind CSS configured with the following CSS variables for theming:

:root {
  --primary: /* your primary color */;
  --primary-foreground: /* your primary foreground color */;
  --background: /* your background color */;
  --ring: /* your focus ring color */;
  /* ... other Tailwind CSS variables */
}

Usage

Header

A responsive header component with navigation, mobile menu support, and customizable sections.

import { Header } from "@inmotioncloud/shared-components";

function App() {
  return (
    <Header
      sections={[
        { id: "features", label: "Features" },
        { id: "pricing", label: "Pricing" },
      ]}
      supportHref="/support"
      blogHref="/blog"
      ctaLabel="Get Started"
      onCtaClick={() => console.log("CTA clicked")}
    />
  );
}

Header Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | sections | HeaderSection[] | Default sections | Navigation sections | | supportHref | string \| null | "/support" | Support link URL | | supportLabel | string | "Support" | Support link text | | blogHref | string \| null | "/blog" | Blog link URL | | blogLabel | string | "Blog" | Blog link text | | ctaLabel | string | "Sign Up For Updates" | CTA button text | | onSectionNavigate | (sectionId: string) => void | - | Custom section navigation handler | | onCtaClick | () => void | - | CTA button click handler | | logoSrc | string \| object | Default logo | Logo image source | | logoAltText | string | "IMHCloud Logo" | Logo alt text | | className | string | - | Additional header classes | | containerClassName | string | - | Container classes | | navLinkClassName | string | - | Navigation link classes |

Footer

A footer component with social links, legal links, and customizable content.

import { Footer } from "@inmotioncloud/shared-components";

function App() {
  return (
    <Footer
      title="My Company"
      tagline="Building the future"
      copyright="Copyright 2025 My Company"
    />
  );
}

Footer Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | ReactNode | "InMotion Cloud" | Footer title | | tagline | ReactNode | "The AI First Managed Cloud Platform" | Footer tagline | | additionalSocialLinks | AdditionalSocialLink[] | - | Additional social links | | copyright | ReactNode | Default copyright | Copyright text | | legalLinks | LegalLink[] | Default legal links | Legal links | | legalNotice | ReactNode | Default notice | Legal notice text | | className | string | - | Additional footer classes | | containerClassName | string | - | Container classes |

Button

A versatile button component with multiple variants and sizes using class-variance-authority.

import { Button } from "@inmotioncloud/shared-components";

function App() {
  return (
    <>
      <Button variant="primary">Primary Button</Button>
      <Button variant="outline" size="lg">Large Outline</Button>
      <Button variant="ghost" asChild>
        <a href="/link">Link Button</a>
      </Button>
    </>
  );
}

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link" \| "hero" \| "primary" \| "cta" \| "nav" | "default" | Button style variant | | size | "default" \| "sm" \| "lg" \| "icon" | "default" | Button size | | asChild | boolean | false | Render as child element |

SocialLinks

A social media links component with built-in icons for common platforms.

import { SocialLinks, defaultSocialLinks } from "@inmotioncloud/shared-components";

function App() {
  return (
    <SocialLinks
      align="center"
      iconSize="w-6 h-6"
      additionalLinks={[
        {
          label: "Discord",
          href: "https://discord.gg/example",
          icon: <MyDiscordIcon />,
        },
      ]}
    />
  );
}

SocialLinks Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | additionalLinks | AdditionalSocialLink[] | - | Additional social links with custom icons | | align | "left" \| "center" \| "right" | "center" | Alignment of social links | | iconSize | string | "w-5 h-5" | Tailwind classes for icon size | | gap | string | "gap-4" | Tailwind classes for spacing | | className | string | - | Additional container classes |

Built-in Platforms

The component includes icons for: YouTube, X (Twitter), LinkedIn, Instagram, Reddit, and Facebook.

Building

npm run build

This compiles TypeScript and copies assets to the dist directory.

Changelog

0.3.0 (2026-02-12)

• Add Chat widget component

0.1.9 (2025-12-10)

• Update package version

0.1.8 (2025-12-10)

• Update npm version
• Add managed-services to header navigation

0.1.7 (2025-12-10)

• Update package version number

0.1.6 (2025-12-10)

• Update build version
• Revert back to React 19 peer dependencies

0.1.5 (2025-12-10)

• Temporarily revert to React 18 for Lovable compatibility

0.1.4 (2025-12-08)

• Add extra legal links to footer (DPA, Accessibility Statement, Legal Inquiries, Do Not Sell My Personal Information, Limit Use of Sensitive Personal Information)
• Update package.json configuration

0.1.3 (2025-11-21)

• Fix ADA compliance changes
• Add cookie settings button to footer
• Fix dependencies

0.1.2 (2025-11-06)

• Change branding from "IMCloud" to "InMotion Cloud"
• Update header with new branding
• Update package version

0.1.1 (2025-11-04)

• Add mobile header with responsive hamburger menu
• Update build process

0.1.0 (2025-10-30)

• Initial release
• Export Header, Footer, and Button components
• Add react-router-dom shim for compatibility
• Add asset copy script for build process
• Fix logo imports
• Update scrollTo methods for smooth navigation
• Rely on button variant for CTA styling

License

Proprietary - InMotion Hosting, Inc.