Component

Invoice Table

Financial invoice tracking table with client logos, invoice numbers, payment status badges, due dates, and action buttons for viewing and marking paid.

Component
Tailwind
HTML
MIT

What it does

Capabilities

Client logos
Invoice numbers
Due dates
Status badges
Payment actions

Preview

Live component

Interactive preview

Open preview

9:41 100%

devsnips.site/library/tailwind/components/tables/invoice-table/

fluid · no fixed width 100%

No dependencies Production-ready

Install

Add to your project

terminal

npx devsnips add Tailwind/Components/Tables/invoice-table

registry path: Tailwind/Components/Tables/invoice-table

Source

Implementation

code.html

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
  <table class="w-full">
    <thead>
      <tr class="bg-gray-50 border-b border-gray-200">
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Invoice</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Client</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Issue Date</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Due Date</th>
        <th class="px-5 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Amount</th>
        <th class="px-5 py-3.5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider">Status</th>
        <th class="px-5 py-3.5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">Actions</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <p class="text-sm font-semibold text-gray-900">INV-2026-0842</p>
          <p class="text-xs text-gray-500">Annual Subscription</p>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center">
              <span class="text-xs font-bold text-white">AC</span>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Acme Corporation</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Mar 1, 2026</td>
        <td class="px-5 py-4 text-sm text-gray-600">Mar 31, 2026</td>
        <td class="px-5 py-4 text-right text-sm font-bold text-gray-900">$12,450.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Pending
          </span>
        </td>
        <td class="px-5 py-4 text-right">
          <div class="flex items-center justify-end gap-1">
            <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
              <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
            </button>
            <button class="p-2 text-gray-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors">
              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </button>
          </div>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <p class="text-sm font-semibold text-gray-900">INV-2026-0841</p>
          <p class="text-xs text-gray-500">Consulting Services</p>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center">
              <span class="text-xs font-bold text-white">TG</span>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">TechGrowth Inc</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Feb 15, 2026</td>
        <td class="px-5 py-4 text-sm text-gray-600">Feb 28, 2026</td>
        <td class="px-5 py-4 text-right text-sm font-bold text-gray-900">$8,750.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">
            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
            Paid
          </span>
        </td>
        <td class="px-5 py-4 text-right">
          <div class="flex items-center justify-end gap-1">
            <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
              <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
            </button>
            <button class="p-2 text-gray-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors">
              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </button>
          </div>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <p class="text-sm font-semibold text-gray-900">INV-2026-0840</p>
          <p class="text-xs text-gray-500">Software License</p>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
              <span class="text-xs font-bold text-white">DS</span>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">DesignStudio LLC</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Feb 1, 2026</td>
        <td class="px-5 py-4 text-sm text-gray-600">Feb 15, 2026</td>
        <td class="px-5 py-4 text-right text-sm font-bold text-gray-900">$3,200.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-rose-100 text-rose-700">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Overdue
          </span>
        </td>
        <td class="px-5 py-4 text-right">
          <div class="flex items-center justify-end gap-1">
            <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
              <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
            </button>
            <button class="p-2 text-gray-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors">
              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </button>
          </div>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <p class="text-sm font-semibold text-gray-900">INV-2026-0839</p>
          <p class="text-xs text-gray-500">Monthly Retainer</p>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center">
              <span class="text-xs font-bold text-white">SM</span>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Smith & Meadows</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Mar 5, 2026</td>
        <td class="px-5 py-4 text-sm text-gray-600">Apr 5, 2026</td>
        <td class="px-5 py-4 text-right text-sm font-bold text-gray-900">$5,000.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700">
            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
            Paid
          </span>
        </td>
        <td class="px-5 py-4 text-right">
          <div class="flex items-center justify-end gap-1">
            <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
              <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
            </button>
            <button class="p-2 text-gray-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors">
              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </button>
          </div>
        </td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-5 py-4">
          <p class="text-sm font-semibold text-gray-900">INV-2026-0838</p>
          <p class="text-xs text-gray-500">Project Development</p>
        </td>
        <td class="px-5 py-4">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center">
              <span class="text-xs font-bold text-white">NV</span>
            </div>
            <div>
              <p class="text-sm font-medium text-gray-900">Nexus Ventures</p>
              <p class="text-xs text-gray-500">[email protected]</p>
            </div>
          </div>
        </td>
        <td class="px-5 py-4 text-sm text-gray-600">Feb 20, 2026</td>
        <td class="px-5 py-4 text-sm text-gray-600">Mar 20, 2026</td>
        <td class="px-5 py-4 text-right text-sm font-bold text-gray-900">$24,800.00</td>
        <td class="px-5 py-4">
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            Pending
          </span>
        </td>
        <td class="px-5 py-4 text-right">
          <div class="flex items-center justify-end gap-1">
            <button class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
              <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
            </button>
            <button class="p-2 text-gray-400 hover:text-emerald-600 hover:bg-emerald-50 rounded-lg transition-colors">
              <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

# Invoice Table

Invoice line-items table.

## Usage
```bash
npx devsnips add Tailwind/Components/Tables/invoice-table
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`

197 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/tables/invoice-table

Prompt instruction

I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/tables/invoice-table/

Install: npx devsnips add
Tailwind/Components/Tables/invoice-table

This is the Invoice Table — Financial invoice tracking table with client logos, invoice numbers, payment status badges, due dates, and action buttons for viewing and marking paid.

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