Customization

Design

A guide on customizing AueraUI styles and Tailwind config to fit your app's design.

What is design without flexibility? That’s why AueraUI allows you to easily customize its default style variables, giving you complete control over your application’s look and feel.

Customizing

Basically, there are two ways to customize AueraUI components: one gives you full control, and the other is the more traditional approach.

Basic approach

This approach utilizes className or inline styles for a straightforward, customizable solution to modify components.

Let's override the default styles of the Button component.

App.tsx

import { Button, Stack } from "auera-ui";

export default function App() {
return (
  <Stack>
   <Button 
    flavour='neumorphic'
    className="relative rounded-full 
    hover:-translate-y-1 px-12 transition-transform
    shadow-[var(--auera-blue-900)_0px_6px_0px_inset,_rgba(9,11,11,0.1)
    _0px_-6px_10px_0px,_rgba(9,11,11,0.1)_0px_1px_2px_0px]" 
   >
    Click me
   </Button>
  </Stack>
)
}

This approach provides full control over component styles by ejecting default styles using AueraUI CLI. It allows you to modify or replace the underlying styles directly to achieve a completely custom design.

CLI

AueraUI comes with a CLI tool which provides an easy way to customize styles and configuration. Use the eject command to access and modify default styles or Tailwind's extended configuration.

How to Use the CLI

Run the Eject Command

Use the following command to view all available eject options:

npx auera-ui eject

You will be prompted to select what you want to eject:

What do you want to eject?
│  ● auera.css
│  ○ tailwind.extend.ts

Use Specific Eject Flags

Add the appropriate flag to the eject command to target specific files:

--css: Ejects the default auera.css file, allowing you to modify AueraUI's global styles.

npx auera-ui eject --css

--config: Ejects the tailwind.extend.ts file, enabling you to customize Tailwind's extended configuration.

npx auera-ui eject --config

Locate the Ejected Files

The --css flag generates the auera.css file, typically in a designated directory (e.g., src/styles/).
The --config flag generates the tailwind.extend.ts file, usually in the root directory.

Customize the Ejected Files

Open the ejected files and modify them as needed to suit your application’s design.

Example (`auera.css`):

auera.css

:root {
    /* Other variables  */
    --auera-text-color: #000;
    --auera-text-muted: var(--auera-slate-700);
    --auera-card-sh: rgba(0, 0, 0, 0.05); 
    background: #fff;
  }
  
  html[data-theme="dark"] {
    /* Other variables  */
    --auera-text-color: #fff;
    --auera-text-muted: #a1a1aa;
    --auera-card-sh: var(--auera-neutral-900);
    background: #000;
  }

Example (`tailwind.extend.ts`):

tailwind.extend.ts

export const tailwindExtend = {
  boxShadow: {...},
  borderColor: {...},
  backgroundColor: {...},
  colors: {...},
  transitionProperty: {...},
  keyframes: {...},
  animation: {...},
  dropShadow: {...}
}

Update import

After customizing, ensure the changes are reflected in your project by replacing the previously imported files with the ejected versions.

global.css

global.css

/* Replace this */
@import 'auera-ui/dist/auera.css';

/* With */
@import './auera.css';

tailwind.extend.ts

tailwind.config.ts

/* Replace this */
import { tailwindExtend } from "auera-ui";

/* With */
import { tailwindExtend } from "./tailwind.extend";

This process ensures flexibility and empowers you to take full control of your design, aligning with AueraUI’s focus on customization and adaptability.