Since AueraUI is built to function globally, you can control the look and behavior of your app using the Provider and hooks.

AueraUI allows you to customize the look and feel of your application with its flexible theming system. The ThemeProvider component enables global theme management, allowing you to apply consistent styling across your app.

By default, AueraUI detects the user's system theme and applies the appropriate theme. This provides a seamless experience for users, as the UI will automatically align with their system settings.

AueraUI provides a toggle function that allows you to manually switch between the user's system theme and AueraUI's theme set. The toggle function has two main options:

• toggleTheme.system: Switches to the user's system theme based on the user's operating system settings.

• toggleTheme.main: Switches to AueraUI's predefined theme set,

This toggleTheme functionality is useful when you want to give users the ability to manually switch between system preferences and the app's theme.

Example Usage:

import { useTheme, Button } from 'auera-ui';

export default function App() {
const { toggleTheme } = useTheme();

return (
  <div>
    <Button onClick={() => toggleTheme.system()}>Use System Theme</Button>
    <Button onClick={() => toggleTheme.main()}>Use AueraUI Theme</Button>
  </div>
);
}

To maintain better organization, keep all overlay components (e.g., Modal, Drawer) in an overlays folder.

import { Modal, ModalPanel, ModalContent, ModalHeader, IconButton } from "auera-ui";
import { IoClose } from "react-icons/io5";

const AuthModal = () => {
  // Your logic here
  return (
    <Modal value="auth-modal">
        <ModalPanel>
          <ModalHeader>
            <h1>Sign in</h1>
            <IconButton
              withTrigger
              trigger="modal"
              triggerType="close"
              triggerValue="auth-modal"
              variant="ghost"
            >
              <IoClose size={18} />
            </IconButton>
          </ModalHeader>
          <ModalContent>{/* Add your modal content here */}</ModalContent>
        </ModalPanel>
      </Modal>
  );
};
  
export default AuthModal;

import AuthModal from "./auth";
import MenuDrawer from "./menu";

const Overlays = () => {
    return (
      <>
        <AuthModal />
        <MenuDrawer />
        {/* Add more overlays as needed */}
      </>
    );
};

export default Overlays;
  

import Overlays from "../components/overlays/container";
  
const RootLayout = () => {
  return (
    <>
    {/* Other components */}
    <Overlays />
    </>
  );
};
  
export default RootLayout;