Creative Tim UICreative Tim UI

Three chart cards showing website views, daily sales, and completed tasks - shadcn/ui

PRO

Three metric cards displaying Website View (area chart), Daily Sales (line chart), and Completed Tasks (linear chart) with icons and campaign performance labels. Perfect for dashboard overviews.

Preview

Component Details

ID
card-charts-example-1
Type
Block
Access
PRO
Category
Charts
Published
3 Apr 2026

Files Included

  • app/card-charts-example-1/page.tsx
  • components/creative-tim/blocks/card-charts-example-1.tsx

Components Used

Explore More Blocks

Authentication
AuthenticationSecure authentication components and login flows for React and Next.js. Build sign-in forms, registration pages, password reset flows, and authentication interfaces.
Table
TableProfessional data table components for React and Next.js. Build product comparisons, crypto trackers, inventory tables, sales reports, member lists, invoices, and transaction records with sortable columns and interactive features.
Maintenance
MaintenanceProfessional maintenance and downtime page components for React and Next.js. Build scheduled maintenance notifications, system upgrade messages, and under construction pages with email notifications and social links.
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.
Logo
LogoProfessional brand logo showcase components for React and Next.js. Build trust sections, partner displays, client logos, and company ecosystem layouts with various styles and configurations.
Order
OrderProfessional order tracking and management components for React and Next.js. Build order details pages, tracking timelines, shipping status displays, order summaries, and delivery management interfaces with customizable layouts.
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.
x402
x402Internet-native payment protocol components for React and Next.js. Build AI agent payments, HTTP-based stablecoin transactions, and autonomous commerce experiences using the x402 protocol.