Documentation
ChevronDown

Getting started

Welcome to the developer documentation for Aura Design System & Next Js. Tailored for building Garima's apps. Using the Aura like a space unit. Each object has a halo of light that surrounds it, it's Aura.

Before you start - Disclaimer

This library is CSS centric with Object-Oriented CSS (OOCSS) and Atomic Desing metodology.

Automatic Setup

Just use create-next-app, which sets up everything automatically for you. To create a project, run:

BASH
Copy Copy
npm install -g pnpm
BASH
Copy Copy
npx create-next-app my-awesome-next-aura --use-pnpm --example "https://github.com/garitma/aura-design-system/tree/canary/examples/next-base"

Manual installation

Inside your Next.js project directory, install Aura Desing System:

BASH
Copy Copy
npm i @aura-design/system

Use

JSX
Copy Copy
import "@aura-design/system/main.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

style.css exposes css via style field in package.json, will apply to all pages and components in your application.

If you want to change any aura token of Aura design to create your own theme, you can create a public/style.css and replace the aura tokens for whatever you want.

CSS
Copy Copy
/* ./styles/style.css */

*:root {
    --aura-accents-primary: #ff0
}

Then you should import your custom style in _app.js

JSX
Copy Copy
import "@aura-design/system/main.css";
import "@/styles/style.css";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;