PHPackages yacoubalhaidari/filament-tour - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Admin Panels](/categories/admin) 4. / 5. yacoubalhaidari/filament-tour ActiveLibrary[Admin Panels](/categories/admin) yacoubalhaidari/filament-tour ============================= An interactive guided tour for Filament Admin Panel using Shepherd.js v1.0.1(4mo ago)11584↓44.7%4[1 PRs](https://github.com/YacoubAl-hardari/filament-tour/pulls)MITPHPPHP ^8.2 Since Jan 1Pushed 4mo agoCompare [ Source](https://github.com/YacoubAl-hardari/filament-tour)[ Packagist](https://packagist.org/packages/yacoubalhaidari/filament-tour)[ Docs](https://github.com/yacoubalhaidari/filament-tour)[ RSS](/packages/yacoubalhaidari-filament-tour/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependencies (8)Versions (3)Used By (0) [![Gemini_Generated_Image_xwwnlrxwwnlrxwwn](https://private-user-images.githubusercontent.com/94101869/531345759-f9b79e27-5051-4a70-a295-50f450a94c4d.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUzNjc5NTIsIm5iZiI6MTc3NTM2NzY1MiwicGF0aCI6Ii85NDEwMTg2OS81MzEzNDU3NTktZjliNzllMjctNTA1MS00YTcwLWEyOTUtNTBmNDUwYTk0YzRkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA1VDA1NDA1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTljMDQ0Y2U2ZDg1ZDdhYTExNTIxNWVkMjI5OTlhZTgxMmE5MjJkNzA5MTAyNTE3Yzk3NDRkYTdlMTYxZThlZDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.DQ1XBloWThECa3KcEQk6N6c9EPQzd_BksjW7Ze_-F7g)](https://private-user-images.githubusercontent.com/94101869/531345759-f9b79e27-5051-4a70-a295-50f450a94c4d.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUzNjc5NTIsIm5iZiI6MTc3NTM2NzY1MiwicGF0aCI6Ii85NDEwMTg2OS81MzEzNDU3NTktZjliNzllMjctNTA1MS00YTcwLWEyOTUtNTBmNDUwYTk0YzRkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA1VDA1NDA1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTljMDQ0Y2U2ZDg1ZDdhYTExNTIxNWVkMjI5OTlhZTgxMmE5MjJkNzA5MTAyNTE3Yzk3NDRkYTdlMTYxZThlZDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.DQ1XBloWThECa3KcEQk6N6c9EPQzd_BksjW7Ze_-F7g)Filament Tour ------------- [](#filament-tour) An interactive guided tour for the Filament admin panel powered by Shepherd.js. This plugin adds a tour trigger button to the Filament user menu and lets you build a step‑by‑step walkthrough of your panel pages, with full control over colors, texts, and welcome/finish screens. 🎥 Filament Tour – Video Demo ---------------------------- [](#-filament-tour--video-demo) [![Filament Tour – Video Demo](https://camo.githubusercontent.com/9a75eb6a97aa11e9acdb004fb7b740585a6a8d40a2bc5f0bb54085eb6aa00e67/68747470733a2f2f696d672e796f75747562652e636f6d2f76692f54336e434f59636c33446f2f6d617872657364656661756c742e6a7067)](https://www.youtube.com/watch?v=T3nCOYcl3Do) > Click the image to watch the full video on YouTube. --- Requirements ------------ [](#requirements) - PHP ^8.2 - Filament ^3.0 or ^4.0 --- Installation ------------ [](#installation) Require the package via Composer: ``` composer require yacoubalhaidari/filament-tour ``` Optionally publish the CSS/JS assets into your `public` directory (for example if you want to serve them statically or customize them): ``` php artisan filament-tour:assets ``` This will publish: - `public/css/yacoubalhaidari/filament-tour/filament-tour-styles.css` - `public/js/yacoubalhaidari/filament-tour/filament-tour-scripts.js` > The service provider also auto‑registers the package assets from the package itself, so publishing is optional. --- Registering the Plugin ---------------------- [](#registering-the-plugin) In your Filament `PanelProvider`, register the plugin and optionally customize the tour button and appearance. ``` use Filament\Panel; use YacoubAlhaidari\FilamentTour\FilamentTourPlugin; class AdminPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->plugins([ FilamentTourPlugin::make() // Show / hide the trigger button in the user menu ->showTourButton(true) // Trigger button appearance ->tourButtonIcon('heroicon-o-academic-cap') ->tourButtonColor('info') ->tourButtonTooltip(trans('filament-tour.tooltip')) // Color customization (all are optional) ->headerColor('linear-gradient(135deg, #282835 0%, #282835 100%)') ->primaryButtonColor('linear-gradient(135deg, #282835 0%, #282835 100%)') ->secondaryButtonColor('linear-gradient(135deg, #282835 0%, #282835 100%)') ->textColor('#1f2937') ->backgroundColor('linear-gradient(135deg, #282835 0%, #282835 100%)') ->contentBackgroundColor('#282835') ->footerBackgroundColor('linear-gradient(180deg, #282835 0%, #282835 100%)') ->primaryButtonHoverColor('linear-gradient(135deg, #ea580c 0%, #dc2626 100%)') ->secondaryButtonHoverColor('linear-gradient(135deg, #282835 0%, #282835 100%)') ->primaryButtonTextColor('#ffffff') ->secondaryButtonTextColor('#ffffff') ->footerBorderColor('rgba(0, 0, 0, 0.1)') // Optional custom welcome & finish steps ->welcomeStep([ 'id' => 'welcome', 'title' => 'مرحباً مخصص!', 'text' => 'رسالة ترحيب مخصصة', 'buttons' => [ ['text' => 'تخطي', 'action' => 'cancel', 'secondary' => true], ['text' => 'ابدأ', 'action' => 'next', 'secondary' => false], ], ]) ->finishStep([ 'id' => 'finish', 'title' => 'تهانينا مخصص!', 'text' => 'رسالة إنهاء مخصصة', 'buttons' => [ ['text' => 'السابق', 'action' => 'back', 'secondary' => true], ['text' => 'إنهاء', 'action' => 'complete', 'secondary' => false], ], ]), ]); } } ``` ### Plugin Methods [](#plugin-methods) All configuration methods are chainable on `FilamentTourPlugin::make()`: - `showTourButton(bool $condition = true)` – Show or hide the tour trigger icon in the user menu. - `tourButtonIcon(string $icon)` – Heroicon or custom icon class for the trigger button. - `tourButtonColor(string $color)` – Filament color name (e.g. `info`, `primary`, `success`). - `tourButtonTooltip(string $tooltip)` – Tooltip text shown when hovering the trigger button. Color customization (all optional – values are used directly as CSS values and wired into CSS variables): - `headerColor(string $color)` – Header background (e.g. gradient or hex color). - `primaryButtonColor(string $color)` – Primary button background. - `secondaryButtonColor(string $color)` – Secondary button background. - `textColor(string $color)` – Main text color inside the tour. - `backgroundColor(string $color)` – Overall tour background. - `contentBackgroundColor(string $color)` – Content area background. - `footerBackgroundColor(string $color)` – Footer background (where buttons sit). - `primaryButtonHoverColor(string $color)` – Primary button hover background. - `secondaryButtonHoverColor(string $color)` – Secondary button hover background. - `primaryButtonTextColor(string $color)` – Text color inside the primary button. - `secondaryButtonTextColor(string $color)` – Text color inside the secondary button. - `footerBorderColor(string $color)` – Border color above the footer. Custom welcome / finish steps: - `welcomeStep(array $step)` – Override the default first step. - `finishStep(array $step)` – Override the default last step. Each step array supports at least: ``` [ 'id' => 'welcome', // Unique step ID 'title' => 'عنوان الخطوة', // Step title 'text' => 'HTML', // Step body (HTML allowed) 'buttons' => [ ['text' => 'تخطي', 'action' => 'cancel', 'secondary' => true], ['text' => 'التالي', 'action' => 'next', 'secondary' => false], ['text' => 'السابق', 'action' => 'back', 'secondary' => true], ['text' => 'إنهاء', 'action' => 'complete','secondary' => false], ], ] ``` Supported button actions: `back`, `next`, `cancel`, `complete`. --- Defining Dynamic Tour Steps on Resources ---------------------------------------- [](#defining-dynamic-tour-steps-on-resources) Dynamic steps are collected automatically from your Filament resources that use the `HasTourSteps` concern. Add the trait to any resource you want to appear in the tour: ``` use Filament\Resources\Resource; use YacoubAlhaidari\FilamentTour\Concerns\HasTourSteps; class MerchantResource extends Resource { use HasTourSteps; public static function getTourStepId(): ?string { return 'merchants-list'; } public static function getTourStepTitle(): ?string { return 'إدارة التجار'; } public static function getTourStepDescription(): ?string { return 'وصف موجز لما يمكن للمستخدم القيام به هنا.'; } public static function getTourStepFeatures(): array { return [ 'إضافة تاجر جديد', 'تعديل بيانات التاجر', 'عرض حالة المحافظ والطلبات', ]; } public static function getTourStepPosition(): string { // Shepherd position: top|bottom|left|right|center ... return 'right'; } public static function getTourStepSort(): int { // Lower numbers appear earlier in the tour return 10; } } ``` ### What the Trait Provides [](#what-the-trait-provides) `HasTourSteps` defines the following static methods (with sensible defaults): - `getTourSteps(): array` – Low-level hook if you want to return fully custom step definitions (defaults to `[]`). - `getTourStepId(): ?string` – Unique ID for the step (also used as `data-tour` value). - `getTourStepTitle(): ?string` – Step title (defaults to `static::getModelLabel()`). - `getTourStepDescription(): ?string` – Short description paragraph. - `getTourStepFeatures(): array` – Bullet list of features; rendered as a list in the tooltip. - `getTourStepPosition(): string` – Tooltip position relative to the target (default `right`). - `getTourStepSort(): int` – Sort order (lower = earlier in the tour; default `100`). - `getTourSelector(): ?string` – Selector used to attach the step (defaults to `getTourStepId()`). - `hasTourStep(): bool` – Whether the resource should participate in the tour. The package collects these steps via `TourStepCollector` and passes them to the frontend as `window.dynamicTourSteps`. --- How Navigation Matching Works ----------------------------- [](#how-navigation-matching-works) On the frontend, the script automatically tries to match your resources to sidebar navigation items and adds `data-tour="{id}"` attributes. - The navigation label from each resource is mapped to a step ID via an internal navigation map. - When a tour step is shown, the corresponding sidebar item is highlighted. - Some Arabic labels have built‑in fallbacks (e.g. التجار, الميزانيات, الإعدادات ...) for convenience. If you keep your `getTourStepId()` values meaningful (e.g. `merchants-list`, `budgets`, `financial-settings`) you’ll get good matching out of the box. --- Localization (en / ar) ---------------------- [](#localization-en--ar) The package ships with simple translation files that you can override in your app: - `resources/lang/en/filament-tour.php` - `resources/lang/ar/filament-tour.php` Each file contains default labels for the welcome/finish steps and button texts. You can override them in your own application like any other Laravel lang file and then map them into your custom `welcomeStep()` / `finishStep()` calls, for example: ``` FilamentTourPlugin::make() ->welcomeStep([ 'id' => trans('filament-tour.welcome.id'), 'title' => trans('filament-tour.welcome.title'), 'text' => trans('filament-tour.welcome.text'), 'buttons' => [ ['text' => trans('filament-tour.welcome.buttons.skip'), 'action' => 'cancel', 'secondary' => true], ['text' => trans('filament-tour.welcome.buttons.start'), 'action' => 'next', 'secondary' => false], ], ]) ->finishStep([ 'id' => trans('filament-tour.finish.id'), 'title' => trans('filament-tour.finish.title'), 'text' => trans('filament-tour.finish.text'), 'buttons' => [ ['text' => trans('filament-tour.finish.buttons.back'), 'action' => 'back', 'secondary' => true], ['text' => trans('filament-tour.finish.buttons.finish'), 'action' => 'complete', 'secondary' => false], ], ]); ``` --- Running the Tour ---------------- [](#running-the-tour) - Click the tour icon in the Filament user menu (default `heroicon-o-academic-cap`). - The tour starts at the welcome step (default or your custom `welcomeStep`). - Dynamic resource steps run in order of `getTourStepSort()`. - The final step is the finish screen (default or your custom `finishStep`). The tour remembers progress in `localStorage` and can automatically resume after navigation. --- License ------- [](#license) Released under the MIT License. ### Health Score 44 — FairBetter than 92% of packages Maintenance78 Regular maintenance activity Popularity28 Limited adoption so far Community8 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~17 days Total 2 Last Release 120d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/1fb3960cf6e949bc5401902a09bf597da5bf4aeaf53c382bb55b1843769c0347?d=identicon)[Yacoub\_Al-haidari](/maintainers/Yacoub_Al-haidari) --- Top Contributors [![YacoubAl-hardari](https://avatars.githubusercontent.com/u/94101869?v=4)](https://github.com/YacoubAl-hardari "YacoubAl-hardari (5 commits)") --- Tags filament-plugintourlaraveltutorialguidefilamenttourfilament-touryacoubalhaidarishepherd ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/yacoubalhaidari-filament-tour/health.svg) ``` [![Health](https://phpackages.com/badges/yacoubalhaidari-filament-tour/health.svg)](https://phpackages.com/packages/yacoubalhaidari-filament-tour) ``` ### Alternatives [awcodes/filament-quick-create Plugin for Filament Admin that adds a dropdown menu to the header to quickly create new items. 246177.6k7](/packages/awcodes-filament-quick-create)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[guava/filament-knowledge-base A filament plugin that adds a knowledge base and help to your filament panel(s). 206120.5k1](/packages/guava-filament-knowledge-base)[inerba/filament-db-config A Filament plugin for database-backed application settings and editable content, with caching and easy page generation. 329.1k](/packages/inerba-filament-db-config)[caresome/filament-neobrutalism-theme A neobrutalism theme for FilamentPHP admin panels 303.2k](/packages/caresome-filament-neobrutalism-theme)[andreia/filament-ui-switcher Add a modal with options to switch between different UI layouts and styles (colors, fonts, font sizes). 233.8k](/packages/andreia-filament-ui-switcher) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)