auto-responsive Developer Guide

Welcome to auto-responsive, the ultimate zero-configuration responsive UI library for React.

The Vision

Unlike traditional UI libraries where you must manually specify breakpoints (like md:flex-row, w={['100%', '50%']}), auto-responsive automatically handles all responsive logic. You simply wrap your elements in our high-level semantic components, and they will fluidly adapt from smartwatches to 8K displays without you writing a single media query.

Core Concepts

The "Auto" Prefix

Every component starts with Auto (e.g., <AutoFlex>, <AutoGrid>). This signifies that the component inherently understands its environment. It uses advanced CSS algorithms (Container Queries, Clamp, Subgrid) to calculate exactly how it should display based on available container space.

Zero-Configuration

You do not need to configure breakpoints. The library comes pre-equipped with 16 mathematical target tokens that gracefully cover:

• Micro/Smartwatches
• Foldables (Open/Closed)
• Standard Mobiles
• Tablets & Laptops
• 4K / Ultrawide / TVs

Getting Started

1. Global Setup

To ensure the library's OS-level CSS is applied without crashing Server Components (like Next.js), you must import the core styles once at the very root of your application (e.g., layout.tsx or App.js).

auto-responsive seamlessly adopts your preferred CSS frameworks and methodologies. You can directly apply standard utility or framework style classes straight onto <AutoRoot>, while our engine handles all underlying responsive calculations.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | theme | 'auto' | 'light', 'dark', 'auto' (syncs with system color scheme) | | breakpoints | Default 16 tokens | Custom breakpoint mapping object (e.g., { mobile: '500px', md: '800px' }) | | disableHydrationCheck | false | true (skips client hydration validation warnings in strict SSR modes) |

[!NOTE] Framework Compatibility Note: This guide does not instruct on installing or setting up Tailwind CSS or Bootstrap from scratch. It assumes you already have your preferred styling system configured in your build pipeline. Below are interactive expandable tabs—click on any framework button to view its integration example.

// In your root layout.tsx or App.js
import './tailwind.css'; // Your standard Tailwind setup
import 'auto-responsive/dist/core/styles.css';
import { AutoRoot } from 'auto-responsive';

function App() {
  return (
    // Default: theme="auto" (system sync), disableHydrationCheck=false. You can change theme="dark" explicitly!
    <AutoRoot theme="auto" className="bg-slate-900 text-white min-h-screen font-sans">
      <YourApplication />
    </AutoRoot>
  );
}

// In your root layout.tsx or App.js
import './custom-styles.css'; // Your standard Vanilla CSS setup
import 'auto-responsive/dist/core/styles.css';
import { AutoRoot } from 'auto-responsive';

function App() {
  return (
    // Default theme="auto" overridden to theme="dark" for consistent vanilla styling
    <AutoRoot theme="dark" className="my-app-wrapper">
      <YourApplication />
    </AutoRoot>
  );
}

// In your root layout.tsx or App.js
import 'bootstrap/dist/css/bootstrap.min.css'; // Your standard Bootstrap setup
import 'auto-responsive/dist/core/styles.css';
import { AutoRoot } from 'auto-responsive';

function App() {
  return (
    // AutoRoot injects container variables; default breakpoints are active without manual config
    <AutoRoot className="container-fluid bg-dark text-light p-0">
      <YourApplication />
    </AutoRoot>
  );
}

2. Basic Layout: AutoFlex

Use <AutoFlex> to create dynamic stacks. By default, it acts as a row when space allows, and gracefully wraps and stacks as a column on narrower devices.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | direction | 'row' | 'column', 'row-reverse', 'column-reverse' | | gap | '1rem' | Any CSS string value (e.g., '12px', '2.5rem', '0px') | | justify | 'flex-start' | 'center', 'space-between', 'space-around', 'flex-end' | | align | 'stretch' | 'center', 'flex-start', 'flex-end', 'baseline' | | wrap | 'wrap' | 'nowrap', 'wrap-reverse' | | as | 'div' | Any valid HTML tag (e.g., 'section', 'nav', 'ul', 'header') |

import { AutoFlex } from 'auto-responsive';

function ProfileCard() {
  return (
    // Default direction="row" can be switched to direction="column". Here we customize gap and justify!
    <AutoFlex direction="row" gap="1.5rem" justify="space-between" className="bg-slate-800 p-6 rounded-xl shadow-lg text-white">
      <img src="/avatar.png" alt="User" className="w-16 h-16 rounded-full border-2 border-indigo-500" />
      <div>
        <h2 className="text-xl font-bold">John Doe</h2>
        <p className="text-indigo-300">Software Engineer</p>
      </div>
    </AutoFlex>
  );
}

import { AutoFlex } from 'auto-responsive';
import './profile-card.css';

function ProfileCard() {
  return (
    // Override default as="div" to as="article"; override default wrap="wrap" to wrap="nowrap"
    <AutoFlex as="article" wrap="nowrap" gap="1.5rem" justify="space-between" className="profile-card">
      <img src="/avatar.png" alt="User" className="avatar-img" />
      <div className="user-info">
        <h2>John Doe</h2>
        <p className="subtitle">Software Engineer</p>
      </div>
    </AutoFlex>
  );
}

import { AutoFlex } from 'auto-responsive';

function ProfileCard() {
  return (
    // Default direction="row", default align="stretch" customized to align="center"
    <AutoFlex align="center" gap="1.5rem" justify="space-between" className="card p-4 shadow-sm bg-dark text-light border-0">
      <img src="/avatar.png" alt="User" className="rounded-circle border border-primary" style={{ width: 64, height: 64 }} />
      <div className="card-body p-0">
        <h2 className="card-title h4 mb-1">John Doe</h2>
        <p className="card-text text-secondary">Software Engineer</p>
      </div>
    </AutoFlex>
  );
}

3. Smart Grids: AutoGrid

<AutoGrid> automatically creates as many columns as will fit based on the minWidth. If a screen gets too small, it will morph into a single-column layout automatically.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | minWidth | '250px' | Minimum column width before wrapping (e.g., '300px', '18rem') | | gap | '1rem' | Grid spacing between cells (e.g., '24px', '2rem') | | maxColumns | 'auto-fit' | Fixed max column limit (e.g., 3, 4, or 'auto-fill') | | as | 'div' | Any valid HTML tag (e.g., 'section', 'main', 'ul') |

import { AutoGrid } from 'auto-responsive';

function Dashboard() {
  return (
    // Overriding default minWidth="250px" to minWidth="300px" and default gap="1rem" to gap="2rem"
    <AutoGrid minWidth="300px" gap="2rem" className="p-6 bg-slate-950 min-h-screen">
      <div className="bg-slate-800 p-5 rounded-lg shadow border border-slate-700">Sales: $12,000</div>
      <div className="bg-slate-800 p-5 rounded-lg shadow border border-slate-700">Traffic: 50K</div>
      <div className="bg-slate-800 p-5 rounded-lg shadow border border-slate-700">Signups: 1,200</div>
    </AutoGrid>
  );
}

import { AutoGrid } from 'auto-responsive';
import './dashboard.css';

function Dashboard() {
  return (
    // Using custom maxColumns={3} override along with custom minWidth="300px"
    <AutoGrid maxColumns={3} minWidth="300px" gap="2rem" className="dashboard-grid-container">
      <div className="stat-card">Sales: $12,000</div>
      <div className="stat-card">Traffic: 50K</div>
      <div className="stat-card">Signups: 1,200</div>
    </AutoGrid>
  );
}

import { AutoGrid } from 'auto-responsive';

function Dashboard() {
  return (
    // Override default as="div" to as="section" with default fluid 250px columns overridden to 300px
    <AutoGrid as="section" minWidth="300px" gap="2rem" className="container my-4">
      <div className="card text-bg-primary p-3 shadow-sm">Sales: $12,000</div>
      <div className="card text-bg-success p-3 shadow-sm">Traffic: 50K</div>
      <div className="card text-bg-info p-3 shadow-sm text-white">Signups: 1,200</div>
    </AutoGrid>
  );
}

4. Fluid Typography: AutoText

Stop using fixed font sizes. <AutoText> uses fluid typography algorithms. It will smoothly scale text between a sensible minimum (for mobile) and a maximum (for ultra-wide desktops) based on the screen width.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | scale | 'base' | 'xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl' | | as | 'p' | Any text HTML tag ('h1', 'h2', 'h3', 'h4', 'span', 'label', 'p') | | fluid | true | false (disables responsive dynamic resizing if fixed sizing is needed) | | minSize / maxSize | Auto calculated | Explicit font size clamping overrides (e.g., minSize="14px", maxSize="24px") |

import { AutoText } from 'auto-responsive';

function HeroSection() {
  return (
    <div className="space-y-4 px-6 py-12 text-center bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-2xl">
      {/* Overriding default scale="base" and as="p" to scale="3xl" and as="h1" */}
      <AutoText as="h1" scale="3xl" className="font-black tracking-tight">Welcome to the Future</AutoText>
      {/* Keeping default fluid={true} with scale="base" */}
      <AutoText as="p" scale="base" className="text-indigo-100 font-medium">This text is perfectly readable and fluid on all devices.</AutoText>
    </div>
  );
}

import { AutoText } from 'auto-responsive';
import './hero.css';

function HeroSection() {
  return (
    <div className="hero-banner">
      {/* Default fluid scaling algorithm keeps h1 legible across mobile and desktops */}
      <AutoText as="h1" scale="3xl" className="hero-title">Welcome to the Future</AutoText>
      <AutoText as="p" scale="base" className="hero-subtitle">This text is perfectly readable and fluid on all devices.</AutoText>
    </div>
  );
}

import { AutoText } from 'auto-responsive';

function HeroSection() {
  return (
    <div className="p-5 mb-4 bg-light rounded-3 shadow-sm text-center">
      {/* Using scale="3xl" override with Bootstrap typography styling */}
      <AutoText as="h1" scale="3xl" className="fw-bold text-primary">Welcome to the Future</AutoText>
      <AutoText as="p" scale="base" className="text-muted mb-0">This text is perfectly readable and fluid on all devices.</AutoText>
    </div>
  );
}

Advanced Utilities

5. Visibility: ShowOn & HideOn

Tired of writing display: none and display: block across media queries? Use <ShowOn> and <HideOn> to declaratively control component mounting based on device sizes (using underlying hooks so it fully unmounts from the Virtual DOM).

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | breakpoints | [] (required) | ['mobile', 'tablet'], ['desktop', 'tv'], or specific screen size array | | fallback | null | Any React node to render when breakpoint condition is not met | | mode | 'unmount' | 'css' (keeps component in DOM using CSS visibility instead of unmounting) |

import { ShowOn, HideOn } from 'auto-responsive';

function Navigation() {
  return (
    <header className="bg-slate-900 border-b border-slate-800 p-4 text-white">
      {/* Default mode="unmount", fallback=null. Overriding fallback to show a loading state if needed! */}
      <ShowOn breakpoints={['desktop']} fallback={<span className="text-xs text-slate-500">Loading Desktop View...</span>}>
        <nav className="flex items-center space-x-8 font-semibold">Desktop Navigation Bar</nav>
      </ShowOn>
      {/* Default mode="unmount" unmounts button completely on desktop screens */}
      <HideOn breakpoints={['desktop']}>
        <button className="p-2 rounded-lg bg-indigo-600 text-white font-medium w-full">Open Mobile Menu</button>
      </HideOn>
    </header>
  );
}

import { ShowOn, HideOn } from 'auto-responsive';
import './nav.css';

function Navigation() {
  return (
    <header className="main-header">
      {/* Overriding default mode="unmount" to mode="css" for SEO preservation */}
      <ShowOn breakpoints={['desktop']} mode="css">
        <div className="desktop-links">Desktop Navigation Bar</div>
      </ShowOn>
      <HideOn breakpoints={['desktop']} mode="css">
        <div className="mobile-drawer-trigger">Open Mobile Menu</div>
      </HideOn>
    </header>
  );
}

import { ShowOn, HideOn } from 'auto-responsive';

function Navigation() {
  return (
    <header className="navbar navbar-dark bg-dark px-3 shadow">
      {/* Standard unmount mode keeps React Virtual DOM lean across Bootstrap layouts */}
      <ShowOn breakpoints={['desktop']}>
        <span className="navbar-brand mb-0 h1">Desktop Navigation Bar</span>
      </ShowOn>
      <HideOn breakpoints={['desktop']}>
        <button className="btn btn-outline-light w-100">Open Mobile Menu</button>
      </HideOn>
    </header>
  );
}

6. Media: AutoImage

Prevent Cumulative Layout Shift (CLS) automatically. <AutoImage> enforces aspect ratios before the image even loads, and comes with native lazy loading enabled by default.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | aspectRatio | 'auto' | '16/9', '4/3', '1/1', '21/9', or any custom W/H string | | lazy | true | false (disables loading="lazy" for above-the-fold hero images) | | preventCLS | true | false (turns off automatic aspect-ratio box reservation) | | objectFit | 'cover' | 'contain', 'fill', 'none', 'scale-down' |

import { AutoImage } from 'auto-responsive';

function Gallery() {
  return (
    <div className="p-4 bg-slate-900 rounded-xl shadow-lg">
      {/* Overriding default aspectRatio="auto" to "16/9", keeping default lazy={true} and preventCLS={true} */}
      <AutoImage 
        src="/hero.jpg" 
        aspectRatio="16/9" 
        objectFit="cover"
        alt="Hero Banner" 
        className="rounded-lg shadow hover:opacity-95 transition-opacity"
      />
    </div>
  );
}

import { AutoImage } from 'auto-responsive';
import './gallery.css';

function Gallery() {
  return (
    <div className="image-frame">
      {/* Overriding default lazy={true} to false for urgent hero image loading */}
      <AutoImage 
        src="/hero.jpg" 
        aspectRatio="16/9" 
        lazy={false}
        alt="Hero Banner" 
        className="responsive-hero-img"
      />
    </div>
  );
}

import { AutoImage } from 'auto-responsive';

function Gallery() {
  return (
    <div className="card p-2 shadow-sm border-0">
      {/* Custom objectFit="contain" override to display unclipped product thumbnails */}
      <AutoImage 
        src="/hero.jpg" 
        aspectRatio="16/9" 
        objectFit="contain"
        alt="Hero Banner" 
        className="card-img-top rounded"
      />
    </div>
  );
}

7. Truncation: AutoClamp

Stop writing -webkit-line-clamp manually. <AutoClamp> seamlessly trims text after a specific number of lines and adds an ellipsis.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | lines | 1 | Any integer line limit (e.g., 2, 3, 5, 10) | | as | 'p' | Any text tag ('span', 'div', 'h3', 'blockquote') | | showTooltip | false | true (displays native OS hover title when text is truncated) | | ellipsis | true | false (clips text without trailing dots) |

import { AutoClamp } from 'auto-responsive';

function ArticleCard() {
  return (
    <div className="bg-slate-800 p-6 rounded-xl border border-slate-700">
      {/* Overriding default lines={1} to 3, and setting showTooltip={true} so hovered users read full text */}
      <AutoClamp lines={3} showTooltip={true} as="p" className="text-slate-300 leading-relaxed font-normal">
        This is a very long description that will eventually be truncated after exactly three lines, preventing the layout from breaking even if the user inputs a massive paragraph of text...
      </AutoClamp>
    </div>
  );
}

import { AutoClamp } from 'auto-responsive';
import './article.css';

function ArticleCard() {
  return (
    <div className="article-box">
      {/* Default ellipsis={true} keeps truncation trailing dots clean */}
      <AutoClamp lines={3} as="p" className="clamped-article-text">
        This is a very long description that will eventually be truncated after exactly three lines, preventing the layout from breaking even if the user inputs a massive paragraph of text...
      </AutoClamp>
    </div>
  );
}

import { AutoClamp } from 'auto-responsive';

function ArticleCard() {
  return (
    <div className="card shadow-sm p-4 bg-light border-0">
      {/* Overriding default as="p" to as="div" for rich card layout descriptions */}
      <AutoClamp lines={3} as="div" className="card-text text-secondary mb-0">
        This is a very long description that will eventually be truncated after exactly three lines, preventing the layout from breaking even if the user inputs a massive paragraph of text...
      </AutoClamp>
    </div>
  );
}

Advanced Smart Components

1. Interactive Layouts: AutoModal

Forget managing different modal and bottom sheet libraries. <AutoModal> uses the native HTML5 <dialog> API. On desktop, it is a perfectly centered modal. On mobile, it automatically transforms into a slick Bottom Sheet with safe-area padding for iOS notches.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | isOpen | false | true (controlled dialog visibility state) | | onClose | () => {} | Callback triggered when backdrop overlay or Escape key is pressed | | mobileVariant | 'bottomSheet' | 'fullScreen', 'centered', 'drawer' | | desktopVariant| 'centered' | 'drawer', 'fullScreen' | | closeOnOverlay| true | false (prevents closing dialog when user clicks outside box) |

import { useState } from 'react';
import { AutoModal } from 'auto-responsive';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)} className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-md transition">
        Open Details
      </button>
      {/* Default mobileVariant="bottomSheet" and desktopVariant="centered". You can override closeOnOverlay={false} if needed! */}
      <AutoModal isOpen={isOpen} onClose={() => setIsOpen(false)} className="bg-slate-900 text-white p-6 rounded-2xl shadow-2xl max-w-md w-full border border-slate-800">
        <h2 className="text-xl font-bold mb-2">User Details</h2>
        <p className="text-slate-300">This is a modal on desktop, and an animated bottom sheet on mobile!</p>
      </AutoModal>
    </>
  );
}

import { useState } from 'react';
import { AutoModal } from 'auto-responsive';
import './modal.css';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)} className="custom-open-btn">Open Details</button>
      {/* Overriding default mobileVariant="bottomSheet" to "fullScreen" on compact smartphones */}
      <AutoModal mobileVariant="fullScreen" isOpen={isOpen} onClose={() => setIsOpen(false)} className="custom-dialog-modal">
        <h2>User Details</h2>
        <p>This is a modal on desktop, and an animated bottom sheet on mobile!</p>
      </AutoModal>
    </>
  );
}

import { useState } from 'react';
import { AutoModal } from 'auto-responsive';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)} className="btn btn-primary shadow-sm">Open Details</button>
      {/* Overriding default desktopVariant="centered" to "drawer" for slide-in sidebars */}
      <AutoModal desktopVariant="drawer" isOpen={isOpen} onClose={() => setIsOpen(false)} className="card p-4 border-0 shadow-lg bg-dark text-white">
        <h2 className="h4 card-title">User Details</h2>
        <p className="card-text text-light">This is a modal on desktop, and an animated bottom sheet on mobile!</p>
      </AutoModal>
    </>
  );
}

2. Navigation: AutoNavbar

Building responsive navbars usually takes hours of tweaking breakpoints and toggle states. <AutoNavbar> does it for you. It displays standard links on desktop, and replaces them with a hamburger menu on mobile that opens a full-screen overlay.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | mobileBreakpoints| ['mobile', 'tablet'] | Custom array of device categories where links become a hamburger menu | | sticky | false | true (enables automatic sticky top header pinning on scroll) | | collapseOnSelect | true | false (keeps mobile navigation overlay open after tapping a link) |

import { AutoNavbar } from 'auto-responsive';

function Header() {
  return (
    // Enabling optional sticky={true} override while keeping default mobileBreakpoints=['mobile', 'tablet']
    <AutoNavbar 
      sticky={true}
      className="bg-slate-900 px-6 py-4 border-b border-slate-800 shadow-md text-white"
      logo={<a href="/" className="font-extrabold text-indigo-400 text-lg">MyBrand</a>}
      links={
        <div className="flex space-x-6 font-medium text-slate-300">
          <a href="/home" className="hover:text-white transition">Home</a>
          <a href="/about" className="hover:text-white transition">About</a>
        </div>
      }
      actions={<button className="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm font-semibold">Login</button>}
    />
  );
}

import { AutoNavbar } from 'auto-responsive';
import './navbar.css';

function Header() {
  return (
    // Overriding mobileBreakpoints to only trigger hamburger menu on strictly small mobiles
    <AutoNavbar 
      mobileBreakpoints={['mobile']}
      className="main-navigation-bar"
      logo={<a href="/" className="brand-logo">MyBrand</a>}
      links={
        <div className="nav-links-container">
          <a href="/home">Home</a>
          <a href="/about">About</a>
        </div>
      }
      actions={<button className="login-button-custom">Login</button>}
    />
  );
}

import { AutoNavbar } from 'auto-responsive';

function Header() {
  return (
    // Default collapseOnSelect={true} gracefully closes mobile hamburger menu upon link interaction
    <AutoNavbar 
      collapseOnSelect={true}
      className="navbar navbar-dark bg-dark px-4 shadow"
      logo={<a href="/" className="navbar-brand fw-bold">MyBrand</a>}
      links={
        <div className="navbar-nav flex-row gap-4">
          <a href="/home" className="nav-link active">Home</a>
          <a href="/about" className="nav-link">About</a>
        </div>
      }
      actions={<button className="btn btn-outline-light btn-sm">Login</button>}
    />
  );
}

3. Morphing Structures: AutoCard

Use <AutoCard> to wrap content that needs to sit side-by-side on desktop but stack on mobile. It uses container queries (where supported) to adjust its flow.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | direction | 'horizontal' | Desktop layout alignment ('horizontal', 'vertical') | | mobileDirection | 'vertical' | Mobile compact layout alignment ('vertical', 'horizontal') | | as | 'div' | Custom semantic wrapper HTML tag ('article', 'section', 'li') | | interactive | false | true (adds interactive hover elevations and tap states) |

import { AutoCard } from 'auto-responsive';

function ProductCard() {
  return (
    // Default direction="horizontal" on desktop morphs to default mobileDirection="vertical" on compact phones
    <AutoCard direction="horizontal" interactive={true} className="bg-slate-800 rounded-2xl shadow-xl border border-slate-700 overflow-hidden text-white">
      <img src="/product.jpg" alt="Product" className="w-full sm:w-48 h-48 object-cover" />
      <div className="p-6 flex flex-col justify-center">
        <h3 className="text-xl font-bold mb-2">Amazing Product</h3>
        <p className="text-slate-400 text-sm">Description of the product goes here, arranged side-by-side on desktop and stacked on mobile.</p>
      </div>
    </AutoCard>
  );
}

import { AutoCard } from 'auto-responsive';
import './card.css';

function ProductCard() {
  return (
    // Overriding default as="div" to as="article" for SEO improvement
    <AutoCard as="article" className="custom-morph-card" style={{ border: '1px solid #ddd', borderRadius: '12px' }}>
      <img src="/product.jpg" alt="Product" style={{ width: 200, objectFit: 'cover' }} />
      <div className="card-content-area">
        <h3>Amazing Product</h3>
        <p>Description of the product goes here.</p>
      </div>
    </AutoCard>
  );
}

import { AutoCard } from 'auto-responsive';

function ProductCard() {
  return (
    // Using default vertical stacking algorithm on small screens while styled with Bootstrap cards
    <AutoCard className="card border-0 shadow bg-light overflow-hidden">
      <img src="/product.jpg" alt="Product" className="img-fluid" style={{ width: '200px', objectFit: 'cover' }} />
      <div className="card-body d-flex flex-column justify-content-center">
        <h3 className="card-title h5">Amazing Product</h3>
        <p className="card-text text-secondary mb-0">Description of the product goes here.</p>
      </div>
    </AutoCard>
  );
}

Global Optimizations

Handling Unbreakable Text

Ever had a long URL break your grid? Our global reset automatically applies CSS properties like overflow-wrap: break-word inside all our components to ensure text wraps correctly and never causes horizontal scrolling.

import { AutoBox, AutoText } from 'auto-responsive';

function UserProfile() {
  return (
    <AutoBox className="p-6 bg-slate-900 rounded-xl border border-slate-800 max-w-md text-white shadow-xl">
      <AutoText as="h3" scale="lg" className="font-bold mb-2">User Website URL</AutoText>
      {/* Extremely long URL wraps safely without horizontal scrollbar */}
      <AutoText as="p" className="text-indigo-400 font-mono text-sm bg-slate-950 p-3 rounded-lg border border-slate-800">
        https://super-long-domain-name-with-zero-spaces-that-would-normally-destroy-mobile-grids.example.com/profile/token_9876543210
      </AutoText>
    </AutoBox>
  );
}

import { AutoBox, AutoText } from 'auto-responsive';
import './text-wrap.css';

function UserProfile() {
  return (
    <AutoBox className="custom-profile-card">
      <AutoText as="h3" scale="lg">User Website URL</AutoText>
      <AutoText as="p" className="unbreakable-url-box">
        https://super-long-domain-name-with-zero-spaces-that-would-normally-destroy-mobile-grids.example.com/profile/token_9876543210
      </AutoText>
    </AutoBox>
  );
}

import { AutoBox, AutoText } from 'auto-responsive';

function UserProfile() {
  return (
    <AutoBox className="card p-4 shadow-sm bg-dark text-light border-0">
      <AutoText as="h3" scale="lg" className="card-title h5">User Website URL</AutoText>
      <AutoText as="p" className="card-text text-info bg-secondary p-2 rounded font-monospace mb-0">
        https://super-long-domain-name-with-zero-spaces-that-would-normally-destroy-mobile-grids.example.com/profile/token_9876543210
      </AutoText>
    </AutoBox>
  );
}

Touch Target Optimization

By detecting hybrid devices (like an iPad with a Magic Keyboard), the library automatically increases standard interaction padding (e.g., button heights) from 32px to 44px strictly when touched, keeping things compact for mouse users while accessible for fingers.

import { AutoBox } from 'auto-responsive';

function InteractiveActions() {
  return (
    <div className="flex space-x-4 p-4 bg-slate-900 rounded-xl border border-slate-800">
      {/* Touch heights scale dynamically from compact 32px (mouse) to comfortable 44px (touch) */}
      <AutoBox as="button" className="px-4 py-1.5 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg font-semibold shadow transition flex items-center justify-center">
        Compact Action
      </AutoBox>
      <AutoBox as="button" className="px-4 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg font-medium border border-slate-700 transition flex items-center justify-center">
        Secondary Action
      </AutoBox>
    </div>
  );
}

import { AutoBox } from 'auto-responsive';
import './touch-targets.css';

function InteractiveActions() {
  return (
    <div className="action-bar-container">
      <AutoBox as="button" className="touch-optimized-btn primary-btn">
        Compact Action
      </AutoBox>
      <AutoBox as="button" className="touch-optimized-btn secondary-btn">
        Secondary Action
      </AutoBox>
    </div>
  );
}

import { AutoBox } from 'auto-responsive';

function InteractiveActions() {
  return (
    <div className="d-flex gap-2 p-3 bg-light rounded shadow-sm">
      <AutoBox as="button" className="btn btn-primary d-flex align-items-center">
        Compact Action
      </AutoBox>
      <AutoBox as="button" className="btn btn-outline-secondary d-flex align-items-center">
        Secondary Action
      </AutoBox>
    </div>
  );
}

Supported Primitives

Structural Components

• <AutoFlex>: A fluid flexbox container that wraps intelligently.
• <AutoGrid>: A container query grid that adjusts columns based on available space.
• <AutoStack>: Vertical spacing on mobile, horizontal flow on desktop.
• <AutoContainer>: A centered wrapper that automatically calculates side paddings.
• <AutoText>: The fluid typography wrapper.

import { AutoContainer, AutoStack, AutoText } from 'auto-responsive';

function StructuralPage() {
  return (
    <AutoContainer className="max-w-6xl mx-auto py-12 px-6 bg-slate-950 text-white min-h-screen">
      <AutoStack gap="2rem" className="bg-slate-900 p-8 rounded-2xl border border-slate-800 shadow-xl">
        <div className="flex-1">
          <AutoText as="h2" scale="2xl" className="font-extrabold text-indigo-400 mb-2">AutoContainer & AutoStack</AutoText>
          <AutoText as="p" scale="base" className="text-slate-300">Vertically spaced on small screens, gracefully horizontal on desktop monitors.</AutoText>
        </div>
        <button className="px-6 py-3 bg-indigo-600 rounded-xl font-bold hover:bg-indigo-500 shadow-lg transition">Explore More</button>
      </AutoStack>
    </AutoContainer>
  );
}

import { AutoContainer, AutoStack, AutoText } from 'auto-responsive';
import './structural.css';

function StructuralPage() {
  return (
    <AutoContainer className="main-page-container">
      <AutoStack gap="2rem" className="content-stack">
        <div className="text-wrapper">
          <AutoText as="h2" scale="2xl" className="section-heading">AutoContainer & AutoStack</AutoText>
          <AutoText as="p" scale="base" className="section-description">Vertically spaced on small screens, gracefully horizontal on desktop monitors.</AutoText>
        </div>
        <button className="custom-action-button">Explore More</button>
      </AutoStack>
    </AutoContainer>
  );
}

import { AutoContainer, AutoStack, AutoText } from 'auto-responsive';

function StructuralPage() {
  return (
    <AutoContainer className="container py-5">
      <AutoStack gap="2rem" className="p-5 mb-4 bg-dark text-light rounded-3 shadow">
        <div>
          <AutoText as="h2" scale="2xl" className="fw-bold text-primary">AutoContainer & AutoStack</AutoText>
          <AutoText as="p" scale="base" className="text-secondary mb-0">Vertically spaced on small screens, gracefully horizontal on desktop monitors.</AutoText>
        </div>
        <button className="btn btn-outline-light btn-lg">Explore More</button>
      </AutoStack>
    </AutoContainer>
  );
}

Visibility & Media Utilities

• <ShowOn breakpoints={['mobile']}>: Declaratively mounts children only on specified device sizes.
• <HideOn breakpoints={['mobile']}>: Declaratively unmounts children on specified device sizes.
• <AutoImage>: An advanced image tag that natively handles aspect ratios to prevent CLS, and lazy loads automatically.
• <AutoClamp lines={2}>: Automatically clamps text to the specified line count and adds an ellipsis.

import { ShowOn, AutoImage, AutoClamp } from 'auto-responsive';

function MediaCard() {
  return (
    <div className="bg-slate-900 rounded-xl overflow-hidden border border-slate-800 shadow-xl max-w-sm">
      <AutoImage src="/feature.png" aspectRatio="16/9" alt="Feature" className="w-full object-cover" />
      <div className="p-5 space-y-2">
        <ShowOn breakpoints={['mobile', 'tablet']}>
          <span className="text-xs font-bold uppercase bg-indigo-900/60 text-indigo-300 px-2 py-0.5 rounded">Mobile Preview</span>
        </ShowOn>
        <AutoClamp lines={2} as="p" className="text-slate-300 text-sm font-medium leading-relaxed">
          This preview dynamically renders visual tags strictly on mobile devices while clamping long summaries without CLS shifts.
        </AutoClamp>
      </div>
    </div>
  );
}

import { ShowOn, AutoImage, AutoClamp } from 'auto-responsive';
import './media-card.css';

function MediaCard() {
  return (
    <div className="media-preview-card">
      <AutoImage src="/feature.png" aspectRatio="16/9" alt="Feature" className="card-media-image" />
      <div className="card-text-content">
        <ShowOn breakpoints={['mobile', 'tablet']}>
          <span className="mobile-only-badge">Mobile Preview</span>
        </ShowOn>
        <AutoClamp lines={2} as="p" className="clamped-summary">
          This preview dynamically renders visual tags strictly on mobile devices while clamping long summaries without CLS shifts.
        </AutoClamp>
      </div>
    </div>
  );
}

import { ShowOn, AutoImage, AutoClamp } from 'auto-responsive';

function MediaCard() {
  return (
    <div className="card shadow-sm border-0 bg-dark text-white" style={{ width: '18rem' }}>
      <AutoImage src="/feature.png" aspectRatio="16/9" alt="Feature" className="card-img-top" />
      <div className="card-body">
        <ShowOn breakpoints={['mobile', 'tablet']}>
          <span className="badge bg-primary mb-2">Mobile Preview</span>
        </ShowOn>
        <AutoClamp lines={2} as="p" className="card-text text-light small mb-0">
          This preview dynamically renders visual tags strictly on mobile devices while clamping long summaries without CLS shifts.
        </AutoClamp>
      </div>
    </div>
  );
}

Smart Interactive Components

• <AutoModal>: A native HTML <dialog> that acts as a centered modal on desktop, but seamlessly morphs into an animated, safe-area-aware Bottom Sheet on mobile.
• <AutoNavbar>: A horizontal navigation bar for desktop that automatically collapses its links into a full-screen mobile hamburger overlay on small screens.
• <AutoCard>: An intelligent structural wrapper that arranges its contents as a horizontal row on desktop and stacks them vertically on mobile without complex flexbox tweaking.

import { AutoCard, AutoNavbar } from 'auto-responsive';

function InteractiveShell() {
  return (
    <div className="space-y-6 bg-slate-950 p-6 min-h-screen">
      <AutoNavbar 
        className="bg-slate-900 rounded-xl px-6 py-4 shadow-lg border border-slate-800 text-white"
        logo={<span className="font-extrabold text-indigo-400">Smart UI</span>}
        links={<a href="#" className="hover:text-indigo-300 font-medium">Dashboard</a>}
        actions={<button className="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-1.5 rounded-lg text-sm font-bold">Action</button>}
      />
      <AutoCard className="bg-slate-900 p-6 rounded-2xl border border-slate-800 text-slate-200 shadow-xl flex items-center justify-between">
        <div>
          <h3 className="text-xl font-bold text-white mb-1">Morphing Layout Card</h3>
          <p className="text-slate-400 text-sm">Arranges horizontally on desktop monitors and stacks cleanly on mobile displays.</p>
        </div>
      </AutoCard>
    </div>
  );
}

import { AutoCard, AutoNavbar } from 'auto-responsive';
import './interactive.css';

function InteractiveShell() {
  return (
    <div className="app-interactive-shell">
      <AutoNavbar 
        className="custom-app-header"
        logo={<span className="logo-text">Smart UI</span>}
        links={<a href="#">Dashboard</a>}
        actions={<button className="header-action-btn">Action</button>}
      />
      <AutoCard className="content-overview-card">
        <div>
          <h3>Morphing Layout Card</h3>
          <p>Arranges horizontally on desktop monitors and stacks cleanly on mobile displays.</p>
        </div>
      </AutoCard>
    </div>
  );
}

import { AutoCard, AutoNavbar } from 'auto-responsive';

function InteractiveShell() {
  return (
    <div className="p-4 bg-light min-vh-100">
      <AutoNavbar 
        className="navbar navbar-dark bg-dark px-4 rounded shadow-sm mb-4"
        logo={<span className="navbar-brand fw-bold">Smart UI</span>}
        links={<a href="#" className="nav-link text-white">Dashboard</a>}
        actions={<button className="btn btn-sm btn-outline-light">Action</button>}
      />
      <AutoCard className="card p-4 border-0 shadow-sm bg-white d-flex align-items-center justify-content-between">
        <div>
          <h3 className="h5 mb-1">Morphing Layout Card</h3>
          <p className="text-secondary mb-0">Arranges horizontally on desktop monitors and stacks cleanly on mobile displays.</p>
        </div>
      </AutoCard>
    </div>
  );
}

The Runtime Smart Engine (AutoBox)

Instead of just static wrappers, the library ships with a full OS-level parsing engine (analyzer.js).

• <AutoBox>: The ultimate responsive primitive. You can pass standard Tailwind utility classes (e.g. p-8), JIT values (e.g. w-[200px]), and state modifiers (e.g. hover:p-12), and the engine will parse them at runtime to generate mathematically perfect, fluid scaling limits!

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | as | 'div' | Any HTML element tag (e.g., 'button', 'section', 'article', 'form') | | fluid | true | false (disables mathematical runtime fluid scaling algorithms) | | parseEngine | 'jit' | 'jit', 'standard' (selects CSS runtime parsing behavior) |

import { AutoBox } from 'auto-responsive';

function SmartButton() {
  // 1. "p-4" automatically scales padding based on viewport.
  // 2. "hover:p-8" dynamically injects CSS variables for smooth fluid padding expansion on hover.
  // 3. "text-[32px]" intercepts the JIT value and clamps it for mobile.
  // Default fluid={true} active. Overriding default as="div" to as="button"!
  return (
    <AutoBox as="button" fluid={true} className="p-4 hover:p-8 text-[32px] bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl shadow-lg transition-all font-extrabold">
      Click Me
    </AutoBox>
  );
}

import { AutoBox } from 'auto-responsive';
import './smart-button.css';

function SmartButton() {
  return (
    // Override as="div" to as="button"; runtime engine calculates fluid sizing over vanilla classes
    <AutoBox as="button" className="smart-fluid-btn">
      Click Me
    </AutoBox>
  );
}

import { AutoBox } from 'auto-responsive';

function SmartButton() {
  return (
    // Default parseEngine="jit" works alongside Bootstrap button utilities
    <AutoBox as="button" className="btn btn-primary btn-lg shadow p-4">
      Click Me
    </AutoBox>
  );
}

Smart Form Components

<AutoInput> & <AutoTextarea>: Fluid input wrappers that automatically enforce a 16px baseline font size on mobile to prevent annoying iOS Safari auto-zooming.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | mobileMinFontSize| '16px' | Custom minimum mobile font size ('18px', '14px') to prevent iOS zooming | | fluid | true | false (disables responsive width expansion on handheld screens) | | rows | 3 (Textarea)| Initial row count for textarea before fluid adjustments (e.g., 4, 5) |

import { AutoInput, AutoTextarea } from 'auto-responsive';

function ContactForm() {
  return (
    <form className="space-y-4 max-w-lg p-6 bg-slate-900 rounded-2xl border border-slate-800 text-white">
      {/* Default mobileMinFontSize="16px" stops iOS zoom. Overriding default fluid={true} if fixed width is desired! */}
      <AutoInput type="text" placeholder="Your Name" className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 focus:border-indigo-500 focus:outline-none" />
      {/* Overriding default rows={3} to rows={4} */}
      <AutoTextarea placeholder="Your Message" rows={4} className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 focus:border-indigo-500 focus:outline-none" />
    </form>
  );
}

import { AutoInput, AutoTextarea } from 'auto-responsive';
import './forms.css';

function ContactForm() {
  return (
    <form className="custom-contact-form">
      {/* Keeping default fluid={true} and 16px protection */}
      <AutoInput type="text" placeholder="Your Name" className="form-input-field" />
      <AutoTextarea placeholder="Your Message" rows={4} className="form-textarea-field" />
    </form>
  );
}

import { AutoInput, AutoTextarea } from 'auto-responsive';

function ContactForm() {
  return (
    <form className="card p-4 shadow-sm bg-light border-0">
      <div className="mb-3">
        {/* Custom mobileMinFontSize="16px" active by default with Bootstrap form-control */}
        <AutoInput type="text" placeholder="Your Name" className="form-control" />
      </div>
      <div className="mb-0">
        <AutoTextarea placeholder="Your Message" rows={4} className="form-control" />
      </div>
    </form>
  );
}

<AutoCheckbox> & <AutoRadio>: Accessible wrappers that enforce a minimum 44px tap target on touch devices to meet Apple/Google accessibility guidelines.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | minTapTarget | '44px' | Minimum touch zone diameter (e.g., '48px', '40px') | | size | 'md' | 'sm', 'md', 'lg' | | disabled | false | true (renders standard accessibility disabled state) |

import { AutoCheckbox, AutoRadio } from 'auto-responsive';

function Options() {
  return (
    <div className="p-4 bg-slate-900 rounded-xl space-y-3 text-slate-200">
      {/* Default minTapTarget="44px" and size="md". Overriding size="lg" if extra prominence is required! */}
      <AutoCheckbox label="Subscribe to newsletter" size="md" className="text-indigo-400 focus:ring-indigo-500" />
      <AutoRadio name="plan" label="Basic" className="text-indigo-400 focus:ring-indigo-500" />
      <AutoRadio name="plan" label="Pro" className="text-indigo-400 focus:ring-indigo-500" />
    </div>
  );
}

import { AutoCheckbox, AutoRadio } from 'auto-responsive';
import './options.css';

function Options() {
  return (
    <div className="options-container">
      {/* Default accessible touch boundaries applied automatically */}
      <AutoCheckbox label="Subscribe to newsletter" className="custom-checkbox" />
      <AutoRadio name="plan" label="Basic" className="custom-radio" />
      <AutoRadio name="plan" label="Pro" className="custom-radio" />
    </div>
  );
}

import { AutoCheckbox, AutoRadio } from 'auto-responsive';

function Options() {
  return (
    <div className="p-3 bg-white rounded shadow-sm border">
      <div className="form-check mb-2">
        {/* Enforces 44px tap area around standard Bootstrap checkbox labels */}
        <AutoCheckbox label="Subscribe to newsletter" className="form-check-input" />
      </div>
      <div className="form-check mb-2">
        <AutoRadio name="plan" label="Basic" className="form-check-input" />
      </div>
      <div className="form-check">
        <AutoRadio name="plan" label="Pro" className="form-check-input" />
      </div>
    </div>
  );
}

<AutoFormGroup>: A smart container that places a Label and an Input side-by-side on desktop, but seamlessly stacks them vertically on mobile without manual media queries.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | direction | 'row' | Desktop layout orientation ('row', 'column') | | mobileDirection | 'column' | Mobile compact orientation ('column', 'row') | | gap | '0.75rem' | Spacing between label and form control (e.g., '12px', '1rem') |

import { AutoFormGroup, AutoInput } from 'auto-responsive';

function UserProfile() {
  return (
    // Default direction="row" on desktop automatically morphs to default mobileDirection="column" on phones!
    <AutoFormGroup label="Email Address" gap="1rem" className="bg-slate-800 p-4 rounded-xl text-slate-200 border border-slate-700">
      <AutoInput type="email" className="bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-white w-full focus:border-indigo-500 focus:outline-none" />
    </AutoFormGroup>
  );
}

import { AutoFormGroup, AutoInput } from 'auto-responsive';
import './form-group.css';

function UserProfile() {
  return (
    // Customizing direction="column" on desktop for structured vertical intake forms
    <AutoFormGroup direction="column" label="Email Address" className="responsive-form-group">
      <AutoInput type="email" className="standard-email-input" />
    </AutoFormGroup>
  );
}

import { AutoFormGroup, AutoInput } from 'auto-responsive';

function UserProfile() {
  return (
    // Default row-to-column responsiveness applied to Bootstrap form labels
    <AutoFormGroup label="Email Address" className="mb-3 fw-bold text-dark">
      <AutoInput type="email" className="form-control" />
    </AutoFormGroup>
  );
}

Smart Feedback & Overlay Ecosystem

<AutoAlert>: A morphing banner that sits wide on desktop but stacks vertically on mobile to save horizontal space.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | variant | 'info' | 'info', 'success', 'warning', 'error', 'primary' | | dismissible | false | true (renders an automated closing X icon button) | | mobileStack | true | false (disables horizontal-to-vertical stacking on phones) |

import { AutoAlert } from 'auto-responsive';

function Warning() {
  return (
    // Overriding default variant="info" to variant="warning", keeping default mobileStack={true}
    <AutoAlert variant="warning" dismissible={true} className="bg-amber-950 border border-amber-700 text-amber-200 p-4 rounded-xl shadow-md font-medium">
      Please check your internet connection.
    </AutoAlert>
  );
}

import { AutoAlert } from 'auto-responsive';
import './alert.css';

function Warning() {
  return (
    // Default mobileStack={true} ensures responsive stacking on small viewports
    <AutoAlert variant="warning" className="custom-warning-banner">
      Please check your internet connection.
    </AutoAlert>
  );
}

import { AutoAlert } from 'auto-responsive';

function Warning() {
  return (
    // Overriding default dismissible={false} to true with Bootstrap warning colors
    <AutoAlert variant="warning" dismissible={true} className="alert alert-warning shadow-sm mb-0">
      Please check your internet connection.
    </AutoAlert>
  );
}

<AutoBadge>: An auto-scaling notification badge that stays proportionate to its parent text.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | variant | 'primary' | 'success', 'warning', 'error', 'info', 'secondary' | | scale | true | false (prevents fluid font sizing adjustments with parent text) | | size | 'md' | 'sm', 'md', 'lg' |

import { AutoBadge, AutoText } from 'auto-responsive';

function Status() {
  return (
    <AutoText scale="lg" className="font-bold text-slate-100 flex items-center gap-2">
      {/* Overriding default variant="primary" to "success" and default size="md" to "sm" */}
      Status <AutoBadge variant="success" size="sm" className="bg-emerald-600 text-white px-2.5 py-0.5 rounded-full text-xs font-extrabold shadow">Online</AutoBadge>
    </AutoText>
  );
}

import { AutoBadge, AutoText } from 'auto-responsive';
import './badge.css';

function Status() {
  return (
    <AutoText scale="lg" className="status-label">
      {/* Default scale={true} keeps badge proportionate to AutoText */}
      Status <AutoBadge variant="success" className="status-badge-online">Online</AutoBadge>
    </AutoText>
  );
}

import { AutoBadge, AutoText } from 'auto-responsive';

function Status() {
  return (
    <AutoText scale="lg" className="fw-semibold">
      {/* Custom variant="success" override with Bootstrap badges */}
      Status <AutoBadge variant="success" className="badge bg-success text-white ms-2">Online</AutoBadge>
    </AutoText>
  );
}

<AutoSkeleton>: An advanced loading placeholder. Because it uses the AutoBox engine, it prevents CLS by perfectly mimicking the responsive layout of the component it is replacing.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | width | '100%' | Custom CSS width string (e.g., '60%', '250px', '15rem') | | height| '1.5rem' | Custom CSS height string (e.g., '200px', '24px') | | variant | 'rect' | 'rect', 'circle', 'text' | | animate | 'pulse' | 'pulse', 'wave', 'none' |

import { AutoSkeleton } from 'auto-responsive';

function LoadingState() {
  return (
    <div className="p-4 bg-slate-900 rounded-xl border border-slate-800 space-y-4">
      {/* Overriding default height="1.5rem" to height="200px"; default animate="pulse" active */}
      <AutoSkeleton width="100%" height="200px" className="bg-slate-800 animate-pulse rounded-lg" />
      <AutoSkeleton width="60%" height="24px" className="bg-slate-800 animate-pulse rounded-md" />
    </div>
  );
}

import { AutoSkeleton } from 'auto-responsive';
import './skeleton.css';

function LoadingState() {
  return (
    <div className="loading-wrapper">
      {/* Default variant="rect" applied across responsive loading skeleton placeholders */}
      <AutoSkeleton width="100%" height="200px" className="custom-skeleton-box" />
      <AutoSkeleton width="60%" height="24px" className="custom-skeleton-text" />
    </div>
  );
}

import { AutoSkeleton } from 'auto-responsive';

function LoadingState() {
  return (
    <div className="card p-3 border-0 shadow-sm bg-light">
      {/* Overriding default width and height while adopting Bootstrap placeholder utility classes */}
      <AutoSkeleton width="100%" height="200px" className="placeholder bg-secondary rounded mb-3" />
      <AutoSkeleton width="60%" height="24px" className="placeholder bg-secondary rounded" />
    </div>
  );
}

<AutoToast>: A notification popup that sits at the top-right on desktop, but anchors to the bottom on mobile while mathematically floating above the iOS Safari home bar and Notch.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | position | 'top-right' | Desktop position ('top-left', 'top-center', 'top-right', 'bottom-right') | | mobilePosition| 'bottom-center'| Mobile position ('bottom-center', 'top-center', 'bottom-full') | | duration | 3000 | Millisecond duration before auto-closing (e.g., 5000, 10000, or 0 for persistent) |

import { AutoToast } from 'auto-responsive';

function Notification() {
  return (
    // Default position="top-right" (desktop) and mobilePosition="bottom-center" (mobile) protect iOS safe areas!
    <AutoToast 
      message="Profile updated successfully!" 
      type="success" 
      duration={3000} 
      className="bg-emerald-700 text-white p-4 rounded-xl shadow-xl font-semibold border border-emerald-600 flex items-center justify-between"
      onClose={() => console.log('Closed')} 
    />
  );
}

import { AutoToast } from 'auto-responsive';
import './toast.css';

function Notification() {
  return (
    // Overriding duration={3000} to duration={5000} for longer read times
    <AutoToast 
      message="Profile updated successfully!" 
      type="success" 
      duration={5000} 
      className="custom-floating-toast"
      onClose={() => console.log('Closed')} 
    />
  );
}

import { AutoToast } from 'auto-responsive';

function Notification() {
  return (
    // Default duration={3000} and position calculations applied seamlessly to Bootstrap toasts
    <AutoToast 
      message="Profile updated successfully!" 
      type="success" 
      duration={3000} 
      className="toast show bg-success text-white border-0 shadow-lg p-3"
      onClose={() => console.log('Closed')} 
    />
  );
}

Advanced Navigation Ecosystem

<AutoDropdown>: A desktop popup menu that automatically transforms into a bottom-anchored iOS Action Sheet on mobile devices.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | mobileVariant| 'actionSheet'| 'actionSheet', 'popup', 'modal' | | closeOnSelect| true | false (keeps dropdown open after an option is selected) |

import { AutoDropdown, AutoButton } from 'auto-responsive';

function UserMenu() {
  return (
    // Default mobileVariant="actionSheet" morphs popup into iOS action sheet on smartphones!
    <AutoDropdown 
      mobileVariant="actionSheet"
      closeOnSelect={true}
      trigger={<AutoButton className="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-lg font-medium shadow border border-slate-700">Menu</AutoButton>}
      className="bg-slate-900 border border-slate-800 text-slate-200 rounded-xl shadow-2xl p-2 min-w-[200px]"
      items={[
        { label: 'Settings', className: 'hover:bg-indigo-600 rounded-lg p-2 transition', onClick: () => alert('Settings') },
        { label: 'Logout', className: 'hover:bg-rose-600 text-rose-300 rounded-lg p-2 transition', onClick: () => alert('Logout') }
      ]}
    />
  );
}

import { AutoDropdown, AutoButton } from 'auto-responsive';
import './dropdown.css';

function UserMenu() {
  return (
    // Overriding default mobileVariant="actionSheet" to "modal" for tablet touch targets
    <AutoDropdown 
      mobileVariant="modal"
      trigger={<AutoButton className="custom-dropdown-trigger">Menu</AutoButton>}
      className="custom-dropdown-menu"
      items={[
        { label: 'Settings', onClick: () => alert('Settings') },
        { label: 'Logout', onClick: () => alert('Logout') }
      ]}
    />
  );
}

import { AutoDropdown, AutoButton } from 'auto-responsive';

function UserMenu() {
  return (
    // Default closeOnSelect={true} gracefully collapses Bootstrap dropdowns upon selection
    <AutoDropdown 
      trigger={<AutoButton className="btn btn-secondary dropdown-toggle">Menu</AutoButton>}
      className="dropdown-menu show shadow p-2"
      items={[
        { label: 'Settings', className: 'dropdown-item', onClick: () => alert('Settings') },
        { label: 'Logout', className: 'dropdown-item text-danger', onClick: () => alert('Logout') }
      ]}
    />
  );
}

<AutoBreadcrumbs>: Prevents horizontal scrolling by automatically collapsing intermediate path steps (e.g. Home > ... > Current) specifically on small screens.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | maxItems | 3 | Maximum visible breadcrumb links before collapsing (e.g., 2, 4, 5) | | separator | '/' | Custom symbol or React element (e.g., '>', '→', '•') | | mobileCompact| true | false (keeps all breadcrumbs expanded on smaller viewports) |

import { AutoBreadcrumbs } from 'auto-responsive';

function Breadcrumbs() {
  return (
    <nav className="bg-slate-900 p-3 rounded-lg border border-slate-800 text-sm font-medium">
      {/* Default maxItems={3} and mobileCompact={true}. Overriding default separator="/" to "→" */}
      <AutoBreadcrumbs 
        separator="→"
        className="text-slate-400 space-x-2"
        activeClassName="text-indigo-400 font-bold"
        items={[
          { label: 'Home', href: '/' },
          { label: 'Dashboard', href: '/dashboard' },
          { label: 'Settings' }
        ]}
      />
    </nav>
  );
}

import { AutoBreadcrumbs } from 'auto-responsive';
import './breadcrumbs.css';

function Breadcrumbs() {
  return (
    // Default maxItems={3} automatically collapses long navigation chains into ellipses on handheld screens
    <AutoBreadcrumbs 
      className="responsive-breadcrumbs-nav"
      items={[
        { label: 'Home', href: '/' },
        { label: 'Dashboard', href: '/dashboard' },
        { label: 'Settings' }
      ]}
    />
  );
}

import { AutoBreadcrumbs } from 'auto-responsive';

function Breadcrumbs() {
  return (
    <nav aria-label="breadcrumb">
      {/* Using custom maxItems={4} override with standard Bootstrap breadcrumb classes */}
      <AutoBreadcrumbs 
        maxItems={4}
        className="breadcrumb mb-0 bg-light p-3 rounded shadow-sm"
        items={[
          { label: 'Home', href: '/' },
          { label: 'Dashboard', href: '/dashboard' },
          { label: 'Settings' }
        ]}
      />
    </nav>
  );
}

<AutoPagination>: Shows full page numbers (1 2 3 4) on desktop, but morphs into a compact Prev | Page X of Y | Next layout on mobile.

| Prop | Default Value | Available Overrides & Description | | :--- | :--- | :--- | | currentPage | 1 | Controlled active page index | | siblingCount| 1 | Number of sibling page buttons shown around active page on desktop | | compactOnMobile| true| false (disables compact Prev | Page X of Y | Next mobile morphing) |

import { AutoPagination } from 'auto-responsive';

function List() {
  return (
    <div className="flex justify-center p-4 bg-slate-900 rounded-xl border border-slate-800 text-white font-semibold">
      {/* Default compactOnMobile={true} automatically switches full numbers to compact paging on phones! */}
      <AutoPagination 
        compactOnMobile={true}
        currentPage={1} 
        totalPages={10} 
        buttonClassName="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 mx-1 transition"
        activeClassName="bg-indigo-600 hover:bg-indigo-500 text-white"
        onPageChange={(page) => console.log(page)} 
      />
    </div>
  );
}

import { AutoPagination } from 'auto-responsive';
import './pagination.css';

function List() {
  return (
    // Overriding default siblingCount={1} to siblingCount={2} for spacious desktop paginators
    <AutoPagination 
      siblingCount={2}
      className="custom-pagination-bar"
      currentPage={1} 
      totalPages={10} 
      onPageChange={(page) => console.log(page)} 
    />
  );
}

import { AutoPagination } from 'auto-responsive';

function List() {
  return (
    // Default mobile compact mode prevents horizontal overflow across Bootstrap pagination elements
    <AutoPagination 
      className="pagination pagination-sm justify-content-center mb-0 shadow-sm"
      currentPage={1}