### Install BlatUI CLI Source: https://github.com/anousss007/blatui/blob/main/README.md Installs the BlatUI command-line interface using Composer. This is the first step in the installation process. ```bash # 1. Install the CLI composer require anousss007/blatui ``` -------------------------------- ### Install Dependencies and Run Tests Source: https://github.com/anousss007/blatui/blob/main/CONTRIBUTING.md Install project dependencies using Composer and run tests with PHPUnit. Code formatting can be checked or applied with Pint. ```bash composer install vendor/bin/phpunit # run the tests vendor/bin/pint # auto-format (vendor/bin/pint --test to check only) ``` -------------------------------- ### Verify BlatUI Setup Source: https://github.com/anousss007/blatui/blob/main/README.md Runs a verification command to ensure all BlatUI packages, tokens, and imports are correctly configured in your project. ```bash # 4. Verify your setup php artisan blatui:init ``` -------------------------------- ### Add Blatui Components Source: https://github.com/anousss007/blatui/blob/main/README.md Use the `blatui:add` command to install one or more components. Dependencies are resolved automatically. Use `--all` to add all available components. ```bash php artisan blatui:add button card input ``` ```bash php artisan blatui:add --all ``` -------------------------------- ### Install Peer Packages Source: https://github.com/anousss007/blatui/blob/main/README.md Installs necessary peer packages for BlatUI components using both Composer and npm. These packages provide essential functionality for component merging and icon rendering. ```bash # 2. Peer packages used by the components composer require gehrisandro/tailwind-merge-laravel mallardduck/blade-lucide-icons npm install -D alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/focus ``` -------------------------------- ### List Blatui Components Source: https://github.com/anousss007/blatui/blob/main/README.md Use the `blatui:list` command to see all available component families or get details for a specific component. ```bash php artisan blatui:list ``` ```bash php artisan blatui:list select ``` -------------------------------- ### Add and List BlatUI Components Source: https://github.com/anousss007/blatui/blob/main/resources/boost/skills/blatui-development/SKILL.md Use these Artisan commands to manage BlatUI components. `blatui:add` installs new components, and `blatui:list` shows available component families. ```shell php artisan blatui:add [ ...] ``` ```shell php artisan blatui:list # all available families ``` -------------------------------- ### Use BlatUI Components in Blade Source: https://github.com/anousss007/blatui/blob/main/resources/boost/skills/blatui-development/SKILL.md Examples of how to integrate various BlatUI components like buttons, inputs, and cards directly within your Blade views. ```blade Save Title Subtitle ... ``` -------------------------------- ### Local MCP Command Source: https://github.com/anousss007/blatui/blob/main/resources/boost/skills/blatui-development/SKILL.md Execute the local MCP (Multi-Component Protocol) command for interacting with BlatUI tools like searching the registry or installing components. ```shell php artisan blatui:mcp (tools: search_registry, get_component, get_example, install_command) ``` -------------------------------- ### Render Blatui Components with Blade Source: https://github.com/anousss007/blatui/blob/main/README.md Components are rendered using Blade tags in `resources/views/components/ui/`. This example shows how to compose a card with a header, title, description, input, and button. ```blade Welcome back Sign in to continue. Sign in ``` -------------------------------- ### Initialize BlatUI Source: https://github.com/anousss007/blatui/blob/main/resources/boost/skills/blatui-development/SKILL.md Run this command to verify the wiring of BlatUI, including theme CSS, Alpine.js, and necessary imports. ```shell php artisan blatui:init ``` -------------------------------- ### Register BlatUI with Existing Alpine.js Instance Source: https://github.com/anousss007/blatui/blob/main/README.md For projects already using Alpine.js, this snippet shows how to register BlatUI into your existing instance instead of bootstrapping a new one. This prevents conflicts and ensures seamless integration. ```js import Alpine from 'alpinejs' import { registerBlatUI } from './blatui-core.js' registerBlatUI(Alpine) // plugins + theme store + chart/calendar engines window.Alpine = Alpine Alpine.start() ``` -------------------------------- ### Fetch Blocks and Charts from Registry Source: https://github.com/anousss007/blatui/blob/main/resources/boost/skills/blatui-development/SKILL.md Use `curl` to fetch full-page blocks or charts from the BlatUI registry. These commands download JSON data containing component definitions. ```shell # Read a block/chart and write each files[].content to its files[].target: curl https://blatui.remix-it.com/r/blocks/dashboard-01.json curl https://blatui.remix-it.com/r/charts/chart-area-default.json ``` -------------------------------- ### Integrate BlatUI JavaScript Source: https://github.com/anousss007/blatui/blob/main/README.md Imports the BlatUI JavaScript foundation into your main JavaScript file. This bootstraps Alpine.js and its plugins, and lazy-loads necessary charting libraries. ```js // resources/js/app.js import "./blatui.js"; ``` -------------------------------- ### Publish BlatUI Foundations Source: https://github.com/anousss007/blatui/blob/main/README.md Publishes the core BlatUI assets, including theme tokens and JavaScript engines for Alpine.js, charts, and calendars. These assets are essential for BlatUI's theming and functionality. ```bash # 3. Publish the foundations (theme tokens + Alpine/chart/calendar engine) php artisan vendor:publish --tag=blatui-foundations # → resources/css/blatui.css (oklch design tokens, presets, light/dark) # → resources/js/blatui.js (greenfield bootstrap — boots Alpine for you) # → resources/js/blatui-core.js (engine: registerBlatUI, for apps already running Alpine) ``` -------------------------------- ### Integrate BlatUI CSS Source: https://github.com/anousss007/blatui/blob/main/README.md Adds the BlatUI CSS foundation to your main CSS file. This import should be placed after the Tailwind CSS import to ensure proper styling. ```css /* resources/css/app.css */ @import "./blatui.css"; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.