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

  1. Reusable Components: Prebuilt components like buttons, inputs, cards, and more.
  2. Customizable: Components can be easily customized to fit your project's needs.
  3. Best Practices: Follow the components/ui convention for better organization and scalability.
  4. 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

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

Example: Adding a Button Component

  1. Create a file at components/ui/button.tsx.
  2. 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(" ")} />
}
Components | Aura Design System