Guides

Justd Blocks Docs: Laravel

Learn how to seamlessly integrate and utilize Justd Blocks within the Laravel and Inertia.js to build interactive applications effortlessly.

Installation

The installation process is straightforward and easy to follow. Just follow the steps below to get started:

1
Initial setup

Run the following command in your terminal:

npx justd-cli@latest init

When you execute this command, you'll be guided through the process of selecting your desired framework. Since we’re using Laravel, choose Laravel from the options. You’ll then encounter a series of prompts; for this example, simply select "Yes" for all to proceed quickly.

? No setup project detected. Do you want to start a new project? (Y/n) Yes
? Which framework do you want to use? Laravel
? What is your project named? app
? Which testing framework do you want to use? Pest
? Do you want to use Tailwind version 4? (Y/n) Yes
? Do you want to use Prettier for this project? (Y/n) Yes
? Which package manager do you want to use? (Use arrow keys)
❯ Bun
Yarn
npm
pnpm

The project name defaults to app, but you can customize it to suit your preferences.

Once everything is configured correctly, you'll see an output similar to this:

✔ Creating Laravel project.
✔ Upgrading to Tailwind CSS v4.
✔ Setting up Prettier.
✔ Finishing.
 
Project setup is now complete.
Start your development server by running: `cd app && composer run dev`
 
Ready to customize your project?
Add new components by running: `npx justd-cli@latest add`

2
File and Folder

After completing the initial setup, your project structure will include several pre-configured features like authentication, thanks to the default Breeze setup with the Inertia.js React adapter. Additionally, you'll find a justd.json file in the root directory, as well as folders added by Justd, such as resources/js/Components/ui and resources/js/utils. The app.css file will also be updated to incorporate Justd variables and styles.

Here’s what Justd specifically includes: a providers.tsx, a theme-provider.tsx, and the ui folder containing index.ts and primitive.tsx.

resources/js/Components/
├── ...
├── providers.tsx
├── theme-provider.tsx
└── ui
    ├── index.ts
    └── primitive.tsx

3
Providers

Inside the Components folder, you'll find the providers.tsx and theme-provider.tsx files.

src/components
├── ...
├── providers.tsx
├── theme-provider.tsx
└── ui
    ├── index.ts
    └── primitive.tsx

To utilize the provider, import it into your resources/js/app.tsx file.

Loading source code...

4
Done

You're now ready to start creating your blocks.

Modify Login Page

If you open your project and navigate to /login, you'll notice a plain and unstyled login page. This happens because there’s no tailwind.config.js file. Don’t worry—since we’re using Tailwind CSS v4, it’s not required.

Now, let’s enhance the login page by using Justd components. Start by opening your terminal and adding the text-field, checkbox, and button components, as these are needed for the login page.

npx justd-cli@latest add checkbox button text-field

The output will look something like this:

✔ Checking.
✔ Installing dependencies.
✔ Created 5 files:
- resources/js/components/ui/checkbox.tsx
- resources/js/components/ui/field.tsx
- resources/js/components/ui/button.tsx
- resources/js/components/ui/text-field.tsx
- resources/js/components/ui/loader.tsx

You might wonder why five components are created even though we only added three. This happens because some components are interconnected and rely on one another.

Before proceeding further, update the tsconfig.json and vite.config.js files by modifying the ui key as shown below:

Loading source code...

Next, let’s update the login page. Open the resources/js/Pages/Auth/Login.tsx file and replace its content with the following code:

Loading source code...

For more details about using the CLI, please visit the CLI documentation.

Starter Kit

If you’d like to explore the Justd Starter Kit, visit the GitHub repository at justdlabs/inertia.ts. This repository offers a fully functional Laravel project with Justd pre-installed and configured, including a range of components and utilities.