LogoReactUI Library
HomeComponentsShowcaseThemesNServicesNNextGenNPricingContact

Resources

Theme ExtractorExtract palettes from any site or imageColor LabPick, mix, export & engineer colorsGalleryUI screenshots & inspirationBlogArticles & tutorialsDocumentationGuides & API referenceAboutCompany, mission & teamExamplesReal-world code examples
  1. Home
  2. /Components
  3. /Data Display
R
ReactUI

A comprehensive React component library with beautiful design, accessibility, and developer experience in mind.

Product

  • Components
  • Documentation
  • Examples
  • Buttons
  • Cards

Resources

  • Getting Started
  • Installation
  • Theming
  • API Reference
  • Free PDF & Image Tools

Community

  • About Us
  • GitHub
  • Discord
  • Twitter

© 2026 ReactUI Library. All rights reserved.

Privacy PolicyTerms of ServiceRefund Policy
Components/Data Display

Data Display.

Selectable data tables, animated progress rings, KPI sparklines, timelines and leaderboards — data components that feel alive instead of static.

8 componentsFree · copy-pasteTailwind CSS
ButtonsCardsFormsNavigationData DisplayFeedbackLayoutOverlayHero SectionsDashboardLandingBlog & ContentSettings

Data Table with Selection

Team members

MemberRoleStatusMRR
AK

Ayush Kumar

ayush@uidrops.dev

OwnerActive$4,200
PS

Priya Sharma

priya@lumina.io

AdminActive$2,840
RM

Rahul Mehta

rahul@nebula.app

EditorInvited$1,120
SA

Sara Ali

sara@voltify.co

ViewerSuspended$0

Row checkboxes with working select-all, avatar cells, status pills and hover states — try selecting rows.

T
data-table-with-selection.tsx
1function DataTable() {
2 const rows = [
3 { name: "Ayush Kumar", email: "ayush@uidrops.dev", role: "Owner", status: "Active", mrr: "$4,200" },
4 { name: "Priya Sharma", email: "priya@lumina.io", role: "Admin", status: "Active", mrr: "$2,840" },
5 { name: "Rahul Mehta", email: "rahul@nebula.app", role: "Editor", status: "Invited", mrr: "$1,120" },
6 { name: "Sara Ali", email: "sara@voltify.co", role: "Viewer", status: "Suspended", mrr: "$0" },
7 ];
8 const [selected, setSelected] = useState<number[]>([]);
9 const allSelected = selected.length === rows.length;
10 
11 const toggle = (i: number) =>
12 setSelected((s) => (s.includes(i) ? s.filter((x) => x !== i) : [...s, i]));
13 
14 return (
15 <div "color:#79c0ff">className="overflow-hidden rounded-2xl border border-white/10 bg-white/[0.02]">
16 {/* toolbar */}
17 <div "color:#79c0ff">className="flex items-center justify-between border-b border-white/8 px-5 py-3">
18 <p "color:#79c0ff">className="text-sm font-bold text-white">
19 Team members
20 {selected.length > 0 && (
21 <span "color:#79c0ff">className="ml-2 rounded-full bg-violet-500/20 px-2 py-0.5 text-[10px] font-bold text-violet-300">
22 {selected.length} selected
23 </span>
24 )}
25 </p>
26 <button "color:#79c0ff">className="rounded-lg bg-violet-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-violet-500">
27 + Invite
28 </button>
29 </div>
30 
31 <table "color:#79c0ff">className="w-full text-sm">
32 <thead>
33 <tr "color:#79c0ff">className="border-b border-white/8 text-left text-[11px] font-semibold uppercase tracking-wider text-white/30">
34 <th "color:#79c0ff">className="w-12 px-5 py-3">
35 <input "color:#79c0ff">type="checkbox" "color:#79c0ff">checked={allSelected}
36 "color:#79c0ff">onChange={() => setSelected(allSelected ? [] : rows.map((_, i) => i))}
37 "color:#79c0ff">className="h-4 w-4 rounded accent-violet-500" />
38 </th>
39 <th "color:#79c0ff">className="py-3">Member</th>
40 <th "color:#79c0ff">className="py-3">Role</th>
41 <th "color:#79c0ff">className="py-3">Status</th>
42 <th "color:#79c0ff">className="py-3 text-right pr-5">MRR</th>
43 </tr>
44 </thead>
45 <tbody>
46 {rows.map((r, i) => (
47 <tr "color:#79c0ff">key={r.email}
48 "color:#79c0ff">className={"border-b border-white/5 transition-colors " +
49 (selected.includes(i) ? "bg-violet-500/[0.07]" : "hover:bg-white/[0.03]")}>
50 <td "color:#79c0ff">className="px-5 py-3.5">
51 <input "color:#79c0ff">type="checkbox" "color:#79c0ff">checked={selected.includes(i)} "color:#79c0ff">onChange={() => toggle(i)}
52 "color:#79c0ff">className="h-4 w-4 rounded accent-violet-500" />
53 </td>
54 <td "color:#79c0ff">className="py-3.5">
55 <div "color:#79c0ff">className="flex items-center gap-3">
56 <span "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 text-[10px] font-black text-white">
57 {r.name.split(" ").map((w) => w[0]).join("")}
58 </span>
59 <div>
60 <p "color:#79c0ff">className="font-semibold text-white">{r.name}</p>
61 <p "color:#79c0ff">className="text-xs text-white/35">{r.email}</p>
62 </div>
63 </div>
64 </td>
65 <td "color:#79c0ff">className="py-3.5 text-white/55">{r.role}</td>
66 <td "color:#79c0ff">className="py-3.5"><StatusPill status={r.status} /></td>
67 <td "color:#79c0ff">className="py-3.5 pr-5 text-right font-semibold text-white/80">{r.mrr}</td>
68 </tr>
69 ))}
70 </tbody>
71 </table>
72 </div>
73 );
74}
⬡ UIDrop Component74 lines
TypeScript ReactUTF-8

Animated Progress Rings

84%

Uptime

62%

Storage

45%

CPU

SVG rings that draw themselves in on load — gradient stroke, rounded caps, centered values.

T
animated-progress-rings.tsx
1function Ring({ pct, label, from, to }: { pct: number; label: string; from: string; to: string }) {
2 const C = 2 * Math.PI * 42; // ≈ 264
3 const id = "ring-" + label;
4 
5 return (
6 <div "color:#79c0ff">className="flex flex-col items-center gap-2">
7 <div "color:#79c0ff">className="relative h-24 w-24">
8 <svg viewBox="0 0 100 100" "color:#79c0ff">className="h-full w-full -rotate-90">
9 <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="10" />
10 <circle cx="50" cy="50" r="42" fill="none" stroke={"url(#" + id + ")"} strokeWidth="10"
11 strokeLinecap="round" strokeDasharray={C}
12 strokeDashoffset={C * (1 - pct / 100)}
13 "color:#79c0ff">style={{ transition: "stroke-dashoffset 1.2s cubic-bezier(0.22,0.61,0.36,1)" }} />
14 <defs>
15 <linearGradient "color:#79c0ff">id={id} x1="0" y1="0" x2="1" y2="1">
16 <stop offset="0%" stopColor={from} /><stop offset="100%" stopColor={to} />
17 </linearGradient>
18 </defs>
19 </svg>
20 <span "color:#79c0ff">className="absolute inset-0 flex items-center justify-center text-lg font-extrabold text-white">
21 {pct}%
22 </span>
23 </div>
24 <p "color:#79c0ff">className="text-xs font-semibold text-white/45">{label}</p>
25 </div>
26 );
27}
⬡ UIDrop Component27 lines
TypeScript ReactUTF-8

Badges & Status Pills

OperationalDegradedOutage
BetaNewDraft✦ PROv2.4.0
1299+

Soft glass badges, glowing live indicators, gradient tags and notification counters.

T
badges-&-status-pills.tsx
1{/* status with live dot */}
2<span "color:#79c0ff">className="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400 ring-1 ring-inset ring-emerald-400/25">
3 <span "color:#79c0ff">className="relative flex h-1.5 w-1.5">
4 <span "color:#79c0ff">className="absolute h-full w-full animate-ping rounded-full bg-emerald-400 opacity-70" />
5 <span "color:#79c0ff">className="relative h-1.5 w-1.5 rounded-full bg-emerald-400" />
6 </span>
7 Operational
8</span>
9 
10{/* soft variants */}
11<span "color:#79c0ff">className="rounded-full bg-violet-500/12 px-3 py-1 text-xs font-semibold text-violet-300 ring-1 ring-inset ring-violet-400/25">Beta</span>
12<span "color:#79c0ff">className="rounded-full bg-amber-500/12 px-3 py-1 text-xs font-semibold text-amber-300 ring-1 ring-inset ring-amber-400/25">Pending</span>
13<span "color:#79c0ff">className="rounded-full bg-rose-500/12 px-3 py-1 text-xs font-semibold text-rose-300 ring-1 ring-inset ring-rose-400/25">Failed</span>
14 
15{/* gradient + counter */}
16<span "color:#79c0ff">className="rounded-full bg-gradient-to-r from-violet-600 to-fuchsia-600 px-3 py-1 text-xs font-bold text-white shadow-lg shadow-violet-500/30">✦ PRO</span>
17<span "color:#79c0ff">className="relative inline-flex">
18 <BellIcon "color:#79c0ff">className="h-6 w-6 text-white/60" />
19 <span "color:#79c0ff">className="absolute -right-1.5 -top-1.5 flex h-4.5 min-w-4.5 items-center justify-center rounded-full bg-rose-500 px-1 text-[9px] font-black text-white">12</span>
20</span>
⬡ UIDrop Component20 lines
TypeScript ReactUTF-8

Avatars & Stacks

SM
MD
LG
XL
AK
PS
AK
PS
RM
SA
+8

Gradient initials, status dots, story rings and overlapping team stacks with overflow counters.

T
avatars-&-stacks.tsx
1{/* status avatar */}
2<div "color:#79c0ff">className="relative">
3 <div "color:#79c0ff">className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 text-sm font-black text-white">AK</div>
4 <span "color:#79c0ff">className="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full bg-emerald-400 ring-[3px] ring-[#05050c]" />
5</div>
6 
7{/* story ring */}
8<div "color:#79c0ff">className="rounded-full bg-gradient-to-tr from-amber-400 via-rose-500 to-fuchsia-600 p-[2.5px]">
9 <div "color:#79c0ff">className="rounded-full bg-[#05050c] p-[2.5px]">
10 <div "color:#79c0ff">className="flex h-11 w-11 items-center justify-center rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 text-xs font-black text-white">PS</div>
11 </div>
12</div>
13 
14{/* team stack */}
15<div "color:#79c0ff">className="flex -space-x-3">
16 {["AK", "PS", "RM", "SA"].map((x, i) => (
17 <div "color:#79c0ff">key={x} "color:#79c0ff">className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 text-[10px] font-black text-white ring-[3px] ring-[#05050c] transition-transform hover:-translate-y-1"
18 "color:#79c0ff">style={{ zIndex: 4 - i }}>
19 {x}
20 </div>
21 ))}
22 <div "color:#79c0ff">className="z-0 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-[10px] font-bold text-white/60 ring-[3px] ring-[#05050c]">+8</div>
23</div>
⬡ UIDrop Component23 lines
TypeScript ReactUTF-8

Activity Timeline

  1. 🚀

    Deployed to production

    v2.4.0 · main

    2m ago
  2. 💬

    Priya commented on PR #482

    “Ship it! The spotlight effect is 🔥”

    18m ago
  3. ⚠️

    High memory on worker-3

    Auto-scaled to 4 instances

    1h ago
  4. ✅

    CI passed — 148 tests

    feat/new-dashboard

    3h ago

Icon nodes on a connector line with typed events — deploys, comments, alerts and merges.

T
activity-timeline.tsx
1const events = [
2 { icon: "🚀", ring: "ring-violet-400/40 bg-violet-500/15", title: "Deployed to production",
3 meta: "v2.4.0 · main", time: "2m ago" },
4 { icon: "💬", ring: "ring-cyan-400/40 bg-cyan-500/15", title: "Priya commented on PR #482",
5 meta: '"Ship it! The spotlight effect is 🔥"', time: "18m ago" },
6 { icon: "⚠️", ring: "ring-amber-400/40 bg-amber-500/15", title: "High memory on worker-3",
7 meta: "Auto-scaled to 4 instances", time: "1h ago" },
8 { icon: "✅", ring: "ring-emerald-400/40 bg-emerald-500/15", title: "CI passed — 148 tests",
9 meta: "feat/new-dashboard", time: "3h ago" },
10];
11 
12<ol "color:#79c0ff">className="relative space-y-6 pl-2">
13 {/* connector */}
14 <span "color:#79c0ff">className="absolute bottom-2 left-[22px] top-2 w-px bg-gradient-to-b from-violet-500/50 via-white/10 to-transparent" />
15 {events.map((e) => (
16 <li "color:#79c0ff">key={e.title} "color:#79c0ff">className="relative flex items-start gap-4">
17 <span "color:#79c0ff">className={"z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm ring-1 " + e.ring}>
18 {e.icon}
19 </span>
20 <div "color:#79c0ff">className="min-w-0 pt-0.5">
21 <p "color:#79c0ff">className="text-sm font-semibold text-white">{e.title}</p>
22 <p "color:#79c0ff">className="truncate text-xs text-white/40">{e.meta}</p>
23 </div>
24 <span "color:#79c0ff">className="ml-auto shrink-0 pt-1 text-[11px] text-white/30">{e.time}</span>
25 </li>
26 ))}
27</ol>
⬡ UIDrop Component27 lines
TypeScript ReactUTF-8

Leaderboard

🥇AK
Ayush K.9,840
▲
🥈PS
Priya S.8,420
▲
🥉RM
Rahul M.7,150
▼
#4SA
Sara A.5,920
▲

Medal ranks, animated score bars and delta arrows — gamification-ready.

T
leaderboard.tsx
1const players = [
2 { rank: 1, name: "Ayush K.", pts: 9840, w: 100, up: true },
3 { rank: 2, name: "Priya S.", pts: 8420, w: 86, up: true },
4 { rank: 3, name: "Rahul M.", pts: 7150, w: 73, up: false },
5 { rank: 4, name: "Sara A.", pts: 5920, w: 60, up: true },
6];
7const medals = ["🥇", "🥈", "🥉"];
8 
9<div "color:#79c0ff">className="w-full max-w-md space-y-2.5">
10 {players.map((p, i) => (
11 <div "color:#79c0ff">key={p.name}
12 "color:#79c0ff">className={"flex items-center gap-3 rounded-2xl border p-3 transition-colors " +
13 (i === 0 ? "border-amber-400/30 bg-amber-500/[0.06]" : "border-white/8 bg-white/[0.03] hover:border-white/20")}>
14 <span "color:#79c0ff">className="w-8 text-center text-lg">{medals[i] ?? "#" + p.rank}</span>
15 <span "color:#79c0ff">className="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-violet-500 to-indigo-600 text-[10px] font-black text-white">
16 {p.name.split(" ").map((w) => w[0]).join("")}
17 </span>
18 <div "color:#79c0ff">className="min-w-0 flex-1">
19 <div "color:#79c0ff">className="flex justify-between text-sm">
20 <span "color:#79c0ff">className="font-semibold text-white">{p.name}</span>
21 <span "color:#79c0ff">className="font-bold text-white/70">{p.pts.toLocaleString()}</span>
22 </div>
23 <div "color:#79c0ff">className="mt-1.5 h-1.5 rounded-full bg-white/8">
24 <div "color:#79c0ff">className="h-full origin-left rounded-full bg-gradient-to-r from-violet-500 to-fuchsia-500"
25 "color:#79c0ff">style={{ width: p.w + "%", animation: "barGrow .9s " + i * 0.1 + "s both" }} />
26 </div>
27 </div>
28 <span "color:#79c0ff">className={"text-xs font-bold " + (p.up ? "text-emerald-400" : "text-rose-400")}>
29 {p.up ? "▲" : "▼"}
30 </span>
31 </div>
32 ))}
33</div>
⬡ UIDrop Component33 lines
TypeScript ReactUTF-8

KPI Tiles with Area Sparklines

MRR

+18%

$48.2k

Daily active

+9%

12.8k

Conversion

+0.8%

3.64%

Churn

-0.3%

1.92%

SVG area sparklines under headline numbers — gradient fill, smooth polyline, per-metric accents.

T
kpi-tiles-with-area-sparklines.tsx
1function Sparkline({ points, color }: { points: number[]; color: string }) {
2 // map values to a 100×32 viewBox polyline
3 const max = Math.max(...points), min = Math.min(...points);
4 const coords = points.map((v, i) => {
5 const x = (i / (points.length - 1)) * 100;
6 const y = 30 - ((v - min) / (max - min || 1)) * 26;
7 return x + "," + y;
8 });
9 
10 return (
11 <svg viewBox="0 0 100 32" preserveAspectRatio="none" "color:#79c0ff">className="h-10 w-full">
12 <polygon points={"0,32 " + coords.join(" ") + " 100,32"} fill={color} opacity="0.15" />
13 <polyline points={coords.join(" ")} fill="none" stroke={color} strokeWidth="1.8"
14 strokeLinecap="round" strokeLinejoin="round" />
15 </svg>
16 );
17}
18 
19<div "color:#79c0ff">className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
20 <div "color:#79c0ff">className="flex items-center justify-between">
21 <p "color:#79c0ff">className="text-xs font-semibold uppercase tracking-wider text-white/40">MRR</p>
22 <span "color:#79c0ff">className="rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold text-emerald-400">+18%</span>
23 </div>
24 <p "color:#79c0ff">className="mt-1.5 text-3xl font-extrabold text-white">$48.2k</p>
25 <Sparkline points={[12, 18, 14, 22, 19, 28, 24, 34, 30, 42]} color="#a78bfa" />
26</div>
⬡ UIDrop Component26 lines
TypeScript ReactUTF-8

AI Token Usage Meter

Token usage this month

1.42M / 2M

71% usedalert at 80%
Claude 4.5 · 820k GPT-5 · 410k Embeddings · 190k

Segmented quota meter with gradient fill, threshold marker and per-model breakdown chips.

T
ai-token-usage-meter.tsx
1<div "color:#79c0ff">className="w-full max-w-xl rounded-2xl border border-white/10 bg-white/[0.03] p-6">
2 <div "color:#79c0ff">className="flex items-baseline justify-between">
3 <p "color:#79c0ff">className="text-sm font-bold text-white">Token usage <span "color:#79c0ff">className="ml-1 text-xs font-medium text-white/35">this month</span></p>
4 <p "color:#79c0ff">className="text-sm font-extrabold text-white">1.42M <span "color:#79c0ff">className="text-xs font-medium text-white/35">/ 2M</span></p>
5 </div>
6 
7 {/* meter with threshold marker at 80% */}
8 <div "color:#79c0ff">className="relative mt-4 h-3 rounded-full bg-white/8">
9 <div "color:#79c0ff">className="h-full w-[71%] rounded-full bg-gradient-to-r from-violet-600 via-fuchsia-500 to-cyan-400" />
10 <span "color:#79c0ff">className="absolute left-[80%] top-1/2 h-5 w-0.5 -translate-y-1/2 rounded bg-white/40" title="Alert threshold" />
11 </div>
12 <div "color:#79c0ff">className="mt-2 flex justify-between text-[10px] text-white/30">
13 <span>71% used</span><span>alert at 80%</span>
14 </div>
15 
16 <div "color:#79c0ff">className="mt-4 flex flex-wrap gap-2">
17 {[["Claude 4.5", "820k", "bg-violet-400"], ["GPT-5", "410k", "bg-cyan-400"], ["Embeddings", "190k", "bg-emerald-400"]].map(([m, v, dot]) => (
18 <span "color:#79c0ff">key={m} "color:#79c0ff">className="flex items-center gap-1.5 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] text-white/55">
19 <span "color:#79c0ff">className={"h-1.5 w-1.5 rounded-full " + dot} /> {m} · <b "color:#79c0ff">className="text-white/80">{v}</b>
20 </span>
21 ))}
22 </div>
23</div>
⬡ UIDrop Component23 lines
TypeScript ReactUTF-8

Previous

←Navigation

Navbars, animated tabs, sidebars, docks and pagination

Next

Feedback→

Live toasts, AI thinking states, skeletons and alerts