### Blade Component Example Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-installation.md An example of how to use Blade Components within a Laravel application, demonstrating the structure of card buttons with integrated icons and text. ```blade
Laravel
Version ^9.0 or later
TailwindCSS
Version ^4.0 or later
``` -------------------------------- ### Install Blade Components via Composer Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-installation.md Instructions for installing the Blade Components package using Composer. This command should be executed from the root directory of your Laravel project. ```bash composer require ddfsn/blade-components ``` -------------------------------- ### Publish Blade Components Configuration Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-installation.md Publishes the package configuration file, allowing for customization such as disabling or adding components. This command is executed via the Artisan CLI. ```bash php artisan vendor:publish --tag=blade-components-config ``` -------------------------------- ### Button Usage Example Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/button.md Demonstrates the fundamental usage of the Button component in an HTML context. It requires no additional attributes for basic functionality. ```html Button ``` -------------------------------- ### Add Blade Colors Directive to Layout Head Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-installation.md Automatically installs Blade Colors and requires the `@bladeColor` directive to be added to your layouts' `` section. This integrates CSS variable-based color palettes compatible with Tailwind CSS. ```html ... @bladeColor ``` -------------------------------- ### Publish Blade Components Views Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-installation.md Publishes the package's view files, enabling modifications within your application's `/resources/views/vendor/blade-components` directory. This allows for complete control over the component's appearance. ```bash php artisan vendor:publish --tag=blade-components-views ``` -------------------------------- ### List Group Preview Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/list-group.md Shows a basic example of the List Group component with items, titles, and badges. This is a preview of how the component looks in action. ```blade
Status Active Last Activity 2 months ago
``` -------------------------------- ### Run Tests using Composer Source: https://github.com/distortedfusion/blade-components/blob/master/README.md This command executes the test suite for the Blade Components project. Ensure you have Composer installed and are in the project's root directory before running this command. ```bash composer test ``` -------------------------------- ### List Group Component Examples in Blade Source: https://context7.com/distortedfusion/blade-components/llms.txt Demonstrates how to create and customize list groups using the x-list-group component. Supports basic lists, flush styles, links, and button-like items. ```blade Status Active Last Activity 2 months ago Simple item without title {{-- Flush style (no borders) --}} First item Second item {{-- List items as links --}} Distorted Fusion https://distortedfusion.com Dashboard View your dashboard {{-- List items as buttons --}} BENNY BENASSI - Satisfaction Radio Edit BENNY BENASSI - Satisfaction Remix ``` -------------------------------- ### Badge Component Examples in Blade Source: https://context7.com/distortedfusion/blade-components/llms.txt Shows the Badge component for labels and categorization, including basic usage, various style options (primary, secondary, success, etc.), badges with icons, and contextual usage within lists. ```blade {{-- Basic badge --}} New {{-- Badge styles --}} Primary Draft Active Info Pending Inactive {{-- Badge with icon --}} Featured {{-- Usage in context --}} Status Active ``` -------------------------------- ### Blade: Additional Content Example in Empty State Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/empty.md This example utilizes the 'x-empty' Blade component and places additional content, such as a form input and paragraph with a link, below the standard title and description. ```blade
Need help? Contact support ``` -------------------------------- ### Avatar Component Examples in Blade Source: https://context7.com/distortedfusion/blade-components/llms.txt Illustrates the Avatar component for user representation, including basic usage, image display with srcset, size variations, custom fallback icons, and avatar stacks. ```blade {{-- Basic avatar with fallback icon --}} {{-- Avatar with image --}} {{-- Avatar sizes --}} {{-- Custom fallback icon --}} {{-- Avatar stack --}} ``` -------------------------------- ### Install Blade Forms via Composer Source: https://github.com/distortedfusion/blade-components/blob/master/docs/30-forms.md Install the Blade Forms package into your project using Composer. This command adds the necessary files and dependencies to your Laravel application. ```bash composer require distortedfusion/blade-forms ``` -------------------------------- ### Setup Tailwind CSS Forms Plugin Source: https://github.com/distortedfusion/blade-components/blob/master/docs/30-forms.md Install the Tailwind CSS Forms plugin and configure your tailwind.config.js file to integrate Blade Forms. This ensures proper styling and functionality. ```bash npm install tailwindcss @tailwindcss/forms --save-dev ``` ```javascript import bladeForms from './vendor/distortedfusion/blade-forms/tailwind.config.preset' export default { darkMode: 'class', presets: [bladeForms], content: [ ... './vendor/distortedfusion/blade-forms/resources/**/*.blade.php', ], ... } ``` -------------------------------- ### Configure Tailwind CSS for Blade Components Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-installation.md Configuration snippet for `tailwind.config.js` to include Blade Components' view paths for purging. This ensures that styles from the component library are correctly processed by Tailwind CSS. ```javascript export default { darkMode: 'class', content: [ ..., './vendor/ddfsn/blade-components/resources/**/*.blade.php', ], ... } ``` -------------------------------- ### Basic List Group Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/list-group.md Demonstrates the fundamental usage of the List Group component. It displays a simple list item, serving as a starting point for creating lists. ```html The Evil Rabbit Jumped over the Fence. ``` -------------------------------- ### Card Component Examples in Blade Source: https://context7.com/distortedfusion/blade-components/llms.txt Demonstrates the usage of the Card component for grouping content with header, body, and footer sections. Supports various styling and slot-based customization for actions and content. ```blade {{-- Basic card structure --}} User Profile Profile information and settings. Edit Profile {{-- Card with actions in header --}} Company Details Update Details Name Distorted Fusion Website distortedfusion.com {{-- Styled cards --}} Successful Operation Continue Delete Confirmation This action cannot be undone. Cancel Delete ``` -------------------------------- ### Display a basic Badge component Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/badge.md This snippet shows how to render a simple badge with text content. It requires the Blade Components library to be installed and configured. ```blade Badge ``` -------------------------------- ### Blade: Basic Empty State Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/empty.md A simple example of the 'x-empty' Blade component using the 'icon', 'title', and 'description' attributes. This is the most basic usage for displaying an empty state. ```blade ``` -------------------------------- ### Blade Spinner Component Preview Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/spinner.md Displays a preview of the Blade Spinner component within a centered div. This is a basic usage example. ```blade
``` -------------------------------- ### Accordion Component Examples in Blade Source: https://context7.com/distortedfusion/blade-components/llms.txt Demonstrates the Accordion component for collapsible content sections, showing basic structure, exclusive mode (single open item), and disabling transitions for instant display. ```blade {{-- Basic accordion --}} What is Blade Components? A hand-crafted UI component library for Laravel applications. How much does it cost? Blade Components is fully open-source and free to use. {{-- Exclusive mode (only one open at a time) --}} First Section This section is expanded by default. Second Section Opening this will close the first section. {{-- Without transitions --}} Instant Toggle Content appears instantly without animation. ``` -------------------------------- ### Form Input Component Examples in Blade Source: https://context7.com/distortedfusion/blade-components/llms.txt Shows how to use the x-form-input component for various text input fields. It supports different types, labels, descriptions, placeholders, icons, prefixes, suffixes, default values, and integrations with Alpine.js and Livewire. ```blade {{-- Basic input --}} {{-- Input with label and description --}} {{-- Different input types --}} {{-- Input with icons --}} {{-- Input with prefix/suffix text --}} Qty @example.com {{-- With default value --}} {{-- Required field with visual indicator --}} {{-- Alpine.js integration --}} {{-- Livewire integration --}} ``` -------------------------------- ### Globally Set All Default Alert Icons (PHP) Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/alert.md Provides a PHP code example for globally configuring all default icons for the Alert component within a service provider's boot method. ```php 'heroicon-o-information-circle', 'success' => 'heroicon-o-check-circle', 'info' => 'heroicon-o-information-circle', 'warning' => 'heroicon-o-exclamation-circle', 'danger' => 'heroicon-o-x-circle', ]); ``` -------------------------------- ### Three Dot Component Styling Examples (Blade) Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/three-dot.md Illustrates how to apply different styles to the Three Dot component using the 'style' attribute. This allows for visual differentiation based on the process's status. ```blade
``` -------------------------------- ### Render Form Input with Blade Component Source: https://github.com/distortedfusion/blade-components/blob/master/docs/20-forms/10-input.md This snippet demonstrates how to render a form input field using the Blade component. It shows an example for an email input with label, description, and placeholder. Dependencies include the Blade component library. ```blade
``` -------------------------------- ### Blade Progress Bar Component Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/progress-bar.md Basic usage example of the Blade Progress Bar component. This demonstrates how to render a progress bar with a default size and a progress value of 75%. ```html ``` -------------------------------- ### Card Component with Action Slot Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/card.md Demonstrates the use of the `x-slot:action` within the `x-card.header` to include call-to-action elements, such as buttons. This example also shows integrating with `x-list-group` for displaying detailed information. ```blade Company Details Update Details Name Distorted Fusion Website distortedfusion.com ``` -------------------------------- ### Blade Alert Component Usage Source: https://context7.com/distortedfusion/blade-components/llms.txt Shows how to implement the Blade Alert component for displaying messages. Examples include basic alerts, alerts with titles, different styles (default, success, info, warning, danger), and customizing icons. ```blade {{-- Basic alert --}} This is an informational message. {{-- Alert with title --}} Please review the updated terms and conditions. {{-- Alert styles --}} Default information Operation completed successfully! Additional information available Please proceed with caution Error: Unable to process request {{-- Custom icon --}} System maintenance scheduled for tonight. ``` -------------------------------- ### Configure TailwindCSS for Blade Components Source: https://context7.com/distortedfusion/blade-components/llms.txt Configures your TailwindCSS setup to recognize the Blade Components views. This ensures proper styling and purging of unused CSS for components within the `vendor` directory. ```javascript export default { darkMode: 'class', content: [ './resources/**/*.blade.php', './vendor/ddfsn/blade-components/resources/**/*.blade.php', ], } ``` -------------------------------- ### Accordion Component Usage - HTML Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/accordion.md Basic HTML structure for using the Accordion component, including items with titles and content sections. This example shows the default behavior without exclusive expansion. ```html What is Blade Components? Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps. How much does it cost? Blade Components is fully open-source and free to use — check out the source code on GitHub. Getting started You can install Blade Components using Composer. Check out the docs to get started. ``` -------------------------------- ### Globally Set Default Icon for Specific Alert Style (PHP) Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/alert.md Shows a PHP example for setting a custom default icon for a particular alert style (e.g., 'default') globally within a service provider. ```php ``` -------------------------------- ### Flush List Group Example Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/list-group.md Illustrates how to remove the outside borders of a List Group by using the `flush` attribute. This provides a cleaner, borderless appearance for the list. ```blade Status Active Last Activity 2 months ago ``` -------------------------------- ### Blade Components: Lists and Code Blocks Source: https://context7.com/distortedfusion/blade-components/llms.txt Provides components for unordered lists (x-ul), ordered lists (x-ol), code blocks (x-pre), and description sections (x-description). Useful for displaying structured content and code snippets. ```blade {{-- Unordered list --}}
  • First item
  • Second item
  • Third item
    •  {{-- Ordered list --}}
  • Step one
  • Step two
  • Step three
    •  {{-- Code block --}} composer require ddfsn/blade-components {{-- Description component --}} Section Title Additional context and description for this section. ``` -------------------------------- ### Get Component Alias with Prefix Programmatically Source: https://context7.com/distortedfusion/blade-components/llms.txt Retrieves the alias of a Blade Component, automatically including the configured prefix. This is useful for dynamic component rendering or integration with other packages. ```php ` to create a visual stack of avatars. ```blade
    ``` -------------------------------- ### Blade Component: Pulser Preview Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/pulser.md Demonstrates the basic rendering of the Pulser component within a centered container. ```blade
    ``` -------------------------------- ### Accordion Component Exclusive Example - Blade Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/accordion.md Demonstrates the Accordion component with the 'exclusive' attribute enabled, ensuring only one item can be expanded at a time. This is useful for controlling content visibility in a concise manner. ```blade What is Blade Components? Blade Components is a hand-crafted, UI component library for building consistent web experiences in Laravel apps. How much does it cost? Blade Components is fully open-source and free to use — check out the source code on GitHub. Getting started You can install Blade Components using Composer. Check out the docs to get started. ``` -------------------------------- ### Card Component Basic Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/card.md Demonstrates the basic structure of the Card component, including header, title, body, and footer. This is the foundational usage for displaying grouped content. ```blade Card The Evil Rabbit Jumped over the Fence. Card Footer ``` ```html Header Body Footer ``` -------------------------------- ### Blade Spinner Component with Size Control Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/spinner.md Illustrates how to control the size of the Blade Spinner component using the 'size' attribute. It shows examples for 'lg', default, and 'sm' sizes, arranged horizontally. ```blade
    ``` -------------------------------- ### Basic Alert Usage in Blade Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/alert.md Demonstrates the fundamental usage of the x-alert component in a Blade template to display a simple informational message. ```html This alert details some information. ``` -------------------------------- ### Avatar Component Preview Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/avatar.md Shows a preview of the Avatar component with stacked avatars, demonstrating multiple avatar images and a fallback. ```blade
    ``` -------------------------------- ### Layout Icon Component Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/layout-icon.md Demonstrates the basic usage of the Layout Icon component by rendering it with a specified icon. This is the fundamental way to include the component in your Blade views. ```blade ``` -------------------------------- ### Blade Spinner Component Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/spinner.md Demonstrates the basic usage of the Blade Spinner component. This is the simplest way to include a spinner in your application. ```html ``` -------------------------------- ### Alert Styling Options in Blade Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/alert.md Illustrates how to control the visual style of alert components using the 'style' attribute, showcasing different predefined styles like default, success, info, warning, and danger. ```html
    This alert details some information. This alert details a success. This alert details some information. This alert details a warning. This alert details an error.
    ``` -------------------------------- ### Blade List Group in Card Body Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/card.md Demonstrates embedding an `x-list-group` within the `x-card.body` component. The card automatically applies appropriate styling to the list group. This example shows a list group with status and last activity details. ```blade Webhook Details Details the webhook activity. Status Active Last Activity 2 months ago ``` -------------------------------- ### Basic Avatar Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/avatar.md Demonstrates the basic usage of the Avatar component with no attributes, rendering a default avatar. ```html ``` -------------------------------- ### Form Input Labels and Descriptions Source: https://github.com/distortedfusion/blade-components/blob/master/docs/20-forms/10-input.md Shows how to add simple text labels and descriptions to form inputs using the 'label' and 'description' attributes. Also illustrates using a 'description' slot for advanced HTML formatting. ```blade ``` ```blade
    8 existing team members
    ``` -------------------------------- ### Card Component Styling Options Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/card.md Illustrates how to apply different styles (success, info, warning, danger) to the Card component using the `style` attribute. Each style variation includes a header, footer with buttons, and a title. ```blade
    The Evil Rabbit Jumped over the Fence Cancel Update The Evil Rabbit Jumped over the Fence Cancel Update The Evil Rabbit Jumped over the Fence Cancel Update The Evil Rabbit Jumped over the Fence Cancel Delete
    ``` -------------------------------- ### Render Checkbox Input with Description Source: https://github.com/distortedfusion/blade-components/blob/master/docs/20-forms/40-checkbox.md This snippet demonstrates how to render a checkbox with a label and an accompanying description using Blade Components. It utilizes the `x-form-checkbox` and `x-form-help` components, allowing for default checked states and descriptive text. Dependencies include the Blade Components framework. ```blade
    By clicking this checkbox, you agree to the terms and conditions.
    ``` -------------------------------- ### Blade Empty State Component Preview Source: https://github.com/distortedfusion/blade-components/blob/master/docs/30-precomposed/10-empty-states.md Displays a preview of the empty state component, typically used when no content is available. It accepts a title, content within a paragraph, and an optional action slot for buttons. ```blade
    The Evil Rabbit Jumped over the Fence. Primary Action Learn More
    ``` -------------------------------- ### Blade Button Component Usage Source: https://context7.com/distortedfusion/blade-components/llms.txt Demonstrates various ways to use the Blade Button component, including different styles, sizes, link integration, disabled states, and utilizing slots for prefix and suffix content. ```blade {{-- Basic button usage --}} Click Me {{-- Button with different styles --}} Primary Action Secondary Action Outlined Ghost Save Changes Delete Item {{-- Button sizes --}} Small Button Default Size Large Button {{-- Button as link --}} Go to Dashboard External Link {{-- Disabled state --}} Cannot Click {{-- Button with prefix and suffix --}} 1. Step One → ``` -------------------------------- ### Basic Paragraph Component Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/typography.md Shows the standard implementation of the x-paragraph component to render a simple paragraph of text. No special attributes or slots are required for basic usage. ```blade-component-code The Evil Rabbit Jumped over the Fence. ``` -------------------------------- ### Blade Component: Basic Pulser Usage Source: https://github.com/distortedfusion/blade-components/blob/master/docs/10-components/pulser.md Shows the minimal HTML required to include the Pulser component on a page. ```html ``` -------------------------------- ### Form Input Prefix and Suffix Text Source: https://github.com/distortedfusion/blade-components/blob/master/docs/20-forms/10-input.md Demonstrates adding simple text prefixes and suffixes to form inputs for enhanced clarity using the 'prefix' and 'suffix' slots. ```blade Quantity @example.com ``` -------------------------------- ### Configure Component Prefix in Laravel Source: https://context7.com/distortedfusion/blade-components/llms.txt Sets a global prefix for all Blade Components by modifying the `config/blade-components.php` file. This helps in avoiding naming conflicts and organizing components. ```php 'df', // // Or leave null for no prefix 'prefix' => null, // 'components' => [ // Component registry ], ]; ```