This is a setup for Laravel with Inertia.js, if you aren't using Inertia in Laravel. You may use this guide instead.
Make sure you have Laravel Installer installed, if not, run this command first.
composer global require laravel/installerRun the laravel new --react command to create a new Laravel project with Inertia React or :
laravel new my-app --reactBy default, Laravel will use original Shadcn UI components. Replace them with HQ UI components manually.
Both Shadcn UI and HQ UI use similar css variables, so you can keep the resources/css/app.css file.
First, add the HQ UI in your components.json:
...
"registries": {
"@hq": "https://hq-ui.vercel.app/r/{name}"
}You can now start adding components to your project.
npx shadcn add @hq/button
Or if you don't wan't to modify components.json, you can use this command
npx shadcn add https://hq-ui.vercel.app/r/button
React Aria components such as Link, Menu, Tabs, and Table transform elements into clickable links that navigate when clicked. These components utilize the href prop to render as an <a> tag, supporting attributes like target and download.
To integrate with Inertia.js, you must first declare it in your .d.ts file, such as in resources/js/types/global.d.ts.
import type { VisitOptions } from '@inertiajs/core'
declare module 'react-aria-components' {
interface RouterConfig {
routerOptions: VisitOptions
}
}Create new file called client-provider in resources/js/components
import { router } from '@inertiajs/react'
import type { PropsWithChildren } from 'react'
import { RouterProvider } from 'react-aria-components'
export function ClientProvider({ children }: PropsWithChildren) {
return (
<RouterProvider navigate={(to, options) => router.visit(to, options as any)}>
{children}
</RouterProvider>
)
}Then wrap your app with ClientProvider in resources/js/app.tsx
import { createInertiaApp } from '@inertiajs/react'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import '../css/app.css'
import { ClientProvider } from '@/components/client-provider'
import { initializeTheme } from '@/hooks/use-appearance'
const appName = import.meta.env.VITE_APP_NAME || 'Laravel'
createInertiaApp({
title: (title) => (title ? `${title} - ${appName}` : appName),
resolve: (name) =>
resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
setup({ el, App, props }) {
const root = createRoot(el)
root.render(
<StrictMode>
<ClientProvider>
<App {...props} />
</ClientProvider>
</StrictMode>,
)
},
progress: {
color: '#4B5563',
},
})
initializeTheme()If you using SSR, wrap your app with ClientProvider in resources/js/ssr.tsx
import { createInertiaApp } from '@inertiajs/react'
import createServer from '@inertiajs/react/server'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import ReactDOMServer from 'react-dom/server'
import { ClientProvider } from '@/components/client-provider'
const appName = import.meta.env.VITE_APP_NAME || 'Laravel'
createServer((page) =>
createInertiaApp({
page,
render: ReactDOMServer.renderToString,
title: (title) => (title ? `${title} - ${appName}` : appName),
resolve: (name) =>
resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
setup: ({ App, props }) => {
return (
<ClientProvider>
<App {...props} />
</ClientProvider>
)
},
}),
)