- Documentation

Components

The design system provides a collection of reusable and customizable components to help you build consistent and efficient user interfaces. These components are available for import from the library, but the recommended approach is to follow the shadcn/ui convention by placing them in a components/ui directory. This allows for better customization and maintainability.

Key Features

Reusable Components: Prebuilt components like buttons, inputs, cards, and more.
Customizable: Components can be easily customized to fit your project's needs.
Best Practices: Follow the components/ui convention for better organization and scalability.
Default Aura Components: If you prefer to use the default styling, you can directly import and re-export components.

Importing Components

You can import components directly from the library, but the recommended approach is to follow the components/ui convention.

Direct Import (Not Recommended)

jsx

import Button from '@aura-design/system/button';

Recommended Approach: Using components/ui

Create a components/ui directory in your project.
Add the component files to this directory.
Customize the components as needed.

Example: Adding a Button Component

Create a file at components/ui/button.tsx.
Import the component from the library and re-export it:

jsx

// components/ui/Button.tsx
import AuraButton, { ButtonProps } from "@aura-design/system/button"

export default function Button ({...props}: ButtonProps) {
    return <AuraButton {...props} />
}

jsx

import { Button } from '@/components/ui/Button';

export default function Home() {
  return <Button>Click Me</Button>;
}

Customizing Components

To customize a component, copy it to the components/ui directory and modify it as needed.

jsx

// components/ui/Button.tsx
import AuraButton, { ButtonProps } from "@aura-design/system/button"

export default function Button ({className, ...props}: ButtonProps) {

    const classNameConnect: string[] = [
        "rounded-full",
        "font-medium",
        "shadow-sm",
        "ring-offset-white",
    ]

    if(className) {
        classNameConnect.push(className)
    }

    return <AuraButton {...props} className={classNameConnect.join(" ")} />
}

Using Ready-to-Use Components

You can quickly add ready-to-use components from the Aura Design System using the following command:

bash

pnpm dlx shadcn@latest add https://auradesignsystem.com/r/button.json

This command fetches the component configuration and installs it into your project, following the components/ui convention for easy customization and integration.