Components

Kompass ships a full set of Blade components for building admin interfaces. Every component accepts additional HTML attributes and is styled with Tailwind CSS — so you can drop them into any Livewire view and extend them with your own classes.

Form Components

Input

<x-kompass::form.input
    wire:model="fieldName"
    id="field-id"
    name="field-name"
    label="Field Label"
    type="text"
    placeholder="Enter value"
    disabled
/>

Prop	Type	Default	Description
wire:model	string	—	Livewire binding
label	string	—	Label text
type	string	text	Input type
disabled	bool	false	Disable input

Textarea

<x-kompass::form.textarea
    wire:model="description"
    id="description"
    label="Description"
    rows="4"
/>

Select

<x-kompass::form.select
    wire:model="selectedOption"
    id="select-id"
    :options="$options"
    placeholder="Select option"
    :searchable="true"
    label="Select Option"
/>

Prop	Type	Default	Description
options	array	—	[value => label] pairs
searchable	bool	false	Enable search

Input Error

Use input-error to display Livewire validation messages beneath a field:

<x-kompass::input-error for="fieldName" class="mt-2" />

Layout Components

Modal

Kompass uses Alpine.js event dispatching to open modals. Define the modal by name, then trigger it from any element:

<x-kompass::modal data="modalName" />

<button @click="$dispatch('open-modal', 'modalName')">Open</button>

Offcanvas

<x-kompass::offcanvas :w="'w-2/6'">
    <x-slot name="body"><!-- Content --></x-slot>
</x-kompass::offcanvas>

Action Message

Display a transient status message — for example after saving a record. Dispatch the event name from your Livewire component to show the message:

<x-kompass::action-message class="fixed bottom-8 right-8" on="status">
    <div><h4>Saved.</h4></div>
</x-kompass::action-message>

{{-- Trigger --}}
$this->dispatch('status');

Navigation Components

Nav Item

<x-kompass::nav-item href="/admin/pages" :active="$active" icon="tabler-layout">
    Pages
</x-kompass::nav-item>

Nav Item Group

Group related nav items under a collapsible label:

<x-kompass::nav-itemgroup label="Settings" icon="tabler-settings">
    <x-slot name="items">
        <x-kompass::nav-item href="/admin/settings/general">General</x-kompass::nav-item>
    </x-slot>
</x-kompass::nav-itemgroup>

Block Components

These components render the block editor UI. Use them inside your admin views to display and manage content blocks for a page:

<x-kompass::blocks :page="$page" :blocks="$blocks" />
<x-kompass::blocksgroup :item="$block" :loop="$loop" />
<x-kompass::blocksgroupsub :item="$childBlock" />

Media Components

The upload-image component handles image uploads with Livewire. Pass the current image path via :current to display an existing preview:

<x-kompass::upload-image wire:model="photo" :current="$user->profile_photo_path" />

Menu Components

<x-kompass::menu-profile :user="$user" />
<x-kompass::menugroup :menus="$menus" />
<x-kompass::menugroupsub :items="$menuItems" />

UI Components

Kompass provides primary and secondary button variants, a heading component, and a section title block:

<x-kompass::button wire:click="save" type="submit" class="btn-primary">Save</x-kompass::button>
<x-kompass::secondary-button wire:click="cancel">Cancel</x-kompass::secondary-button>
<x-kompass::heading :title="$page->title" :size="'text-2xl'" />

<x-kompass::section-title>
    <x-slot name="title">Section Title</x-slot>
    <x-slot name="description">Section description</x-slot>
</x-kompass::section-title>

Alert Components

Use banner for inline messages and config-notification for structured notices with a title and message body:

<x-kompass::banner :type="'success'">Message</x-kompass::banner>

<x-kompass::config-notification
    :type="'warning'"
    :title="'Update Required'"
    :message="'Please update your settings'"
/>

Icons

Kompass uses Tabler Icons via the secondnetwork/blade-tabler-icons package — both as direct <x-tabler-*> components and the dynamic <x-kompass::icon> helper.

See the dedicated Icons page for full usage.