Bela UI

AI Usage

Use Bela UI with AI coding tools while keeping notification components easy to extend.

Bela UI is designed to work well with AI coding tools. Because components are distributed as source code, AI assistants can easily understand, modify, and extend them.

Build a notification center using Bela UI.

Use:
- NotificationItem
- NotificationList

Preserve existing component APIs.
Follow shadcn/ui conventions.
Use TypeScript.

Modifying Components

Update the NotificationItem component from Bela UI.

Requirements:
- Add a priority badge
- Preserve existing props
- Maintain accessibility

Generating New Variants

Create a compact version of NotificationItem.

Keep the same API.
Reduce spacing and avatar size.

Best Practices

  • Reference component names explicitly
  • Preserve existing props when extending components
  • Follow shadcn/ui patterns
  • Keep generated code TypeScript-first

On this page