### FlowBite UI Configuration Example
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
An example of the `config/flowbite-ui.php` file, demonstrating how to configure prefixes, themes, component defaults (size, color, variant, padding, shadow), and Livewire auto-discovery settings.
```php
// config/flowbite-ui.php
return [
'prefix' => 'flowbite',
'theme' => [
'default' => 'light',
'available' => ['light', 'dark'],
],
'components' => [
'button' => [
'default_size' => 'md',
'default_color' => 'blue',
'default_variant' => 'solid',
],
'input' => [
'default_size' => 'md',
'default_color' => 'gray',
],
'card' => [
'default_padding' => 'p-6',
'default_shadow' => 'shadow-sm',
],
],
'livewire' => [
'auto_discover' => true,
'namespace' => 'QuickPanel\FlowBiteUI\Components',
],
];
```
--------------------------------
### Install FlowBite UI Package with Composer
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Installs the FlowBite UI package as a local repository using Composer and updates dependencies. This is the initial step to integrate the UI library into your Laravel project.
```bash
composer require quickpanel/flowbite-ui
composer update
```
--------------------------------
### Blade Input Component Examples
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Demonstrates various configurations for the Blade input component, including different input types, labels, placeholders, states (required, disabled, error), sizes, and colors. These examples showcase the flexibility of the component for different form field requirements.
```blade
{{-- Basic text input --}}
{{-- Email input with wire:model --}}
{{-- Password input with error state --}}
{{-- Number input with custom size --}}
{{-- Disabled input with value --}}
```
--------------------------------
### Install FlowBite UI Package with Composer
Source: https://github.com/aliqasemzadeh/flowbite-ui/blob/main/README.md
Installs the QuickPanel FlowBite UI package by updating the project's Composer dependencies. This command assumes the package is already configured as a local repository in composer.json.
```bash
composer update
```
--------------------------------
### Usage of FlowBite UI Livewire Components
Source: https://github.com/aliqasemzadeh/flowbite-ui/blob/main/README.md
Illustrates the integration and usage of FlowBite UI components within Livewire for interactive features. Examples cover buttons, inputs, cards, and alerts, demonstrating Livewire event handling and data binding.
```html
Card content here...
```
--------------------------------
### Blade Card Component Examples
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Showcases the usage of the Blade card component with various configurations. Examples include basic cards with headers and footers, elevated and outlined variants, filled cards with custom padding, and cards with a glass morphism effect, demonstrating different styling and layout options.
```blade
{{-- Basic card with header and footer --}}
This is the card content with user information.
Additional details can be added here.
{{-- Elevated card variant --}}
Users: 1,234
Orders: 567
Revenue: $12,345
{{-- Outlined card --}}
Important Notice
This card has a prominent border outline.
{{-- Filled card with custom padding --}}
This card has a filled background.
{{-- Glass effect card --}}
This card has a glass morphism effect with backdrop blur.
```
--------------------------------
### Usage of FlowBite UI Blade Components
Source: https://github.com/aliqasemzadeh/flowbite-ui/blob/main/README.md
Demonstrates how to use various FlowBite UI components within Blade views. This includes examples for buttons, input fields, cards, and alerts, showcasing their attributes and basic structure.
```blade
Click Me
Card content goes here...
```
--------------------------------
### Livewire Button Component Integration
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Shows how to use the button component within a Livewire application. Includes a Livewire component class example (`UserForm`) with a `handleSubmit` method and a Blade view demonstrating the usage of the `` tag with various attributes.
```php
// In your Livewire component class
namespace App\Livewire;
use Livewire\Component;
class UserForm extends Component
{
public function handleSubmit()
{
// Process form submission
$this->dispatch('form-submitted', ['status' => 'success']);
}
public function render()
{
return view('livewire.user-form');
}
}
```
```blade
{{-- In your Blade view --}}
```
--------------------------------
### Flowbite Blade Alert Component Examples
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This snippet provides examples of the Flowbite Blade Alert component, illustrating various types ('info', 'success', 'warning', 'error', 'danger', 'dark'), states (dismissible, bordered), sizes ('md', 'lg'), and icon usage. It also shows how to use slots for custom content within an alert, offering flexibility in message presentation.
```blade
{{-- Info alert --}}
{{-- Success alert with border --}}
{{-- Warning alert --}}
{{-- Error alert dismissible --}}
{{-- Danger alert large --}}
{{-- Dark alert without icon --}}
{{-- Alert with custom content using slot --}}
Thank you for joining our platform.
- Complete your profile
- Explore features
- Connect with others
```
--------------------------------
### Flowbite Badge Component Blade Examples
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This snippet provides a comprehensive set of examples for using the Flowbite Badge component in Blade. It covers basic usage, different types (info, success, warning, error, danger, dark), and various configurations like adding icons, pill shapes, borders, dismissible functionality, and different sizes. It also shows how to use slot content for badges.
```blade
{{-- Basic badge --}}
{{-- Badge with different types --}}
{{-- Badge with icon --}}
{{-- Pill-shaped badge --}}
{{-- Badge with border --}}
{{-- Dismissible badge --}}
{{-- Large badge without icon --}}
{{-- Badge with slot content --}}
4 new messages
```
--------------------------------
### Flowbite Alert Component Blade Examples
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This snippet showcases various ways to use the Flowbite Alert component within Blade templates. It demonstrates how to render alerts with different types (info, success, warning, error, danger, dark) and sizes (sm, md, lg). The examples highlight the component's flexibility in displaying notifications.
```blade
{{-- All alert types --}}
Info alert
Success alert
Warning alert
Error alert
Danger alert
Dark alert
{{-- All alert sizes --}}
```
--------------------------------
### Flowbite UI Badge Component Examples (Blade)
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Demonstrates various ways to use the Flowbite UI badge component, including different sizes, types, and feature combinations like borders, pill shapes, icons, and dismissibility.
```blade
{{-- All badge sizes --}}
{{-- Badge combinations --}}
```
--------------------------------
### Flowbite UI Service Provider Auto-Discovery (PHP/JSON)
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Shows how the Flowbite UI package is automatically registered in Laravel via composer.json's extra.laravel.providers configuration. The service provider handles essential setup tasks for the package.
```json
{
"extra": {
"laravel": {
"providers": [
"QuickPanel\FlowBiteUI\QuickPanelFlowBiteUIServiceProvider"
]
}
}
}
```
```php
// The service provider handles:
// 1. Config file registration and publishing
// 2. Views loading and publishing
// 3. Blade anonymous component path registration
// 4. Livewire component auto-discovery
```
--------------------------------
### FlowBite UI Button Color Options
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Illustrates the available color options for the FlowBite UI button component when using the 'solid' variant. This example displays buttons in various colors to show their appearance.
```blade
// Variants: solid, outline, ghost, gradient, shadow
// Colors: blue, gray, green, red, yellow, purple, pink, indigo, teal
// Sizes: xs, sm, md, lg, xl
// Types: button, submit, reset
// Example: All button colors with solid variant
Blue
Gray
Green
Red
Yellow
Purple
Pink
Indigo
Teal
```
--------------------------------
### Livewire Form Component with Input Integration
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Illustrates the integration of custom input components within a Livewire component for building dynamic forms. It includes defining validation rules, handling input updates, and dispatching events. This setup allows for real-time validation and a seamless user experience.
```php
// In your Livewire component
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\On;
class RegistrationForm extends Component
{
public $username = '';
public $email = '';
public $password = '';
protected $rules = [
'username' => 'required|min:3|max:255',
'email' => 'required|email|unique:users,email',
'password' => 'required|min:8',
];
public function updatedUsername()
{
$this->validateOnly('username');
}
public function updatedEmail()
{
$this->validateOnly('email');
}
#[On('input-updated')]
public function handleInputUpdated($value)
{
// Handle the input-updated event dispatched by Input component
logger()->info('Input value changed:', ['value' => $value]);
}
public function register()
{
$this->validate();
// Process registration
}
public function render()
{
return view('livewire.registration-form');
}
}
```
```blade
{{-- In your Blade view --}}
Register
```
--------------------------------
### Flowbite Card Component Variants and Shadow Options
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This code snippet showcases different visual variants and shadow depths for the Flowbite Card component using Blade. It demonstrates 'default', 'elevated', 'outlined', 'filled', and 'glass' variants, alongside various shadow sizes from 'sm' to '2xl'. Each example illustrates how to apply these styles to customize the card's appearance.
```blade
{{-- All available card variants --}}
{{-- Default variant --}}
Standard white background with subtle shadow
{{-- Elevated variant --}}
Enhanced elevation with larger shadow
{{-- Outlined variant --}}
Prominent 2px border outline
{{-- Filled variant --}}
Subtle gray background fill
{{-- Glass variant --}}
Semi-transparent with backdrop blur
{{-- Shadow options: none, sm, md, lg, xl, 2xl --}}
Maximum shadow depth
```
--------------------------------
### Publish FlowBite UI Configuration File
Source: https://github.com/aliqasemzadeh/flowbite-ui/blob/main/README.md
Publishes the configuration file for the FlowBite UI package, allowing for customization of component settings. This command uses the Artisan vendor:publish command with a specific service provider and tag.
```bash
php artisan vendor:publish --provider="QuickPanel\FlowBiteUI\QuickPanelFlowBiteUIServiceProvider" --tag="config"
```
--------------------------------
### Publish FlowBite UI Configuration and Views
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Publishes the configuration file to `config/flowbite-ui.php` and the views for customization. This allows developers to modify default behaviors and component templates.
```bash
php artisan vendor:publish --provider="QuickPanel\FlowBiteUI\QuickPanelFlowBiteUIServiceProvider" --tag="config"
php artisan vendor:publish --provider="QuickPanel\FlowBiteUI\QuickPanelFlowBiteUIServiceProvider" --tag="views"
```
--------------------------------
### Manual Livewire Component Registration for Flowbite UI (PHP)
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Provides instructions for manually registering Livewire components from Flowbite UI when auto-discovery is disabled in the configuration. This involves using `Livewire::component` within the application's service provider.
```php
// If you disable auto_discover in config
// config/flowbite-ui.php
'livewire' => [
'auto_discover' => false,
],
// Register components manually in AppServiceProvider
use Livewire\Livewire;
use QuickPanel\FlowBiteUI\Components\Button;
use QuickPanel\FlowBiteUI\Components\Input;
public function boot()
{
Livewire::component('custom-button', Button::class);
Livewire::component('custom-input', Input::class);
}
```
--------------------------------
### Blade Button Component Usage
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Demonstrates various ways to use the Blade button component, showcasing different variants (solid, outline, ghost, gradient, shadow), colors, sizes, icon positions, and states like disabled and loading. It also shows how to integrate with Livewire's `wire:click`.
```blade
{{-- Basic solid button --}}
Click Me
{{-- Outline button with different colors --}}
Submit Form
{{-- Ghost button with icon --}}
Delete
{{-- Gradient button with custom attributes --}}
Get Started
{{-- Disabled button with loading state --}}
Processing...
{{-- Shadow button with wire:click --}}
Save Changes
```
--------------------------------
### Livewire Dynamic Form View with Flowbite Components (Blade)
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This Blade template renders a dynamic form using Livewire and Flowbite UI components. It iterates through defined fields to create input elements and includes buttons for submission and reset. It also uses a livewire alert component.
```blade
{{-- resources/views/livewire/dynamic-form.blade.php --}}
```
--------------------------------
### Livewire Card Component with Collapse Functionality
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This snippet demonstrates how to implement a collapsible card component using Livewire in PHP. It includes event handling for card toggles and methods to collapse or expand all cards from a parent component. The `handleCardToggled` method logs the toggle event, while `collapseAllCards` and `expandAllCards` dispatch events to control card states. The Blade view shows how to integrate these components and control them via buttons.
```php
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\On;
class Dashboard extends Component
{
#[On('card-toggled')]
public function handleCardToggled($collapsed)
{
// Handle card toggle event
logger()->info('Card toggled:', ['collapsed' => $collapsed]);
}
public function collapseAllCards()
{
// Dispatch event to collapse specific card
$this->dispatch('collapse-card');
}
public function expandAllCards()
{
// Dispatch event to expand specific card
$this->dispatch('expand-card');
}
public function render()
{
return view('livewire.dashboard');
}
}
```
```blade
{{-- Collapsible card --}}
This content can be collapsed by clicking the toggle button in the header.
The collapsed state is reactive and updates automatically.
{{-- Control cards from parent component --}}
Collapse All
Expand All
Content for card 1
Content for card 2
```
--------------------------------
### Livewire Alert Component with Dynamic Updates
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This snippet demonstrates a Livewire component for dispatching dynamic alert messages. It includes methods to trigger success, error, and warning alerts, which are then displayed using a Blade view. The component relies on Livewire's event system to communicate alert details to the frontend.
```php
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\On;
class NotificationCenter extends Component
{
public function showSuccessAlert()
{
$this->dispatch('show-alert',
type: 'success',
title: 'Operation Successful',
message: 'The operation completed successfully.'
);
}
public function showErrorAlert()
{
$this->dispatch('show-alert',
type: 'error',
title: 'Operation Failed',
message: 'An error occurred. Please try again.'
);
}
public function showWarningAlert()
{
$this->dispatch('show-alert',
type: 'warning',
title: 'Warning',
message: 'This action requires confirmation.'
);
}
public function render()
{
return view('livewire.notification-center');
}
}
```
```blade
{{-- Dynamic alert component --}}
Show Success
Show Error
Show Warning
```
--------------------------------
### Input Component Methods for Control
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Explains the methods available on the Input Livewire component for programmatic control. These methods allow clearing input values and errors, as well as updating the input's value dynamically from the parent component, which automatically triggers the `updatedValue()` method.
```php
// The Input Livewire component provides these methods:
// Clear input value and error
$this->dispatch('input-clear');
// Programmatically update value
public function updateUsername($newValue)
{
$this->username = $newValue;
// The updatedValue() method will be triggered automatically
}
```
--------------------------------
### Livewire Admin Dashboard Component (PHP)
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This PHP class defines the server-side logic for the admin dashboard. It manages state for statistics and notifications, loads data from the database using Eloquent models (User, Order), and handles data refresh actions. It dispatches events to the frontend for user feedback.
```php
// App\Livewire\AdminDashboard.php
namespace App\Livewire;
use Livewire\Component;
use App\Models\User;
use App\Models\Order;
class AdminDashboard extends Component
{
public $stats = [];
public $notifications = [];
public $cardsCollapsed = [];
public function mount()
{
$this->loadStats();
$this->loadNotifications();
}
public function loadStats()
{
$this->stats = [
'users' => User::count(),
'active_users' => User::where('status', 'active')->count(),
'orders' => Order::count(),
'revenue' => Order::sum('total'),
];
}
public function loadNotifications()
{
$this->notifications = [
['type' => 'success', 'message' => 'System is running smoothly'],
['type' => 'warning', 'message' => 'Server load is high'],
['type' => 'info', 'message' => '5 new users registered today'],
];
}
public function refreshData()
{
$this->loadStats();
$this->loadNotifications();
$this->dispatch('show-alert',
type: 'success',
title: 'Refreshed',
message: 'Dashboard data updated'
);
}
public function render()
{
return view('livewire.admin-dashboard');
}
}
```
--------------------------------
### Customizing Flowbite UI Component Registration (PHP)
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
Illustrates how to customize Flowbite UI component registration within a Laravel application's AppServiceProvider or a custom service provider. This includes overriding the default component prefix and setting default values for specific components like buttons.
```php
// In your AppServiceProvider or custom service provider
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Blade;
class AppServiceProvider extends ServiceProvider
{
public function boot()
{
// Override default component prefix
config(['flowbite-ui.prefix' => 'ui']);
// Now use components as:
// Customize default component values
config([
'flowbite-ui.components.button.default_color' => 'green',
'flowbite-ui.components.button.default_size' => 'lg',
]);
}
}
```
--------------------------------
### Livewire Dynamic Form Component with Validation (PHP)
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This PHP class defines a Livewire component for a dynamic form. It manages form data, validation rules, and handles form submission. It uses Livewire's validation attributes and the `@On` attribute for real-time updates.
```php
// App\Livewire\DynamicForm.php
namespace App\Livewire;
use Livewire\Component;
use Livewire\Attributes\On;
class DynamicForm extends Component
{
public $formData = [];
public $errors = [];
public $fields = [
['name' => 'username', 'type' => 'text', 'label' => 'Username', 'required' => true],
['name' => 'email', 'type' => 'email', 'label' => 'Email', 'required' => true],
['name' => 'password', 'type' => 'password', 'label' => 'Password', 'required' => true],
['name' => 'bio', 'type' => 'text', 'label' => 'Bio', 'required' => false],
];
protected function rules()
{
return [
'formData.username' => 'required|min:3|max:50',
'formData.email' => 'required|email|unique:users,email',
'formData.password' => 'required|min:8',
'formData.bio' => 'nullable|max:500',
];
}
#[On('input-updated')]
public function handleFieldUpdate($value)
{
// Real-time validation on input change
$this->validateOnly('formData.' . array_key_last($this->formData));
}
public function submit()
{
$validated = $this->validate();
// Process form data
try {
// Create user or perform action
$this->dispatch('show-alert',
type: 'success',
title: 'Success',
message: 'Form submitted successfully!'
);
} catch (Exception $e) {
$this->dispatch('show-alert',
type: 'error',
title: 'Error',
message: 'Form submission failed: ' . $e->getMessage()
);
}
}
public function render()
{
return view('livewire.dynamic-form');
}
}
```
--------------------------------
### Livewire Admin Dashboard View (Blade)
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This Blade template renders the admin dashboard's frontend interface. It uses Flowbite UI components for layout, buttons, alerts, and cards. It displays dynamic data fetched by the Livewire component, including user statistics and notifications, and includes interactive elements like a refresh button.
```blade
{{-- resources/views/livewire/admin-dashboard.blade.php --}}
Admin Dashboard
Refresh
{{-- Notifications --}}
@foreach($notifications as $index => $notification)
@endforeach
{{-- Stats Cards --}}
{{ number_format($stats['users']) }}
{{ number_format($stats['active_users']) }}
{{ number_format($stats['orders']) }}
${{ number_format($stats['revenue'], 2) }}
```
--------------------------------
### Livewire Badge Component with Dynamic Status
Source: https://context7.com/aliqasemzadeh/flowbite-ui/llms.txt
This snippet demonstrates a Livewire component that renders a dynamic status badge. The `StatusBadge` component calculates the badge's type and text based on a public `$status` property. It includes methods like `getStatusType` and `getStatusText` to determine the appearance and content of the badge dynamically. This is useful for displaying real-time status indicators.
```php
namespace App\Livewire;
use Livewire\Component;
class StatusBadge extends Component
{
public $status = 'pending';
public function getStatusType()
{
return match($this->status) {
'active' => 'success',
'pending' => 'warning',
'failed' => 'error',
'archived' => 'dark',
default => 'info'
};
}
public function getStatusText()
{
return ucfirst($this->status);
}
public function render()
{
return view('livewire.status-badge');
}
}
```
```blade
{{-- Dynamic status badge --}}
{{-- Multiple badges in a list --}}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.