Data Display Components

Data display components present information in various formats to make it easy for users to consume and understand.

Separator

A separator visually divides content into sections.

Section 1

This is the content for section 1.

Section 2

This is the content for section 2.

<div className="space-y-1">
  <h4 className="text-sm font-medium">Section 1</h4>
  <p className="text-sm text-justify">This is the content for section 1.</p>
</div>
<Separator className="my-4" />
<div className="space-y-1">
  <h4 className="text-sm font-medium">Section 2</h4>
  <p className="text-sm text-justify">This is the content for section 2.</p>
</div>

Data Table

Tables display information in a grid-like format of rows and columns.

Name	Email	Status
John Doe	john@example.com	Active
Jane Smith	jane@example.com	Inactive

<table className="w-full border-collapse">
  <thead>
    <tr className="border-b">
      <th className="text-left p-2">Name</th>
      <th className="text-left p-2">Email</th>
      <th className="text-left p-2">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr className="border-b">
      <td className="p-2">John Doe</td>
      <td className="p-2">john@example.com</td>
      <td className="p-2">
        <Badge className="rounded-2xl">Active</Badge>
      </td>
    </tr>
    <tr className="border-b">
      <td className="p-2">Jane Smith</td>
      <td className="p-2">jane@example.com</td>
      <td className="p-2">
        <Badge variant="outline" className="rounded-2xl">Inactive</Badge>
      </td>
    </tr>
  </tbody>
</table>

Previous: Navigation Next: Patterns