Getting Started
Admin Panel
Search for a command to run...
Deep UI is Deeplancer's custom component library built with Blade and Tailwind CSS. All UI components are located in resources/views/components/deep/ and provide consistent, themeable interfaces across the platform.
Deep UI components are Blade components, not Livewire. They work seamlessly with Livewire through standard attributes like wire:model and wire:click.
Key Features:
All Deep UI components follow a consistent structure:
@props([
'variant' => 'default',
'size' => 'base',
// ... other props
])
@php
// Build classes based on props
$classes = buildClasses($variant, $size);
@endphp
<div {{ $attributes->merge(['class' => $classes]) }}>
{{ $slot }}
</div>Props System:
@props directive for configuration$attributes for flexibilityLocation: resources/views/components/deep/button.blade.php
Usage:
<x-deep.button variant="primary">Save</x-deep.button>
<x-deep.button variant="outline" icon="plus">Add</x-deep.button>
<x-deep.button variant="danger" wire:click="delete">Delete</x-deep.button>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | primary, filled, outline, danger, warning, ghost, subtle | outline | Button style variant |
size | xs, sm, base | base | Button size |
icon | string | null | Leading icon name |
iconTrailing | string | null | Trailing icon name |
type | string | button | Button type attribute |
href | string | null | If provided, renders as <a> tag |
loading | boolean | true | Show loading state on wire:click |
square | boolean | false | Square button (equal width/height) |
Variants:
primary - Accent color, primary actionsfilled - Solid background, secondary actionsoutline - Bordered, default styledanger - Red, destructive actionswarning - Yellow, warning actionsghost - Minimal, hover effect onlysubtle - Very minimal, subtle actionsLoading States:
Buttons automatically show loading indicators when wire:click is present:
<x-deep.button wire:click="save">Save</x-deep.button>Loading state is handled automatically via wire:loading directive.
Location: resources/views/components/deep/input.blade.php
Usage:
<x-deep.input wire:model="name" label="Name" />
<x-deep.input type="email" wire:model="email" icon="envelope" />
<x-deep.input type="password" wire:model="password" viewable />
<x-deep.input wire:model="amount" prefix="$" suffix="USD" />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | null | Input name (auto-detected from wire:model) |
label | string | null | Label text |
description | string | null | Helper text below input |
type | string | text | Input type (text, email, password, etc.) |
variant | outline, filled | outline | Input style variant |
icon | string | null | Leading icon name |
iconTrailing | string | null | Trailing icon name |
viewable | boolean | false | Show/hide password toggle (for password type) |
copyable | boolean | false | Add copy to clipboard button |
clearable | boolean | false | Add clear button |
prefix | string | null | Text prefix (e.g., "$") |
suffix | string | null | Text suffix (e.g., "USD") |
placeholder | string | null | Placeholder text |
Features:
Location: resources/views/components/deep/textarea.blade.php
Usage:
<x-deep.textarea wire:model="description" label="Description" />
<x-deep.textarea wire:model="content" maxlength="500" />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | null | Textarea name (auto-detected from wire:model) |
label | string | null | Label text |
description | string | null | Helper text |
maxlength | number | null | Maximum character length (shows counter) |
error | string | null | Custom error message |
Location: resources/views/components/deep/select.blade.php
Usage:
{{-- Native select --}}
<x-deep.select wire:model="category" label="Category">
<option value="">Select...</option>
<option value="1">Category 1</option>
</x-deep.select>
{{-- Listbox with search --}}
<x-deep.select wire:model="category" variant="listbox" searchable label="Category">
<option value="1" data-text="Category 1">Category 1</option>
<option value="2" data-text="Category 2">Category 2</option>
</x-deep.select>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | null | Select name (auto-detected from wire:model) |
label | string | null | Label text |
description | string | null | Helper text |
variant | default, listbox | default | default = native select, listbox = custom dropdown |
searchable | boolean | false | Enable search in listbox variant |
multiple | boolean | false | Multiple selection support |
placeholder | string | Select an option | Placeholder text |
inline | boolean | true | Compact mode |
align | left, right | left | Dropdown alignment |
placement | null, top, bottom | null | Dropdown placement (null = auto) |
maxHeight | number | 240 | Max dropdown height in pixels |
Listbox Variant:
The listbox variant provides a custom dropdown with:
Option Attributes:
For listbox variant, use data-text attribute:
<option value="1" data-text="Display Text">Display Text</option>Location: resources/views/components/deep/checkbox.blade.php
Usage:
<x-deep.checkbox wire:model="agree" label="I agree" />
<x-deep.checkbox wire:model="options" value="option1" label="Option 1" />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | null | Checkbox name (auto-detected from wire:model) |
label | string | null | Label text (or use slot) |
description | string | null | Helper text below label |
error | string | null | Custom error message |
Location: resources/views/components/deep/radio.blade.php
Usage:
<x-deep.radio wire:model="option" value="1" label="Option 1" />
<x-deep.radio wire:model="option" value="2" label="Option 2" />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | null | Radio name (auto-detected from wire:model) |
label | string | null | Label text (or use slot) |
description | string | null | Helper text below label |
value | string | null | Radio value |
Location: resources/views/components/deep/switch.blade.php
Usage:
<x-deep.switch wire:model="enabled" label="Enable feature" />
<x-deep.switch wire:model="notifications" label="Notifications" align="left" />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | null | Switch name (auto-detected from wire:model) |
label | string | null | Label text |
description | string | null | Helper text below label |
align | left, right | right | Label alignment |
Location: resources/views/components/deep/label.blade.php
Usage:
<x-deep.label for="name">Name</x-deep.label>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
for | string | null | Input ID to associate with |
error | boolean | false | Show error styling |
Location: resources/views/components/deep/description.blade.php
Usage:
<x-deep.description>Helper text here</x-deep.description>No props - just displays slot content as helper text.
Location: resources/views/components/deep/error.blade.php
Usage:
<x-deep.error name="email" />
<x-deep.error name="email" message="Custom error" />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Field name (shows Livewire validation error) |
message | string | null | Custom error message (overrides validation) |
Location: resources/views/components/deep/card.blade.php
Usage:
<x-deep.card title="Card Title">
Content here
</x-deep.card>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | null | Card title |
titleIcon | boolean | true | Show accent dot icon with title |
Location: resources/views/components/deep/modal.blade.php
Usage:
<x-deep.modal wire:model="showModal" title="Confirm">
<p>Are you sure?</p>
<x-slot:footer>
<x-deep.button wire:click="confirm">Confirm</x-deep.button>
</x-slot:footer>
</x-deep.modal>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
wire:model | boolean | - | Boolean property for open/close state |
title | string | null | Modal title |
description | string | null | Modal description |
size | sm, md, lg, xl, full | md | Modal size |
closeable | boolean | true | Show close button |
Slots:
footer - Footer actionsLocation: resources/views/components/deep/table.blade.php
Usage:
<x-deep.table title="Users" subtitle="Manage users" :createRoute="route('admin.users.create')">
<x-slot:header>
<th data-deep-sort>Name</th>
<th data-deep-sort>Email</th>
</x-slot:header>
<x-slot:body>
@foreach($users as $user)
<tr>
<td data-deep-sort-value="{{ $user->name }}">{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@endforeach
</x-slot:body>
<x-slot:pagination>
{{ $users->links() }}
</x-slot:pagination>
</x-deep.table>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | null | Table title |
subtitle | string | null | Table subtitle |
icon | string | null | Title icon |
createRoute | string | null | Create button route |
Slots:
header - Table header rowbody - Table body rowspagination - Pagination linksactions - Action buttons in headerFeatures:
data-deep-sort to <th>)Location: resources/views/components/deep/tabs.blade.php
Usage:
<x-deep.tabs variant="pills">
<x-deep.tab name="tab1" label="Tab 1">Content 1</x-deep.tab>
<x-deep.tab name="tab2" label="Tab 2">Content 2</x-deep.tab>
</x-deep.tabs>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | null, pills, segmented | null | Tab style variant |
size | sm, base | base | Tab size |
scrollable | boolean | true | Enable horizontal scrolling |
Variants:
null - Border-bottom style (default)pills - Pill-shaped tabssegmented - Segmented control styleLocation: resources/views/components/deep/dropdown.blade.php
Usage:
<x-deep.dropdown align="right" width="w-40">
<x-slot:trigger>
<x-deep.button>Menu</x-deep.button>
</x-slot:trigger>
<div class="py-1">
<a href="#" class="block px-4 py-2">Item 1</a>
<a href="#" class="block px-4 py-2">Item 2</a>
</div>
</x-deep.dropdown>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
align | left, right | right | Dropdown alignment |
width | string | w-40 | Dropdown width (Tailwind class) |
Slots:
trigger - Button/element that opens dropdownLocation: resources/views/components/deep/pagination.blade.php
Usage:
<x-deep.pagination :paginator="$items" />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
paginator | LengthAwarePaginator | - | Laravel paginator instance |
Features:
Location: resources/views/components/deep/heading.blade.php
Usage:
<x-deep.heading>Page Title</x-deep.heading>No props - displays slot content as heading.
Location: resources/views/components/deep/separator.blade.php
Usage:
<x-deep.separator />
<x-deep.separator vertical />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
vertical | boolean | false | Vertical separator |
Location: resources/views/components/deep/badge.blade.php
Usage:
<x-deep.badge variant="success">Active</x-deep.badge>
<x-deep.badge variant="primary" size="sm">New</x-deep.badge>Props:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default, primary, success, danger, warning, info | default | Badge color variant |
size | xs, sm, base | sm | Badge size |
Variants:
default - Gray backgroundprimary - Accent colorsuccess - Greendanger - Redwarning - Yellowinfo - BlueLocation: resources/views/components/deep/avatar.blade.php
Usage:
<x-deep.avatar src="/path/to/image.jpg" name="John Doe" />
<x-deep.avatar name="Jane Smith" size="lg" color="auto" />
<x-deep.avatar icon="user" size="md" />Props:
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | null | Image source URL |
name | string | null | Name (generates initials) |
initials | string | null | Custom initials |
icon | string | null | Icon name (fallback if no src/name) |
size | xs, sm, md, lg, xl, 2xl, 3xl | md | Avatar size |
color | string, auto | null | Background color (auto generates from name) |
circle | boolean | false | Circular avatar |
tooltip | string, boolean | null | Tooltip text (true = use name) |
badge | string, boolean | null | Badge content |
badgeColor | string | null | Badge color |
badgeCircle | boolean | false | Circular badge |
badgePosition | string | bottom right | Badge position |
href | string | null | Render as link |
user | User | null | User model (for online status) |
showOnline | boolean | false | Show online status badge |
Location: resources/views/components/deep/tag.blade.php
Usage:
<x-deep.tag>Tag Name</x-deep.tag>No props - displays slot content as tag.
Deep UI uses CSS variables for theming. Variables are set in theme settings:
--color-accent: #your-color;
--color-accent-foreground: #your-text-color;How it works:
var(--color-accent) for primary colorsCustomization:
Deep UI components work seamlessly with Livewire:
Wire Model:
<x-deep.input wire:model="name" />
<x-deep.input wire:model.live="search" />
<x-deep.input wire:model.debounce.500ms="query" />Wire Click:
<x-deep.button wire:click="save">Save</x-deep.button>
<x-deep.button wire:click="delete({{ $id }})">Delete</x-deep.button>Loading States: Buttons automatically show loading indicators:
<x-deep.button wire:click="process" wire:loading.attr="disabled">
Process
</x-deep.button>Wire Navigate:
<x-deep.button href="/page" wire:navigate>Go</x-deep.button>Icon Component:
<x-deep.icon name="user" />
<x-deep.icon name="arrow-right" class="w-5 h-5" />Icon Names:
Icons use Heroicons but without the heroicon- prefix. Available icons:
user, users, home, settingsplus, minus, x-mark, checkarrow-left, arrow-right, arrow-up, arrow-downeye, eye-slash, document-duplicateloading (spinner)Custom Icons:
Icons are mapped in resources/views/components/deep/icon.blade.php. Add custom icons by extending this component.
Override a Component:
resources/views/components/deep/Example:
{{-- resources/views/components/deep/button.blade.php --}}
@props([...])
{{-- Your custom implementation --}}
<button {{ $attributes }}>
{{ $slot }}
</button>Extend Functionality: Add new props, variants, or features by copying and modifying components. Maintain the same API for consistency.
Do:
Don't:
Available components in resources/views/components/deep/:
Form Components:
button, input, textarea, selectcheckbox, radio, switchlabel, description, errorfield, file-upload, file-itemLayout Components:
card, modal, dropdown, dropdown-menutable, tabs, separatorheading, breadcrumbsDisplay Components:
avatar, user-avatar, badge, tagicon, icon-selectpagination, toastAdvanced Components:
editor, emoji-picker, otpEach component is self-contained and documented in its Blade file. Check the component file for detailed props and usage examples.