Mary Laravel Package

Product Decisions This Supports

• Accelerate UI Development for Livewire Apps: Adopt mary (v2.8.3+) to standardize UI components across internal tools, dashboards, or customer-facing applications built with Livewire, now with RTL (Right-to-Left) language support via logical margin utilities. Reduces frontend development time by 30–50% for repetitive elements (forms, tables, modals, etc.) while maintaining consistency and global accessibility.

• Roadmap: Unified Design System: Use mary as the foundation for a Laravel-centric design system, integrating it with existing Tailwind/DaisyUI workflows. Prioritize adoption in high-impact, multilingual projects (e.g., admin panels for global SaaS portals, RTL-supported dashboards) to demonstrate ROI before rolling out globally. Leverage the new RTL fixes to support Arabic, Hebrew, or Persian markets without additional dev effort.

• Build vs. Buy: Buy for rapid iteration and reduced maintenance overhead. Custom development would require 6–12 months to match mary’s 50+ components, active community, and now RTL support. Justify with TCO analysis showing cost savings of $50K–$150K/year for a mid-sized team, especially for projects requiring multilingual UIs.

• Use Cases (Updated):

  • Internal Tools: Dashboards, user management, workflow approvals (now RTL-compatible).
  • Customer-Facing: E-commerce admin panels, SaaS subscription portals, multilingual form-heavy applications.
  • Prototyping: Quickly iterate on UI mockups with pre-built components (e.g., Spotlight, Collapse, Toast).
  • Accessibility: Leverage built-in a11y improvements (e.g., Carousel, Dropdown) and RTL support to meet WCAG compliance globally.
  • Global Markets: Expand into Arabic, Hebrew, or Persian-speaking regions with zero additional dev work.

When to Consider This Package

• Adopt If:

  • Your team uses Livewire (v3+) and Tailwind CSS (v3+).
  • You need consistent, production-ready UI components with minimal customization (e.g., forms, tables, modals, cards).
  • Your project timeline is <6 months and requires rapid UI development.
  • You prioritize developer experience (DX) over full design-system customization.
  • Your stack includes DaisyUI (or you’re open to adopting it for theming).
  • New: You require RTL (Right-to-Left) language support (e.g., Arabic, Hebrew, Persian) for global applications.

• Look Elsewhere If:

  • You require highly customized animations or interactions beyond Tailwind/DaisyUI’s capabilities.
  • Your design system is heavily branded and needs pixel-perfect overrides for every component.
  • You’re not using Livewire (this package is Livewire-specific).
  • Your team lacks Tailwind CSS expertise (steep learning curve for customization).
  • You need server-side rendering (SSR) or Next.js compatibility.
  • Your project has strict performance budgets (e.g., mobile apps) and the package’s JS dependencies are prohibitive.

• Alternatives to Evaluate:

  • Custom Tailwind Components: For full control but higher dev effort.
  • Laravel Nova: If you need a pre-built admin panel (though less flexible for custom UIs).
  • Alpine.js + Tailwind: For lightweight SPAs without Livewire.
  • PrimeVue/PrimeNG: If you’re open to non-Laravel frameworks but need similar component richness.
  • RTL-Specific Libraries: If mary’s RTL support is insufficient (e.g., Tailwind RTL plugin for deeper integration).

How to Pitch It (Stakeholders)

For Executives:

*"mary (v2.8.3) is a pre-built UI component library for Livewire that cuts our frontend development time by 30–50% while ensuring consistency globally, including RTL language support (Arabic, Hebrew, Persian). By adopting this, we can:

• Ship features faster: Standardized components (forms, tables, modals) reduce dev cycles for dashboards and admin tools, now with multilingual support.
• Enter new markets: Launch in Arabic/Hebrew-speaking regions without additional dev work, thanks to logical margin utilities for RTL.
• Lower costs: Avoid reinventing the wheel—no need to hire specialized UI devs or spend months building a design system.
• Improve UX: Built-in accessibility (a11y) and modern interactions (e.g., Spotlight search, Collapse animations) enhance user satisfaction across languages.
• Future-proof: Actively maintained with Laravel 13, Livewire 4, and RTL support, plus a growing community.

ROI: For a team of 5 developers, this could save $50K–$150K/year in dev time. Let’s pilot it in [Project X] to validate before scaling globally."*

For Engineering Teams:

*"mary (v2.8.3) is a Livewire-first UI component library built on DaisyUI + Tailwind, now with RTL support for global applications. Key updates:

• RTL Fixes: Logical margin utilities ensure proper layout for Arabic, Hebrew, Persian (and other RTL languages) without manual overrides.
• Badge Component Fix: Resolved a logic error in the Badge component for accurate value display.
• 50+ Production-Ready Components: Forms, tables, modals, cards, and interactive elements (e.g., Calendar, Choices.js dropdowns).
• Zero JavaScript Fatigue: Components are Livewire-native, so they work seamlessly with Laravel’s reactivity.
• Tailwind/DaisyUI Integration: Customize colors, spacing, and themes via Tailwind classes—no CSS-in-JS complexity.

How to Use It:

1. Install via Composer: composer require robsontenorio/mary.
2. Drop in components like <x-mary.input /> or <x-mary.table />.
3. Customize via Tailwind classes or props (e.g., <x-mary.button color="primary" />).
4. For RTL: Use Tailwind’s built-in RTL classes (e.g., rtl:mr-4) or rely on mary’s logical margin fixes.

Trade-offs:

• Not a design system: If you need 100% custom branding, you’ll still tweak Tailwind classes.
• Livewire-only: Won’t work with Inertia.js or Alpine.js SPAs.
• JS dependencies: Some components (e.g., Calendar, Choices) add ~50KB–100KB JS.

Next Steps:

• Pilot: Use it in [Project Y] to test DX, performance, and RTL support.
• Document: Create internal guidelines for component usage, theming, and RTL implementation.
• Extend: Contribute fixes or new components if needed (MIT license).

Alternatives: Custom Tailwind components or Alpine.js libraries, but mary gives us 80% of the value with 20% of the effort, now with global language support."*