Usage
Learn how to effectively use the components and features of AueraUI to build your UI with ease.
Basic Usage
After installation, you can import any AueraUI component and start playing around. For example, try changing the variant on the Button
Globals
Since AueraUI is built to function globally, you can control the look and behavior of your app using the Provider and hooks.
Theme
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.
Default Theme
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.
ToggleTheme
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:
Demo.tsx
Overlays
To maintain better organization, keep all overlay components (e.g., Modal, Drawer) in an overlays folder.
Overlay Component
Below is an example of how you should structure your overlays.
components/overlays/auth.tsx
Create File
Create a single file, such as overlays/container.,tsx and import all the overlay components into it.
components/overlays/container.tsx
Import Components
Import the newly created Overlays Component from overlays/container.tsx into your root layout or App.tsx.
layout.tsx
This approach simplifies imports and centralizes overlay management.