Quick Start
A step-by-step guide to quickly set up AueraUI.
AueraUI is a robust UI library that provides flexible, high-quality components. Built with Tailwind CSS and Motion , it offers a powerful toolkit for creating 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!
Install auera-ui
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
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.
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
Then in your global.css or index.css, add this:
global.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.
Then, import it in your project:
global.css
Using Google Web Fonts
If you prefer Google Fonts (CDN) instead of installing @fontsource/inter, include the following to your global.css.
global.css
Using Nextjs
On the other hand using Nextjs, you can simply import Inter from next/font/google
layout.tsx
Update the fontFamily inside your tailwind.config.ts
tailwind.config.ts