Laravel Breeze Chakra CLI

Replaces the Laravel Breeze React install with Chakra UI.

Usage

Simply scaffold a new breeze application using the react stack, then run this cli tool.

composer create-project laravel/laravel myapp
cd myapp
composer require laravel/breeze
php artisan breeze:install react
npx laravel-breeze-chakra@latest install

It does not support SSR at this time due to a bug in Chakra's module exports.

Components

Checkout the src/stubs folder to view all the generated files

Here are a few helpers available to you

useRoute()

Source

Gives you access to a typed version of ziggy-js

import useRoute from '@/hooks/useRoute';

function Component() {
  const route = useRoute();
  
  return <a href={route('login')}>Login</a>;
}

useTypedPage()

Source

Gives you access to a typed version of usePage() from inertia

The type is prefilled with the shared props that jetstream passes through and gives you the option to pass your own type if your page has custom props in addition to the others

import useTypedPage from '@/hooks/useTypedPage';

function Component() {
  const { props } = useTypedPage<{ canViewThisPage: boolean; }>();
  
  // our custom type is hinted here as well 
  // as the inertia global props such as `auth.user`
  const { canViewThisPage, auth } = props;
}

Building Locally

I had issues with using npm link so I have opted for these steps instead.

First install dependencies and run the build script

npm install
npm build

Then create a fresh laravel install with breeze

composer create-project laravel/laravel myapp
cd myapp
composer require laravel/breeze
php artisan breeze:install react

Finally run the locally built version of laravel-breeze-chakra

# from inside the "myapp" directory
# find wherever you cloned the laravel-breeze-chakra repo
../laravel-breeze-chakra/bin/run install