Skip to main content

​
UI Conventions

​
Tech Stack

  • UI Library: shadcn UI components or Radix UI directly
  • Language: TypeScript
  • Data Flow: Inertia.js (prefer Inertia forms over React Hook Form)

​
shadcn Component Additions

​
Button Component

The Button component has custom props: icon, iconLeft, iconRight, loading. Never add icons inside the Button itself - always use iconLeft and iconRight props. No sizing classes needed on the icon. 
// ✅ Good
<Button iconLeft={PlusIcon}>Add User</Button>

// ❌ Bad
<Button>
  <PlusIcon className="h-4 w-4" />
  Add User
</Button>

​
Modals

Use responsive-modal.tsx rather than dialog.tsx.

​
Tabs

Use tremor-tabs.tsx rather than tabs.tsx.

​
Laravel Additions

​
Toast Messages

Route macro for flashing toasts: 
redirect()->back()->withSuccess(__('User was created'));
Also available: withError, withWarning, withInfo.