devsnips
Search docs, APIs, guides…

Component

Checkout Modal

Full checkout flow modal with order items, summary with pricing breakdown, promo code input, and payment method selection.

  • Component
  • Tailwind
  • HTML
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/modals/checkout-modal/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Modals/checkout-modal
registry path: Tailwind/Components/Modals/checkout-modal

Source

Implementation

code.html 
<!-- Checkout Modal -->
<div id="checkout-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/60 backdrop-blur-sm" onclick="closeModal('checkout-modal')"></div>
  
  <!-- Modal Container -->
  <div class="fixed inset-4 md:inset-auto md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:w-full md:max-w-4xl md:max-h-[90vh] bg-white dark:bg-gray-900 rounded-2xl shadow-2xl flex flex-col transform transition-all overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="checkout-modal-title">
    
    <!-- Header -->
    <div class="flex-shrink-0 flex items-center justify-between p-6 border-b border-gray-100 dark:border-gray-800">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-xl flex items-center justify-center">
          <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
          </svg>
        </div>
        <div>
          <h3 id="checkout-modal-title" class="text-lg font-semibold text-gray-900 dark:text-white">Checkout</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Review your order</p>
        </div>
      </div>
      <button onclick="closeModal('checkout-modal')" class="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
    
    <!-- Content -->
    <div class="flex-1 overflow-y-auto">
      <div class="grid md:grid-cols-2 gap-6 p-6">
        <!-- Order Items -->
        <div class="space-y-4">
          <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Order Items</h4>
          
          <!-- Item 1 -->
          <div class="flex gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
            <div class="w-20 h-20 bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900/30 dark:to-purple-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-10 h-10 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
              </svg>
            </div>
            <div class="flex-1">
              <h5 class="font-medium text-gray-900 dark:text-white">Pro Subscription</h5>
              <p class="text-sm text-gray-500 dark:text-gray-400">Annual plan • Billed yearly</p>
              <p class="mt-1 font-semibold text-indigo-600 dark:text-indigo-400">$99.00</p>
            </div>
            <button class="self-start p-1.5 text-gray-400 hover:text-red-500 transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
              </svg>
            </button>
          </div>
          
          <!-- Item 2 -->
          <div class="flex gap-4 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl">
            <div class="w-20 h-20 bg-gradient-to-br from-amber-100 to-orange-100 dark:from-amber-900/30 dark:to-orange-900/30 rounded-lg flex items-center justify-center">
              <svg class="w-10 h-10 text-amber-600 dark:text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
              </svg>
            </div>
            <div class="flex-1">
              <h5 class="font-medium text-gray-900 dark:text-white">Developer Course</h5>
              <p class="text-sm text-gray-500 dark:text-gray-400">Complete Web Development</p>
              <p class="mt-1 font-semibold text-amber-600 dark:text-amber-400">$49.00</p>
            </div>
            <button class="self-start p-1.5 text-gray-400 hover:text-red-500 transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
              </svg>
            </button>
          </div>
        </div>
        
        <!-- Order Summary -->
        <div class="space-y-4">
          <h4 class="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Order Summary</h4>
          
          <div class="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl p-6 text-white">
            <div class="space-y-3">
              <div class="flex justify-between text-sm opacity-90">
                <span>Subtotal</span>
                <span>$148.00</span>
              </div>
              <div class="flex justify-between text-sm opacity-90">
                <span>Discount (20%)</span>
                <span>-$29.60</span>
              </div>
              <div class="flex justify-between text-sm opacity-90">
                <span>Tax</span>
                <span>$11.84</span>
              </div>
              <div class="border-t border-white/20 pt-3 mt-3">
                <div class="flex justify-between">
                  <span class="font-semibold">Total</span>
                  <span class="text-2xl font-bold">$130.24</span>
                </div>
              </div>
            </div>
            
            <!-- Promo Code -->
            <div class="mt-6">
              <div class="flex gap-2">
                <input type="text" placeholder="Promo code" class="flex-1 px-4 py-2 bg-white/20 backdrop-blur rounded-lg text-white placeholder-white/60 border border-white/20 focus:outline-none focus:ring-2 focus:ring-white/50">
                <button class="px-4 py-2 bg-white text-indigo-600 font-medium rounded-lg hover:bg-white/90 transition-colors">Apply</button>
              </div>
            </div>
          </div>
          
          <!-- Payment Method -->
          <div class="bg-gray-50 dark:bg-gray-800 rounded-xl p-4">
            <div class="flex items-center justify-between mb-3">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Payment Method</span>
              <button class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">Change</button>
            </div>
            <div class="flex items-center gap-3">
              <div class="w-12 h-8 bg-gradient-to-r from-blue-600 to-blue-800 rounded flex items-center justify-center text-white text-xs font-bold">VISA</div>
              <div class="flex-1">
                <p class="text-sm font-medium text-gray-900 dark:text-white">•••• •••• •••• 4242</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Expires 12/28</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Footer -->
    <div class="flex-shrink-0 p-6 border-t border-gray-100 dark:border-gray-800">
      <div class="flex gap-3">
        <button onclick="closeModal('checkout-modal')" class="flex-1 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">Continue Shopping</button>
        <button onclick="closeModal('checkout-modal')" class="flex-1 py-3 text-sm font-medium text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 transition-colors flex items-center justify-center gap-2">
          <span>Complete Purchase</span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openModal('checkout-modal')" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-xl hover:bg-indigo-700 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Open Checkout Modal</button>
144 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/modals/checkout-modal
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/modals/checkout-modal/

Install: npx devsnips add
Tailwind/Components/Modals/checkout-modal

This is the Checkout Modal — Full checkout flow modal with order items, summary with pricing breakdown, promo code input, and payment method selection.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/modals/checkout-modal