Laravel Cube Laravel Package

Product Decisions This Supports

• Unified UI System: Accelerates development by providing a consistent, reusable component library for Laravel applications, reducing frontend development time and ensuring visual consistency across projects.
• Framework Flexibility: Enables teams to adopt either Tailwind CSS or Bootstrap 5 without rewriting UI components, simplifying future migrations or A/B testing of design systems.
• Livewire Integration: Supports Livewire 3/4 compatibility, making it ideal for SPAs or interactive applications where real-time UI updates are critical.
• Dark Mode Support: Aligns with modern UX trends by offering built-in dark mode for Tailwind-based components, reducing development effort for accessibility and user preference compliance.
• Customization & Extensibility: Allows teams to override styles or extend components via Blade publishing, ensuring alignment with brand guidelines or unique feature requirements.
• Companion Ecosystem: Leverages nasirkhan/laravel-sharekit for social sharing, enabling modular feature adoption (e.g., adding sharing buttons only to content-heavy pages).
• Build vs. Buy Decision: Justifies buying this package over building in-house for teams lacking frontend expertise or needing rapid UI iteration (e.g., startups, MVPs, or internal tools).
• Roadmap Priorities:
  • Phase 1: Standardize UI across micro-services or multi-tenant apps.
  • Phase 2: Enable framework-agnostic theming for A/B testing (e.g., Tailwind vs. Bootstrap).
  • Phase 3: Extend with domain-specific components (e.g., admin panels, dashboards).

When to Consider This Package

• Adopt When:

  • Your team uses Laravel 11/12/13 and needs pre-built, reusable UI components (forms, buttons, modals, etc.).
  • You’re starting a new project or refactoring an existing one to unify UI across modules/services.
  • You require dual framework support (Tailwind/Bootstrap) to accommodate design system preferences or client requirements.
  • Your app uses Livewire and needs consistent, interactive UI components.
  • You want to reduce frontend boilerplate while maintaining customization options (e.g., dark mode, icon sets).
  • Social sharing is a secondary feature (use laravel-sharekit alongside Cube).

• Look Elsewhere When:

  • You’re locked into a specific framework (e.g., only Bootstrap or only Tailwind) and don’t need flexibility.
  • Your project requires highly specialized components (e.g., medical, legal, or niche industry UIs) not covered by Cube.
  • You need advanced interactivity (e.g., drag-and-drop, complex animations) beyond Cube’s scope.
  • Your team has dedicated frontend resources who prefer framework-agnostic solutions (e.g., React/Vue) over Blade components.
  • You’re using Laravel <11 or PHP <8.3, as Cube has strict version requirements.
  • You prioritize performance-critical apps where bundled CSS (e.g., Flowbite) may impact load times.

How to Pitch It (Stakeholders)

For Executives:

*"Laravel Cube is a pre-built UI component library that lets our Laravel teams ship consistent, high-quality interfaces faster and with less code. By supporting both Tailwind CSS and Bootstrap, we can:

• Reduce development time by 30–50% for common UI elements (buttons, forms, modals).
• Future-proof our design system with built-in dark mode and framework flexibility.
• Lower frontend costs by avoiding custom builds for basic components.
• Integrate seamlessly with Livewire for interactive apps, like dashboards or admin panels. For $0 upfront cost (open-source), we gain enterprise-grade UI consistency—ideal for our [Product X] roadmap where rapid iteration is critical."

Ask: "Should we prioritize this for [upcoming feature Y] to standardize the UI across [modules A/B]?"

For Engineering/Tech Leads:

*"Laravel Cube solves two key pain points:

1. UI Fragmentation: Replace ad-hoc Blade components with a unified, maintainable library that works with Tailwind or Bootstrap.
2. Framework Lock-in: Avoid rewriting components if we switch CSS frameworks later (e.g., migrating from Bootstrap to Tailwind).

Key Benefits:

• Dual Framework Support: Set globally (CUBE_FRAMEWORK=tailwind) or per-component (<x-cube::button framework="bootstrap">).
• Livewire Ready: All components work out-of-the-box with Livewire 3/4 (e.g., modals, toggles).
• Customizable: Publish views/CSS to override defaults (e.g., brand colors, icon sets).
• Lightweight: Only ~20 components; no bloat. Pair with laravel-sharekit for social features as needed.

Trade-offs:

• Tailwind users must import Cube’s CSS for utility classes.
• Bootstrap users get full compatibility without extra steps.

Proposal:

• Pilot: Use Cube for [Module Z]’s forms and buttons to test adoption.
• Roadmap: Replace custom Blade components with Cube over 3 sprints.
• Tech Debt: Audit existing UI for Cube-compatible patterns.

Ask: "Can we reserve 1 sprint to migrate [high-traffic page] to Cube and measure dev time savings?""*

For Designers:

*"Laravel Cube gives you control over consistency without sacrificing flexibility:

• Tailwind or Bootstrap: Choose your preferred framework without redesigning components.
• Dark Mode: Built-in for Tailwind users (toggle via CSS classes).
• Icon Library: 50+ Flowbite icons (solid/outline) for UI elements—no need to source assets.
• Customization: Publish views to tweak styles (e.g., button padding, card shadows) to match your system.

Example Workflow:

1. Design your button in Figma using Tailwind classes.
2. Implement with <x-cube::button variant="primary" class="py-3">.
3. Override styles in resources/views/vendor/cube/components/button.blade.php if needed.

Ask: "Should we document Cube’s design tokens (e.g., spacing, colors) in our style guide to ensure alignment?""*