The main goal of this package is to help you focus on the actual development of your application - and not having to deal with UI/UX design.

It contains a variety of beautiful base components that you can easily implement into your Laravel Livewire project:

• Buttons
• Inputs
• Dropdowns
• more components coming soon

I know how hard it is to implement external libraries. That's why I wanted to make the installation as simple as possible so you can get started within 60 seconds.

Use Composer to install the package. It comes with everything you need:

composer require maskowlabs/basic-components

You should already know Vite. First, make sure that you have installed the scss preprocessor:

npm install -D sass-embedded

Now simply add the alias @basic-components to your vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
	...
	plugins: [...],
	resolve: {
		alias: {
			'@basic-components': path.resolve(__dirname, 'vendor/maskowlabs/basic-components/resources/assets'),
		},
	},
	...
});

Finally, you only need to import the basic-components.scss and basic-components.js file into your project:

Open your project's main scss file and paste this import statement:

@import "@basic-components/scss/basic-components";

Open your project's main js file and paste this import statement:

import '@basic-components/js/basic-components'

That's it! You've successfully saved yourself weeks of designing.

(Make sure you included your .scss and .js files with the Laravel Blade @vite([...]) method)

This package does not come with icons. However, you can easily use your preferred icon library.

You just have to adjust the "icon"-component. To do it, either publish the views of the component with:

php artisan vendor:publish --tag=basic-components-views

or re-create the blade icon file in:

/resources/views/vendor/basic-components/components/blade/icon.blade.php

This is the default content:

@props([
    'name' => false,
])

<i {{ $attributes->merge(['class' => $name]) }}></i>

No time for creating the basic structure? No problem. Use the predefined layouts in this package:

• Publish the Livewire config:

php artisan vendor:publish --tag=livewire:config

• Publish the basic-component layouts:

php artisan vendor:publish --tag=basic-components:layouts

• Adjust the Livewire config:

'layout' => 'vendor.basic-components.layouts.blank'