Logo

AueraUI

Docs

Components

Getting-Started

Quick Start

A step-by-step guide to quickly set up AueraUI.

Logo

AueraUI is a robust UI library providing flexible, high-quality components, built with Tailwind CSS and Motion offering you a powerful toolkit to build stunning, interactive user interfaces with ease.

Getting Started

This guide will walk you through getting started with AueraUI. You'll learn how to set it up, customize it and integrate it into your project!

1

Install auera-ui

npm
yarn
pnpm
npm install auera-ui react-icons

2

Setup Provider

It is essential to add the Provider at the root of your application.

The Provider component serves as the global state manager for AueraUI

layout.tsx

import { Provider } from "auera-ui";


interface Props {
 children: React.ReactNode;
}


export default function RootLayout({
 children
}: Props) {
 return ( 
  <Provider>
   {children}
  </Provider>
 )
}

By wrapping your app with Provider, the following global features will be automatically applied:

  • ThemeProvider: Manages the global theme for your application.
  • ModalProvider: Manages modal dialogs and their visibility.
  • DrawerProvider: Manages side drawers in your application.
  • Toaster: Renders and manages toast notifications. Required for displaying toast messages.

3

Update tailwind.config.ts

Next, update your Tailwind configuration to include AueraUI's extended properties. This ensures that animations and styles are applied correctly.

tailwind.config.ts

import { tailwindExtend, aueraTw, SafeLists } from "auera-ui";
import type { Config } from "tailwindcss";


const config: Config = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/auera-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // Whitelist dynamic color classes.
  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], 
};

Then in your global.css or index.css, add this:

global.css

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

Inter font

AueraUI uses the Inter font by default. Add it to your project using Fontsource or via the Google Fonts CDN in CSS.

npm
yarn
pnpm
npm install @fontsource/inter

Then, import it in your project:

global.css

import "@fontsource/inter"

Using Google Web Fonts

If you prefer Google Fonts (CDN) instead of installing @fontsource/inter, include the following to your global.css.

global.css

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

Using Nextjs

On the other hand using Nextjs, you simply import Inter from next/font/google

layout.tsx

import { Inter } from "next/font/google";
    
const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  weight: ["400", "500", "600", "700", "800"],
});


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${inter.variable} antialiased`}
      >
       {/* ... */}
      </body>
    </html>
  );
}

Update the fontFamily inside your tailwind.config.ts

tailwind.config.ts

import { tailwindExtend, aueraTw, SafeLists } from "auera-ui";
import type { Config } from "tailwindcss";


const config: Config = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/auera-ui/**/*.{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: {
        // Add this to your fontFamily 
        inter: ["var(--font-inter)", "sans-serif"],
      },
    },
  },
  plugins: [aueraTw], 
};