MAPLE

soamn/maple

Get Beautiful Ui Components for Laravel/Blade

!! Important - Remember to add Following CDN for alpine.js

<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

📚 Quick Links

• Install Instructions
• 🔘 Button Base
• 🃏 Card - Untouchable
• 🌀 Card - Carousal 3D
• 💬 Tooltip
• ⌨️ Typewriter
• 📁 Sidebar

---

Install command

composer require soman/maple

php artisan maple:install [component]

Package Link

Components

Button Base

php artisan maple:install button/base

      <x-maple.button.base>
            Button
      </x-maple.button.base>

---

Card/untouchable

php artisan maple:install card/untouchable

Props

maxRotation how much does the card rotate along the axis

      <x-maple.card.untouchable maxRotation=20 >
        <div>
        <p class="text-lg">Untouchable</p>
        <p class="text-sm">Touch me if you can</p>
        </div>
        <img src= '' alt="">
    </x-maple.card.untouchable>

---

Card/carousal3d

php artisan maple:install card/carousal3d

Props

• :items=[] array of array with id and image

• autoRotate default-false Rotates the cards after several interval

        <x-maple.card.carousal3d :items="[
        [
            'id' => 1,
            'image' =>
                'https://example.png',
        ],
      .
      .
      .

    ]" />

---

tooltip

php artisan maple:install tooltip

Props

'tooltipBackground' => 'bg-black', 'tooltipText' => 'text-white', 'tooltipWidth' => '20',

:items=[] array of array with id and image

tooltipBackground Background Color of tooltip

tooltipText text color of tooltip

tooltipWidth width of the tooltip card

  <x-maple.tooltip :items="[
            ['id' => 2, 'name' => 'Jane', 'designation' => 'Designer', 'image' => 'https://example']
            .
            .
            .

           ]"
            tooltioWidth='fit' />

typewriter

php artisan maple:install typewriter

Props

text string

 <x-maple.typewriter class="w-100"
            text="I lost control I wanted to kill him what that makes me " />

sidebar

php artisan maple:install typewriter

Props

color bg-white

text text-black

boder border-zinc-800

Named Slots

header

SidebarItems

    <x-maple.sidebar color='bg-black' text="text-white" border="border-zinc-900">
        <x-slot name='header'>
            <span class="font-bold text-xl">Sidebar</span>
        </x-slot>

        <x-slot name="SidebarItems">
            <a href="#" class="block  px-3 py-2 rounded">Dashboard</a>
            <a href="#" class="block  px-3 py-2 rounded">Projects</a>
            <a href="#" class="block  px-3 py-2 rounded">Settings</a>
        </x-slot>


        <div class="p-6">
            <h1 class="text-3xl font-bold mb-4">Main Content</h1>
            <p>This content smoothly shifts when the sidebar opens or closes. Alpine.js manages the state.</p>
        </div>

    </x-maple.sidebar>