File List

Collection of files.

html

<table class="flist" data-density="Comfortable">
  <caption class="flist__caption">Shared with you</caption>
  <thead><tr><th scope="col">Name</th><th scope="col">Size</th><th scope="col">Modified</th></tr></thead>
  <tbody data-rows="4">
    <tr><td><span class="flist__dot" style="background:#BFD9F2;"></span>brief.docx</td><td>240 KB</td><td><time datetime="2026-08-14">14 Aug</time></td></tr>
    <tr><td><span class="flist__dot" style="background:#BFD9F2;"></span>budget.xlsx</td><td>88 KB</td><td><time datetime="2026-08-12">12 Aug</time></td></tr>
    <tr><td><span class="flist__dot" style="background:#BFD9F2;"></span>roadmap.pdf</td><td>640 KB</td><td><time datetime="2026-08-09">9 Aug</time></td></tr>
    <tr><td><span class="flist__dot" style="background:#BFD9F2;"></span>photo.jpg</td><td>1.1 MB</td><td><time datetime="2026-08-02">2 Aug</time></td></tr>
  </tbody>
</table>
<style>
.flist { border-collapse: collapse; width: 360px; font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; }
.flist__caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.flist th, .flist td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #24143014; }
.flist th { color: #24143099; font-weight: 600; font-size: 12px; }
.flist__dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 8px; }
.flist[data-density="Compact"] td, .flist[data-density="Compact"] th { padding: 4px 10px; }
tbody[data-rows="3"] tr:nth-child(n+4) { display: none; }
</style>

tailwind

<table class="border-collapse w-[360px] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] flist-tw" data-density="Comfortable">
  <caption class="text-left font-bold pb-2">Shared with you</caption>
  <thead><tr><th scope="col" class="text-left p-2.5 border-b border-[#24143014] text-[#241430]/60 font-semibold text-xs">Name</th><th scope="col" class="text-left p-2.5 border-b border-[#24143014] text-[#241430]/60 font-semibold text-xs">Size</th><th scope="col" class="text-left p-2.5 border-b border-[#24143014] text-[#241430]/60 font-semibold text-xs">Modified</th></tr></thead>
  <tbody data-rows="4">
    <tr><td class="p-2.5 border-b border-[#24143014]"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background:#BFD9F2"></span>brief.docx</td><td class="p-2.5 border-b border-[#24143014]">240 KB</td><td class="p-2.5 border-b border-[#24143014]"><time datetime="2026-08-14">14 Aug</time></td></tr>
    <tr><td class="p-2.5 border-b border-[#24143014]"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background:#BFD9F2"></span>budget.xlsx</td><td class="p-2.5 border-b border-[#24143014]">88 KB</td><td class="p-2.5 border-b border-[#24143014]"><time datetime="2026-08-12">12 Aug</time></td></tr>
    <tr><td class="p-2.5 border-b border-[#24143014]"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background:#BFD9F2"></span>roadmap.pdf</td><td class="p-2.5 border-b border-[#24143014]">640 KB</td><td class="p-2.5 border-b border-[#24143014]"><time datetime="2026-08-09">9 Aug</time></td></tr>
    <tr><td class="p-2.5"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background:#BFD9F2"></span>photo.jpg</td><td class="p-2.5">1.1 MB</td><td class="p-2.5"><time datetime="2026-08-02">2 Aug</time></td></tr>
  </tbody>
</table>
<style>
.flist-tw[data-density="Compact"] td, .flist-tw[data-density="Compact"] th { padding-top: 4px; padding-bottom: 4px; }
tbody[data-rows="3"] tr:nth-child(n+4) { display: none; }
</style>

react

export function FileList({
  caption = "Shared with you",
  rows = "4",
  showDate = true,
  density = "Comfortable",
  accent = "#BFD9F2",
}) {
  const pad = density === "Compact" ? "4px 10px" : "8px 10px";
  const files = [
    { name: "brief.docx", size: "240 KB", date: "2026-08-14", label: "14 Aug" },
    { name: "budget.xlsx", size: "88 KB", date: "2026-08-12", label: "12 Aug" },
    { name: "roadmap.pdf", size: "640 KB", date: "2026-08-09", label: "9 Aug" },
    { name: "photo.jpg", size: "1.1 MB", date: "2026-08-02", label: "2 Aug" },
  ].slice(0, Number(rows));
  const cell = { textAlign: "left", padding: pad, borderBottom: "1px solid #24143014" };
  return (
    <table style={{ borderCollapse: "collapse", width: 360, font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
      <caption style={{ textAlign: "left", fontWeight: 700, paddingBottom: 8 }}>{caption}</caption>
      <thead>
        <tr>
          <th scope="col" style={{ ...cell, color: "#24143099", fontWeight: 600, fontSize: 12 }}>Name</th>
          <th scope="col" style={{ ...cell, color: "#24143099", fontWeight: 600, fontSize: 12 }}>Size</th>
          {showDate && <th scope="col" style={{ ...cell, color: "#24143099", fontWeight: 600, fontSize: 12 }}>Modified</th>}
        </tr>
      </thead>
      <tbody>
        {files.map((f) => (
          <tr key={f.name}>
            <td style={cell}><span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 999, marginRight: 8, background: accent }} />{f.name}</td>
            <td style={cell}>{f.size}</td>
            {showDate && <td style={cell}><time dateTime={f.date}>{f.label}</time></td>}
          </tr>
        ))}
      </tbody>
    </table>
  );
}