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-gray-800 rounded-xl shadow-sm border border-gray-700 overflow-hidden">
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="bg-gray-700 text-left">
          <th class="px-4 py-3 font-medium text-gray-400">Name</th>
          <th class="px-4 py-3 font-medium text-gray-400">Email</th>
          <th class="px-4 py-3 font-medium text-gray-400">Role</th>
          <th class="px-4 py-3 font-medium text-gray-400">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-t border-gray-700 hover:bg-gray-700/50 transition-colors">
          <td class="px-4 py-3 text-gray-900">John Smith</td>
          <td class="px-4 py-3 text-gray-300">[email protected]</td>
          <td class="px-4 py-3 text-gray-300">Admin</td>
          <td class="px-4 py-3 text-gray-300">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-700 hover:bg-gray-700/50 transition-colors">
  <td class="px-4 py-3 text-gray-900">John Smith</td>
  ...
</tr>
<tr class="border-t border-gray-700 bg-gray-700 hover:bg-gray-700 transition-colors">
  <td class="px-4 py-3 text-gray-900">Jane Cooper</td>
  ...
</tr>
<!-- Add bg-gray-700 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-700 text-left">
      <th class="px-3 py-2 font-medium text-gray-400">Name</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-gray-700 hover:bg-gray-700/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-600">John Smith</td>
<td class="px-4 py-3 text-gray-300 border border-gray-600">[email protected]</td>
<!-- Add border border-gray-600 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-500/20 text-green-300">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-300 font-medium">Edit</button>
    <button class="text-xs text-red-500 hover:text-red-300 font-medium">Delete</button>
  </div>
</td>
<!-- Status badges: bg-green-500/20 for Active, bg-yellow-500/20 for Pending, bg-gray-700 for Inactive -->