SingleColumnLayout

Overview

The SingleColumnLayout component provides a clean, responsive single-column layout with a header, constrained content area, and footer. It's designed to be highly configurable with support for multiple theme variants, animations, and extensive customization options. This component is perfect for building simple, focused web pages and applications.

Preview

Preview

Logo

HomeFeaturesPricingContact

Single Column Layout Demo

A clean, responsive layout perfect for marketing pages, documentation sites, and applications that need a simple yet powerful layout solution.

1

Responsive Design

Optimized for all screen sizes with mobile-first approach

2

Multiple Variants

Choose from 8 different theme variants to match your brand

3

Smooth Animations

Beautiful entrance animations for enhanced user experience

© 2025 My Application. All rights reserved.

Code

import React from 'react';
import { SingleColumnLayout } from './components/single-column-layout';
import { Card } from './components/card';

function App() {
    const handleNavClick = (href: string, label: string) => {
        console.log(`Navigating to ${label}: ${href}`);
    };

    const handleSignIn = () => {
        console.log("Sign in clicked");
    };

    const handleSignUp = () => {
        console.log("Sign up clicked");
    };

    const mainContent = (
        <div className="space-y-8">
            <div className="text-center py-8">
                <h1 className="text-4xl font-bold mb-4">Single Column Layout Demo</h1>
                <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
                    A clean, responsive layout perfect for marketing pages, documentation sites,
                    and applications that need a simple yet powerful layout solution.
                </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
                <Card className="p-6 text-center hover:shadow-lg transition-shadow duration-300">
                    <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                        <span className="text-blue-600 text-xl font-bold">1</span>
                    </div>
                    <h3 className="font-semibold text-lg mb-2">Responsive Design</h3>
                    <p className="text-sm text-muted-foreground">
                        Optimized for all screen sizes with mobile-first approach
                    </p>
                </Card>

                <Card className="p-6 text-center hover:shadow-lg transition-shadow duration-300">
                    <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                        <span className="text-green-600 text-xl font-bold">2</span>
                    </div>
                    <h3 className="font-semibold text-lg mb-2">Multiple Variants</h3>
                    <p className="text-sm text-muted-foreground">
                        Choose from 8 different theme variants to match your brand
                    </p>
                </Card>

                <Card className="p-6 text-center hover:shadow-lg transition-shadow duration-300">
                    <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                        <span className="text-purple-600 text-xl font-bold">3</span>
                    </div>
                    <h3 className="font-semibold text-lg mb-2">Smooth Animations</h3>
                    <p className="text-sm text-muted-foreground">
                        Beautiful entrance animations for enhanced user experience
                    </p>
                </Card>
            </div>
        </div>
    );

    return (
        <SingleColumnLayout
            variant="default"
            animation="fade"
            stickyHeader={true}
            stickyFooter={false}
            onNavLinkClick={handleNavClick}
            onSignInClick={handleSignIn}
            onSignUpClick={handleSignUp}
            children={mainContent}
            activeNavLink="#"
        />
    );
}

export default App;

Installation

CLI

ignix add component single-column-layout

Usage

Basic Example

import { SingleColumnLayout } from './components/single-column-layout';

function App() {
  const handleNavLinkClick = (href: string, label: string) => {
    console.log(`Navigating to ${label}: ${href}`);
  };

  const handleSignIn = () => {
    console.log("Sign in clicked");
  };

  const handleSignUp = () => {
    console.log("Sign up clicked");
  };

  return (
    <SingleColumnLayout
      variant="default"
      stickyHeader={true}
      animation="fade"
      onNavLinkClick={handleNavLinkClick}
      onSignInClick={handleSignIn}
      onSignUpClick={handleSignUp}
    >
      <div className="text-center py-20">
        <h1 className="text-4xl font-bold mb-4">Welcome to Our Platform</h1>
        <p className="text-lg text-muted-foreground">
          A clean, modern layout for your application
        </p>
      </div>
    </SingleColumnLayout>
  );
}

With Custom Navigation

function CustomNavigationExample() {
  const customNavLinks = [
    { label: "Home", href: "/" },
    { label: "Features", href: "/features" },
    { label: "Pricing", href: "/pricing" },
    { label: "About", href: "/about" },
    { label: "Contact", href: "/contact" },
  ];

  const handleNavLinkClick = (href: string, label: string) => {
    console.log(`Navigating to ${label}: ${href}`);
  };

  return (
    <SingleColumnLayout
      variant="modern"
      navLinks={customNavLinks}
      activeNavLink="/features"
      showAuthControls={true}
      stickyHeader={true}
      onNavLinkClick={handleNavLinkClick}
    >
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold mb-6">Features</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="p-6 border rounded-lg shadow-sm">
            <h3 className="text-xl font-semibold mb-2">Feature 1</h3>
            <p className="text-gray-600">Description of feature 1</p>
          </div>
          <div className="p-6 border rounded-lg shadow-sm">
            <h3 className="text-xl font-semibold mb-2">Feature 2</h3>
            <p className="text-gray-600">Description of feature 2</p>
          </div>
        </div>
      </div>
    </SingleColumnLayout>
  );
}

Advanced Customization

function AdvancedExample() {
  // Custom Logo Component
  const CustomLogo = (
    <div className="flex items-center space-x-3">
      <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
        <span className="text-white font-bold">C</span>
      </div>
      <span className="font-bold text-xl">CustomBrand</span>
    </div>
  );

  // Custom Footer Content
  const customFooterContent = (
    <div className="flex flex-col md:flex-row justify-between items-center w-full py-6">
      <div className="text-sm text-gray-400 mb-4 md:mb-0">
        © 2025 My Application. All rights reserved.
      </div>
      <div className="flex space-x-4">
        <a href="#" className="text-sm text-gray-400 hover:text-white">Privacy Policy</a>
        <a href="#" className="text-sm text-gray-400 hover:text-white">Terms of Service</a>
        <a href="#" className="text-sm text-gray-400 hover:text-white">Contact</a>
      </div>
    </div>
  );

  // Custom Auth Components
  const customAuthComponents = {
    signIn: (
      <button className="px-4 py-2 text-sm text-blue-600 hover:text-blue-800">
        Log In
      </button>
    ),
    signUp: (
      <button className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">
        Sign Up Free
      </button>
    ),
  };

  // Content Wrapper
  const contentWrapper = (children: React.ReactNode) => (
    <div className="relative">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-gray-50/50" />
      <div className="relative z-10">{children}</div>
    </div>
  );

  return (
    <SingleColumnLayout
      variant="modern"
      logo={CustomLogo}
      navLinks={[
        { label: "Home", href: "#" },
        { label: "Products", href: "#" },
        { label: "Solutions", href: "#" },
      ]}
      authComponents={customAuthComponents}
      footerContent={customFooterContent}
      contentWrapper={contentWrapper}
      className={{
        root: "bg-gradient-to-br from-gray-50 to-white",
        header: "shadow-sm",
        footer: "bg-gray-900 text-white",
      }}
    >
      <div className="text-center py-20">
        <h1 className="text-5xl font-bold mb-6">Advanced Customization</h1>
        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
          This example shows custom logo, navigation, auth components, footer, and content wrapper.
        </p>
      </div>
    </SingleColumnLayout>
  );
}

Props

Prop	Type	Default	Description
header	React.ReactNode	undefined	Custom header content (overrides default)
footer	React.ReactNode	undefined	Custom footer content (overrides default)
children	React.ReactNode	required	Main content area
variant	"default" | "light" | "dark" | "glass" | "gradient" | "transparent" | "solid" | "modern"	"default"	Visual theme variant
stickyHeader	boolean	true	Makes header sticky to top
stickyFooter	boolean	false	Makes footer sticky to bottom
animation	"none" | "fade" | "slide" | "scale"	"none"	Content entrance animation
contentPadding	string	"px-4 sm:px-6 lg:px-8 py-8"	Padding for main content area
maxWidth	string	"max-w-[1200px]"	Maximum width of content area
headerHeight	number	64	Header height in pixels
footerHeight	number	64	Footer height in pixels
zIndex	object	{ header: 100, footer: 50, mobileMenu: 95 }	Z-index values for layers
logo	React.ReactNode	undefined	Custom logo component
navLinks	NavLink[]	Default links	Navigation links array (NavLink: { label: string; href: string; icon?: React.ReactNode })
showAuthControls	boolean	true	Show sign in/sign up buttons
authComponents	AuthComponents	undefined	Custom auth components ({ signIn?: React.ReactNode, signUp?: React.ReactNode })
activeNavLink	string	undefined	Currently active navigation link
footerContent	React.ReactNode	undefined	Custom footer content
showFooter	boolean	true	Show footer
className	`ClassNameConfig	string`	undefined
renderHeader	(props: HeaderRenderProps) => React.ReactNode	undefined	Custom header render function
renderFooter	(props: FooterRenderProps) => React.ReactNode	undefined	Custom footer render function
contentWrapper	(children: React.ReactNode) => React.ReactNode	undefined	Function to wrap main content
onNavLinkClick	(href: string, label: string) => void	undefined	Callback when navigation link is clicked
onSignInClick	() => void	undefined	Callback when sign in button is clicked
onSignUpClick	() => void	undefined	Callback when sign up button is clicked