Installation

Aura UI follows the same code ownership model as shadcn/ui. Instead of installing a traditional component package, you add the components and blocks you need directly to your project.

The installed code becomes part of your application and can be customized to fit your design system and requirements.

Prerequisites

Before adding an Aura UI block, make sure your project meets the following requirements:

A supported React-based framework.
shadcn/ui configured in your project.
Aura Auth configured for your application.

Aura UI currently provides implementations for:

React
React Router
Next.js (App Router and Pages Router)

Aura Auth is responsible for authentication configuration. If you have not configured Aura Auth yet, complete its setup before adding Aura UI blocks.

Initialize your project

Initialize shadcn/ui if you haven't already. Aura UI uses the same registry and installation workflow.

npx shadcn@latest init

Refer to the shadcn/ui documentation if you need help configuring your project for your framework.

Add a component

Install any Aura UI component directly from the registry.

npx shadcn@latest add https://aura-stack-ui.vercel.app/r/sign-in-react.json

This command downloads the component source code and places it inside your project, allowing you to modify it as needed.

Use the component

Import the component into your application and render it like any other React component.

import { SignIn } from "@/components/sign-in-react"

export function LoginPage() {
  return <SignIn />
}

Choose your implementation

Aura UI blocks may provide different implementations depending on the framework you use.

Each block documents the available implementations and provides the installation command for each supported framework.