Auxo Components 🚀

Auxo Components is a premium, high-performance React component library designed specifically for modern digital agencies. Built with TypeScript, Tailwind CSS, and tsup, it provides a "Plug-and-Play" experience for creating branded, responsive, and high-conversion websites.

📦 1. Installation

First, install the package via npm:

npm install auxo-components

Required Peer Dependencies

The library uses Tailwind CSS for styling and Lucide for icons. Ensure your project has these installed:

npm install tailwind-merge clsx lucide-react

🛠 2. Essential Configuration

Because this library uses Tailwind CSS, your project's Tailwind compiler needs to "see" the classes inside the library.

Update your tailwind.config.js (or .ts):

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}", // Your project files
    "./node_modules/auxo-components/dist/**/*.{js,mjs}", // 👈 ADD THIS LINE
  ],
  theme: {
    extend: {
      colors: {
        // We recommend adding the Auxo brand colors to your config
        auxoNavy: "#0E1936",
        auxoYellow: "#FDC71C",
      },
    },
  },
  plugins: [],
};

🏗 3. Implementation Guide

The library is designed around a Layout-First architecture. By using the Layout component, you ensure that your Header and Footer are consistent across all pages and that your content remains within the professional 1200px content track.

Full Page Demonstration

Create a high-end landing page in minutes by assembling the components:

import { Layout, Hero, FlipCarousel } from "auxo-components";

export default function App() {
  // 1. Configure your Header
  const headerData = {
    logo: <img src="/logo.svg" className="h-8" />,
    links: [
      { label: "Home", href: "/" },
      {
        label: "Services",
        children: [
          { label: "Design", href: "/design" },
          { label: "Development", href: "/dev" },
        ],
      },
    ],
    ctaText: "Start a Project",
    onCtaClick: () => console.log("Contact form triggered"),
  };

  // 2. Configure your Footer
  const footerData = {
    logo: (
      <span className="font-bold uppercase tracking-widest text-2xl">Auxo</span>
    ),
    description: "Premium digital solutions for global brands.",
    columns: [
      {
        title: "Contact",
        links: [{ label: "Email Us", href: "mailto:[email protected]" }],
      },
    ],
  };

  return (
    <Layout headerProps={headerData} footerProps={footerData}>
      {/* Hero Section */}
      <Hero
        title="We Build The Future"
        subtitle="Custom software and design solutions for world-class agencies."
        backgroundImage="/hero-office.jpg"
        ctaText="See Our Work"
        nextSectionId="services-section"
      />

      {/* Flip Card Carousel */}
      <div id="services-section">
        <FlipCarousel
          title="Expertise"
          visibleItems={3}
          items={[
            {
              id: 1,
              title: "UI/UX",
              description: "Modern interfaces",
              image: "/ui.jpg",
            },
            {
              id: 2,
              title: "Dev",
              description: "Scalable code",
              image: "/code.jpg",
            },
            {
              id: 3,
              title: "SEO",
              description: "Organic growth",
              image: "/seo.jpg",
            },
          ]}
        />
      </div>
    </Layout>
  );
}

🎨 4. How to Customize & Override Styles

One of the core features of this library is Style Merging. We use tailwind-merge, which allows you to pass your own Tailwind classes into components to override the defaults without CSS conflicts.

Overriding Defaults

Every component accepts a className prop. If you want to change the background of the Hero or the color of a button, simply pass the new Tailwind class:

// Example: Overriding the default Navy background to a custom Red
<Hero
  title="Custom Hero"
  className="bg-red-600" // This will override the default #0E1936
  backgroundImage="/img.jpg"
/>

Nested Customization

Many components provide specific props for internal containers:

• innerClassName: Customizes the 1200px container inside the Header.
• containerClassName: Customizes the padding or width of the Layout track.

📱 5. Responsive Design Behavior

All components are built with a Mobile-First philosophy:

• Header: Automatically collapses into a Solid Navy Drawer with a custom animated Burger menu on mobile devices (breakpoint: lg).
• Hero: Text is centered on mobile and snaps to left-aligned on desktop to match the logo.
• FlipCarousel: Automatically shifts to a Single Card View on mobile. Navigation arrows are standardized to ensure they never overlap content on small screens.
• Layout: Automatically applies overflow-x-hidden to prevent "horizontal jitter" on mobile devices.

🧩 6. Component Reference

Layout

The shell of your application.

• Sticky Header: Included.
• Push-to-Bottom Footer: Included (Footer will never float in the middle of a short page).
• Mobile Guard: Prevents horizontal scrolling.

FlipCarousel

• 3D Logic: Zero-config 3D CSS transforms.
• visibleItems: Pass 1, 2, or 3 to control the desktop layout. It will always default to 1 on mobile for the best UX.

Hero

• Smart Sizing: Calculates 100vh minus the header height to perfectly fill the viewport.
• Smooth Scroll: The nextSectionId prop enables an animated bounce arrow that glides to the next part of your page.

🤝 Contributing

For issues, feature requests, or brand-specific customizations, please open an issue on the GitHub repository.

📄 License

This project is licensed under the MIT License. Created by Auxo Digital.