Getting Started
Admin Panel
Settings
Search for a command to run...
Deep UI is DeepBuilder's Blade component layer in resources/views/components/deep/. Components are not Livewire classes; they work with Livewire via wire:model, wire:click, and $attributes.
dark: variantswire:loading| Component | Usage |
|---|---|
<x-deep.heading> | Page titles and subtitles |
<x-deep.card> | Content panels |
<x-deep.table> | Admin data tables |
<x-deep.tabs> | Tabbed settings (e.g. frontend sections) |
<x-deep.separator> | Visual divider |
<x-deep.callout> | Info/warning blocks |
<x-deep.badge> | Status chips |
<x-deep.pagination> | List pagination |
| Component | Usage |
|---|---|
<x-deep.button> | variant: primary, outline, danger; icon, iconTrailing |
<x-deep.input> | Text, password (viewable), descriptions |
<x-deep.textarea> | Multi-line fields |
<x-deep.select> | Native select styling |
<x-deep.checkbox> | Boolean fields |
<x-deep.switch> | Toggle settings |
<x-deep.radio> | Radio groups |
<x-deep.field> | Label + control wrapper |
<x-deep.label> | Standalone labels |
<x-deep.error> | Validation message |
<x-deep.editor> | Rich text (legal, blog, pages) |
<x-deep.otp> | One-time code inputs |
<x-deep.emoji-picker> | Emoji insertion |
<x-deep.icon-select> | Icon picker for CMS fields |
Example:
<x-deep.input
wire:model="site_name"
name="site_name"
:label="__('admin.settings_site_name')"
class="w-full"
/>
<x-deep.button variant="primary" wire:click="save">
{{ __('admin.save') }}
</x-deep.button>| Component | Usage |
|---|---|
<x-deep.modal> | Dialogs; bind open state with Livewire |
<x-deep.dropdown> | Action menus |
| Component | Usage |
|---|---|
<x-deep.toast> | Toast container (driven by App\Deep\Deep facade) |
use App\Deep\Deep;
Deep::toast(__('admin.users_update_success'), variant: 'success');| Component | Usage |
|---|---|
<x-deep.avatar> | Generic avatar |
<x-deep.user-avatar> | User profile image |
<x-deep.icon> | Heroicons by name (no heroicon- prefix in the name prop) |
resources/views/components/deep/button.blade.php to the same path (or publish to a theme folder)@props defaults so existing screens do not breakphp artisan view:clearwire:loading.attr="disabled" on destructive actions where needed@entangle sparingly; prefer wire:model.live on Deep UI inputsAdmin pages use #[Layout('components.layouts.admin')] which includes sidebar (SidebarComponent), header, and Deep UI toast stack.
For a full list of files, run:
ls resources/views/components/deep/