# [Usage](../../usage.md) > UI basics and config

> Choose your path: use the base `<x-kfw::ui>` wrapper when you want the framework to render head assets, navbar, headbar and session messages for you; use the custom `<x-kfw::assets />` component when you bring your own layout and only need the CSS/JS injected. Details for each path are in Base vs Custom implementation below; visual tuning lives in [theming](theming.md), [logo](logo.md), [navigation](navigation.md) and [light/dark mode](dark_mode.md).

---
![image](img/basics_1.png)
![image](img/basics_2.png)
---

Ensure to run the command every time the K-Framework is installed or updated:

```bash
php artisan kfw:update
```

This will automatically:
- Publish all the assets
- Publish all the configs
- Renew the assets cache for all the clients
- Run all the migrations

### Base implementation  
You can directly implement the UI in your blade template:

```html
<x-kfw::ui>
   <!-- Your content here -->
</x-kfw::ui>
```
The `<x-kfw::ui>` tag will automatically include the head with all the CSS, JavaScript, the various assets, and also the navbar and the headbar with their menus and session messages. Then you can simply write HTML inside the container.

Is possible to create an UI automatically from a back-end function using a generic UI instance and passing the attributes to the view:

```php
public function index()
{
    $pageTitle = 'Index';
    $html = '';

    return view('kfw::ui.generic', compact('html', 'pageTitle'));
}
```

Where `$html` is the content of the UI, it can be simple HTML string or K-Framework components.

Or better again, you can just use the UI as a Blade component:
```php
public function index()
{
    return \KFramework\Components\UI\UI::make('Page title')
        ->setContent($html);
        
    // or using the schema:
    
    return \KFramework\Components\UI\UI::make('Page title')
        ->setSchema([
            'component 1',
            'component 2',
            ...
        ]);
}
```

**NOTE:** UI is a Blade component, and share the same attributes of all other UI components. So, if using the schema, you can decide its columns and so on.  

### Custom implementation

To ensure Laravel K-Framework works correctly, you must include the necessary assets in your HTML `<head>` section. Add the following code to your layout file (e.g., `resources/views/layouts/app.blade.php`):

```html
<x-kfw::assets />
```
This Blade component injects the required CSS, JavaScript, or other assets provided by the framework. Without this, certain features of Laravel K Framework may not work as expected.

example:
```html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Your description here">
        <meta name="author" content="Your name here">

        <title>{{ config('app.name', 'Laravel App - K-Framework') }}</title>
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">

        <x-kfw::assets />
    </head>
    <body>
        <!-- Your content here -->
    </body>
</html>
```

### Important notes for the assets

The K-Framework assets implements a system to automatically download them in the user browser cache, so they are downloaded only once and forever. This strongly increments the app load across various pages, transferring only the blade informations.

If you make any modifications to any CSS or JavaScripts, be sure to run the command:

```bash
php artisan kfw:refresh-assets
```

to renew the cache for all users and client when  they re-visit the application.

Is not necessary to include the `csrf-token` or the `app-locale` meta if `<x-kfw::assets />` is used, because they are included automatically.


---

## UI attributes

### `'pageTitle'` | `::make()` | `->setPageTitle()`
Set the page title, that will be displayed on top of the content. 
```html
<x-kfw::ui
    :pageTitle="'Page title'">
   <!-- Your content here -->
</x-kfw::ui>
```

```php
UI::make('Page title')
```

```php
UI::make()
    ->setPageTitle('Page title')
```

If PageTitle is null, the `$name` will be displayed, if empty then empty string.

| Types    | Default |
|----------|---------|
| `string` | `null`  |


### `'breadcrumb'`
The breadcrumb of the page, should be an array.
```html
<x-kfw::ui
    :breadcrumb="[]">
   <!-- Your content here -->
</x-kfw::ui>
```

```php
UI::make()
    ->setBreadCrumb([
    
    ])
```

If empty or null and no page title is set, it won't be displayed. When the breadcrumb is missing and a page title is present, a single unlinked entry named after the page title is generated automatically. The breadcrumb offers rapid navigation menu in the headbar on desktop and above the page title in the content on mobile.
The schema of the breadcrumb is:

```php
$breadcrumb = [
    ['First text', 'first url'],
    ['Second text', 'second url'],
    ['Third text without url']
    ...
];
```

The URL for each entry is optional, if not present will be displayed as normal text.  

| Types   | Default |
|---------|---------|
| `array` | `[]`    |


### `'disableNavbar'`
You can disable the side navigation by setting this attribute to `true`  

```html
<x-kfw::ui
    :disableNavbar="true">
   <!-- Your content here -->
</x-kfw::ui>
```

```php
UI::make()
    ->setDisableNavbar()
```

| Types     | Default |
|-----------|---------|
| `boolean` | `false` |


### `'disableGoBack'`
You can remove the "Go Back" link in the content part.  

```html
<x-kfw::ui
    :disableGoBack="true">
   <!-- Your content here -->
</x-kfw::ui>
```

```php
UI::make()
    ->setDisableGoBack()
```

| Types     | Default |
|-----------|---------|
| `boolean` | `false` |

---

See also: [theming](theming.md), [logo](logo.md), [navigation](navigation.md), [light/dark mode](dark_mode.md).