Weave Code
Ui Laravel Package
beartropy/ui
Beartropy UI is a small Laravel UI package providing ready-made components and helpers to speed up building admin and front-end screens. Drop in common layouts, forms, and UI utilities to get a consistent look fast with minimal setup.
At a glance
Frequently asked questions about Ui
- What Laravel and Livewire versions does Beartropy UI support?
- Beartropy UI is optimized for Laravel 9+ and Livewire 3.x. Always check the package’s documentation for exact version requirements, as Livewire 2.x compatibility may vary. The package explicitly avoids framework-specific hacks, ensuring smooth integration with modern Laravel releases.
- How do I install Beartropy UI in my Laravel project?
- Run `composer require beartropy/ui` to install via Composer. No additional steps are required for basic usage, but ensure Tailwind CSS and Alpine.js are already loaded in your project. The package assumes modern Tailwind v3+ features like `backdrop-blur` and arbitrary values.
- Can I customize the UI components like buttons or modals?
- Yes, customization is straightforward. Use the provided config files (e.g., `resources/views/presets/badge.php`) or override settings in `config/beartropy-ui.php`. For example, modify badge colors or time picker formats by extending the preset arrays. Tailwind’s config system is fully leveraged for theming.
- Does Beartropy UI work with existing Alpine.js stores or Livewire event listeners?
- Components use namespaced Alpine modules (e.g., `beartropyTimepicker`) to avoid conflicts. For Livewire, ensure no existing global event listeners interfere with `bt-dialog` or other custom events. The package’s `HasDialogs` trait syncs Alpine and Livewire states, but manual event handling may require adjustments.
- How does the AI assistant (Claude Code/Cursor) integration work?
- The package includes slash commands for Claude Code (e.g., `/bt-ui-form`) and `.cursorrules` for Cursor. These are optional but accelerate development by generating UI boilerplate or documentation. Core functionality works without AI tools—just reference the `vendor/beartropy/ui/docs/ai-assistants/` guide for prompts.
- Are there performance concerns with heavy components like CommandPalette?
- Heavy components are designed for lazy loading or code splitting. The package recommends evaluating usage patterns—e.g., load `CommandPalette` dynamically via Alpine’s `x-data` or Livewire’s lazy components. Alpine’s state management (e.g., `btDialog`) is lightweight, but complex dialogs may need optimization.
- How do I implement dark mode with Beartropy UI?
- Dark mode is built-in via Tailwind’s native support and PHP-generated class maps (e.g., `typeStyles` in `Dialog`). Use the `ToggleTheme` component to switch modes globally. Ensure your Tailwind config includes `darkMode: 'class'` and the package’s presets extend dark variants.
- Can I use Beartropy UI without Livewire or Alpine.js?
- While the package is TALL-optimized, you can use static components (e.g., buttons, layouts) without Livewire or Alpine by omitting interactivity. For dynamic features like dialogs or time pickers, Alpine.js is required. Livewire integration is optional but unlocks advanced traits like `HasDialogs`.
- What alternatives exist for Laravel UI components?
- Alternatives include **Laravel Jetstream** (auth-focused), **Filament** (admin panels), or **Tailwind UI** (standalone components). Beartropy UI differs by specializing in TALL-stack *integration*—e.g., Livewire-first dialogs, Alpine state sync, and AI tooling. It’s ideal for projects needing cohesive UI *and* backend logic.
- How do I test Beartropy UI components in my Laravel app?
- Test components in isolation using Laravel’s Blade views or Livewire previews. For Alpine.js interactivity, mock state changes with `Alpine.store()` or test event listeners via Livewire’s `wire:emit`. The package’s modular design allows unit testing individual components (e.g., `Dialog`) without full stack dependencies.
Weaver
How can I help you explore Laravel packages today?