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

npx create-next-app my-awesome-next-aura --use-npm --example "https://github.com/garitma/aura-design-system/tree/main/examples/next-base"

Manual installation

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

BASH

npm i aura-design

Use

JSX

import "aura-design/style.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

/* ./public/style.css */

*:root {
    --aura-font-stack: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
		--aura-font-quotes: serif;
		--aura-snow: #fafafa;
		--aura-purple: #e8ebfe;
		--aura-white: #fff;
		--aura-black: #000;
		--aura-orange: #feefe8;
		--aura-orange-rose: #fee8ef;
		--aura-pink: #fee8fc;
		--aura-pink-purple: #f3e8fe;
		--aura-blue: #e8f7fe;
		--aura-teal-green: #e8fef7;
		--aura-green: #e8feea;
		--aura-lemon-green: #f3fee8;
		--aura-yellow: #fefbe8;
		--aura-cold-grey: #e8e7ed;
		--aura-grey: #f6f7f9;
		--aura-bg: var(--aura-white);
		--aura-text-primary: #030303;
		--aura-text-primary-inverse: #fff;
		--aura-accents-4: #7171b3;
		--aura-accents-3: #9191c4;
		--aura-accents-2: #b0b0d5;
		--aura-accents-1: #ededf5;
		--aura-accents-0: #fafafa;
		--aura-module: var(--aura-accents-0);
		--aura-accents-primary: var(--aura-black);
		--aura-accents-secondary: #0882ba;
		--aura-accents-success: #045d3c;
		--aura-accents-success-bg: var(--aura-teal-green);
		--aura-accents-info: #0927ec;
		--aura-accents-info-bg: var(--aura-purple);
		--aura-accents-warning: #5d5104;
		--aura-accents-warning-bg: var(--aura-yellow);
		--aura-accents-danger: #8e3106;
		--aura-accents-danger-bg: var(--aura-orange);
		--aura-accents-radius: var(--aura-radius);
		--aura-input-radius: 6.5px;
		--aura-button-radius: 6.5px;
		--aura-input-bg: #f0f0f7;
		--aura-input-placeholder-color: rgba(0,0,0,0.2);
		--aura-radius: 13px;
		--aura-opacity: .5;
		--aura-outline: #5b6987;
		--aura-button-hover: #323232;
		--aura-link: var(--aura-text-primary);
		--aura-link-hover: var(--aura-accents-1);
		--aura-selector: #d1fdef;
		--aura-loader: #d1fdef;
		--aura-sprite: url("/sprite_glyphs.png");
}

Then you should import your custom style in _app.js

JSX

import "aura-design/style.css";
import "public/style.css";

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

export default MyApp;