Ranked horizontal bar list with Pages/Sources/Devices tabs and change badges - shadcn/ui

Top Traffic card with 3-tab switcher (Pages / Sources / Devices). Each tab shows top-5 entries ranked by visit count. Each row has a rank number, label, visit count, change badge (green/red), and a CSS progress bar proportional to the top entry.

Preview

Component Details

ID
bar-list-metrics
Type
Block
Access
Free
Category
Charts
Published
3 Apr 2026

Files Included

  • app/bar-list-metrics/page.tsx
  • components/creative-tim/blocks/bar-list-metrics.tsx

Components Used

Explore More Blocks

Banner
BannerAttention-grabbing banner components for React and Next.js. Build notification banners, promotional headers, announcement bars, and call-to-action banners with dismissible options.
Contact
ContactProfessional contact form components and section layouts for React and Next.js. Build contact pages, feedback forms, support sections, and communication interfaces.
Account
AccountBeautiful and customizable account management components for React and Next.js. Build user profiles, settings, authentication flows, and account dashboards with ready-to-use blocks.
Billing
BillingProfessional billing and payment UI components for React and Next.js. Build payment forms, invoices, subscription management, and checkout flows with pre-built blocks.
Editorial
EditorialMagazine-quality editorial layouts where typography is the design. Multi-column spreads, text wrapping around images with pixel-precise line routing via Pretext, oversized words as visual anchors, pull quotes, drop caps, and the kind of spatial confidence you find in print — now in React.
Team
TeamProfessional team member showcase components for React and Next.js. Build team pages, member profiles, organization charts, and employee directories with customizable layouts.
Web3 Login
Web3 LoginModern Web3 authentication components for React and Next.js. Build crypto wallet login interfaces, blockchain selection screens, QR code authentication, and secure Web3 access flows with support for Metamask, Coinbase, Trust Wallet, and other popular crypto wallets.
Dropdown
DropdownProfessional dropdown menu and filter components for React and Next.js. Build priority filters, status filters, checkbox filters, range selectors, searchable filters, and tabbed filter menus for advanced data filtering.