Auera-ui NPM | npm.io

Documentation

For full documentation, visit:

AueraUI

Installation

Prerequisites

Before installing AueraUI, ensure you have:

React >= 18.3.2
ReactDOM >= 18.3.2
tailwindcss >= 3.4.1

installed in your project.

To install AueraUI, you can use npm or yarn:

npm install auera-ui

yarn add auera-ui

Provider

Most of AueraUI components depend's on the Provider to share global settings and themes. Wrapping your application with the Provider ensures consistent styling and functionality.

Usage Example

import { Provider } from "auera-ui";

function RootLayout() {
  return <Provider>{/* Your application components */}</Provider>;
}

Why Use the Provider?

Global Theme Management: Applies consistent themes across all components.
State Management: Centralizes shared state and configuration settings.

Extending Tailwind Config

You can extend the Tailwind configuration to customize styles and integrate AueraUI's default theme.

Steps:

// tailwind.config.js or tailwind.config.ts
/** @type {import('tailwindcss').Config} */
import { tailwindExtend, aueraTw, SafeLists } from "auera-ui";

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/auera-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  safelist: SafeLists(),
  theme: {
    extend: {
      backgroundColor: {
        ...tailwindExtend.backgroundColor,
      },
      boxShadow: {
        ...tailwindExtend.boxShadow,
      },
      colors: {
        ...tailwindExtend.colors,
      },
      borderColor: {
        ...tailwindExtend.borderColor,
      },
      transitionProperty: {
        ...tailwindExtend.transitionProperty,
      },
      borderWidth: {
        ...tailwindExtend.borderWidth,
      },
      keyframes: { ...tailwindExtend.keyframes },
      animation: { ...tailwindExtend.animation },
      dropShadow: { ...tailwindExtend.dropShadow },
      fontFamily: { ...tailwindExtend.fontFamily },
    },
  },
  /* For enabling custom variants, This allows you use
   'theme-*dark/light'
   'tone-*light/dark'
   'scrollbar'
   'scrollbar-track'
   'scrollbar-thumb'
   'scrollbar-none'
   */
  plugins: [aueraTw],
};

Importing CSS

AueraUI comes with its own CSS file that you can import to apply default styles globally.

Importing in your project:

import 'auera-ui/dist/auera.css';

// or in your main CSS file
@import 'auera-ui/dist/auera.css';

Usage

Import and use components in your React project:

import { Button } from "auera-ui";

function App() {
  return <Button colorScheme="warning">Click Me</Button>;
}

Components

AueraUI includes a variety of components to help you build your application. These components are designed to be customizable and easily integrable into your projects.

Button: A flexible and customizable button component to trigger actions.
Card: A container component for displaying content in a structured format with options for customization.
Modal: A dialog window for presenting information or taking user input, with support for overlays and custom content.
Drawer: A sliding panel for displaying additional content or options without navigating from the current page.
Stack: A layout component that arranges elements in a flexible, vertical or horizontal stack, providing responsive spacing.
Box: A simple container for wrapping elements, providing customization options for layout and styling.

Additional Notes

Each component is fully customizable and designed with accessibility and usability in mind. You can adjust styles, behavior, and layouts by extending Tailwind CSS or by modifying the components directly.

For a full list of components and their usage, please refer to the documentation.