Install Aura Design System with Next.js

Setting up Tailwind CSS in a Next.js project with Aura Design System.

Create your project

Start by setting up a new Next.js project if you haven’t already. The most common method is to use Create Next App.

bash
pnpm dlx create-next-app@latest my-app

Enter to the root of the project cd my-app

bash
pnpm dlx @aura-design/cli init

Explanation:

  • pnpm dlx: Executes a package directly from the npm registry without installing it globally.
  • create-next-app: Sets up a new Next.js project with your chosen configurations.
  • @aura-design/cli init: Initializes Aura-specific configurations within your project. Under the hood, this command leverages shadcn's component architecture while adding custom configurations.

Following these steps will set up a Next.js project with Aura Design System, allowing you to start building your application with pre-styled, consistent components.

In summary: The provided commands streamline the setup. First, a Next.js project is generated. Then, Aura's styling and theme are incorporated through the shadcn registry. Finally, Aura-specific configurations are applied, culminating in a Next.js project ready for development with Aura Design System.

Installation | Aura Design System