Notifications

3 new
MS

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

EW

Emma Wilson commented on Homepage Redesign

45 minutes ago

JM

James Miller mentioned you in Sprint Planning

2 hours ago

SC

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

DK

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Tables

Data table styles and variations.

Basic Table

Name Email Role Status
John Smith [email protected] Admin Active
Jane Cooper [email protected] Editor Active
Robert Fox [email protected] Viewer Pending
Leslie Alexander [email protected] Contributor Inactive
Cameron Williamson [email protected] Manager Active 
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="bg-gray-50 text-left">
          <th class="px-4 py-3 font-medium text-gray-500">Name</th>
          <th class="px-4 py-3 font-medium text-gray-500">Email</th>
          <th class="px-4 py-3 font-medium text-gray-500">Role</th>
          <th class="px-4 py-3 font-medium text-gray-500">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-t border-gray-100 hover:bg-gray-50 transition-colors">
          <td class="px-4 py-3 text-gray-900">John Smith</td>
          <td class="px-4 py-3 text-gray-600">[email protected]</td>
          <td class="px-4 py-3 text-gray-600">Admin</td>
          <td class="px-4 py-3 text-gray-600">Active</td>
        </tr>
        ...
      </tbody>
    </table>
  </div>
</div>

Striped Table

Name Email Role Status
John Smith [email protected] Admin Active
Jane Cooper [email protected] Editor Active
Robert Fox [email protected] Viewer Pending
Leslie Alexander [email protected] Contributor Inactive
Cameron Williamson [email protected] Manager Active 
<tr class="border-t border-gray-100 hover:bg-gray-50 transition-colors">
  <td class="px-4 py-3 text-gray-900">John Smith</td>
  ...
</tr>
<tr class="border-t border-gray-100 bg-gray-50 hover:bg-gray-100 transition-colors">
  <td class="px-4 py-3 text-gray-900">Jane Cooper</td>
  ...
</tr>
<!-- Add bg-gray-50 to even rows for striped effect -->

Compact Table

Name Email Role Status
John Smith [email protected] Admin Active
Jane Cooper [email protected] Editor Active
Robert Fox [email protected] Viewer Pending
Leslie Alexander [email protected] Contributor Inactive
Cameron Williamson [email protected] Manager Active 
<table class="w-full text-xs">
  <thead>
    <tr class="bg-gray-50 text-left">
      <th class="px-3 py-2 font-medium text-gray-500">Name</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-gray-100 hover:bg-gray-50 transition-colors">
      <td class="px-3 py-2 text-gray-900">John Smith</td>
      ...
    </tr>
  </tbody>
</table>
<!-- Use text-xs and px-3 py-2 for compact layout -->

Bordered Table

Name Email Role Status
John Smith [email protected] Admin Active
Jane Cooper [email protected] Editor Active
Robert Fox [email protected] Viewer Pending
Leslie Alexander [email protected] Contributor Inactive
Cameron Williamson [email protected] Manager Active 
<td class="px-4 py-3 text-gray-900 border border-gray-200">John Smith</td>
<td class="px-4 py-3 text-gray-600 border border-gray-200">[email protected]</td>
<!-- Add border border-gray-200 to all th and td cells -->

Table with Actions

Name Email Role Status Actions
John Smith [email protected] Admin Active
Jane Cooper [email protected] Editor Active
Robert Fox [email protected] Viewer Pending
Leslie Alexander [email protected] Contributor Inactive
Cameron Williamson [email protected] Manager Active 
<td class="px-4 py-3">
  <span class="inline-block text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-700">Active</span>
</td>
<td class="px-4 py-3">
  <div class="flex items-center gap-2">
    <button class="text-xs text-alpine-500 hover:text-alpine-700 font-medium">Edit</button>
    <button class="text-xs text-red-500 hover:text-red-700 font-medium">Delete</button>
  </div>
</td>
<!-- Status badges: bg-green-100 for Active, bg-yellow-100 for Pending, bg-gray-100 for Inactive -->