all

Everything you need to know about all in data display. Copy, paste, and customize.

Data Display

Explore all data display components.

Tables1.4kb

Name	Role	Status
John Doe	Developer	Active
Jane Smith	Designer	Online
Alex Johnson	Product	Away

Basic Table

Structured data presentation.

<div className="w-full overflow-hidden rounded-[2rem] border border-border/50 bg-card">
  <table className="w-full text-left border-collapse">
    <thead>
      <tr className="border-b border-border/50">
        <th className="px-8 py-5 text-[10px] font-black uppercase tracking-widest text-muted-foreground">Name</th>
        <th className="px-8 py-5 text-[10px] font-black uppercase tracking-widest text-muted-foreground">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr className="group hover:bg-primary/5 transition-colors border-b border-border/20 last:border-0">
        <td className="px-8 py-5 text-sm font-medium text-foreground">John Doe</td>
        <td className="px-8 py-5 text-sm font-medium text-foreground">Active</td>
      </tr>
    </tbody>
  </table>
</div>

Lists1.0kb

Analytics

Real-time data tracking

Storage

Cloud file management

Security

End-to-end encryption

Simple List

Vertical interactive items.

<div className="space-y-3">
  <div className="flex items-center justify-between p-4 rounded-2xl bg-card border border-border/50 hover:border-primary/50 transition-all cursor-pointer group">
    <div className="flex items-center gap-4">
      <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
        <Sparkles className="w-5 h-5" />
      </div>
      <div>
        <h4 className="text-sm font-bold text-foreground group-hover:text-primary transition-colors">Analytics</h4>
        <p className="text-xs text-muted-foreground">Real-time data tracking</p>
      </div>
    </div>
    <ChevronRight className="w-4 h-4 text-muted-foreground group-hover:text-primary transition-all group-hover:translate-x-1" />
  </div>
</div>