BN
Byanju Niraj

Data - Copy this React, Tailwind Component to your project

1. Top Section (Summary Cards) This section contains three summary cards at the top, aligned horizontally. Each card highlights an important metric: Active Orders Card Icon: A small green icon (likely a calendar or box icon) symbolizing "active orders." Main Title: "Active Orders" written in small, muted text. Value: A large, bold number "250+" indicates the total number of active orders. Trend Indicator: Displayed below the value, showing a percentage increase (+0.51%) in green text. An upward arrow reinforces the positive trend. Total Sells Card Icon: An orange shopping cart icon for "Total Sells." Main Title: "Total Sells." Value: "$2,968.05" prominently displayed. Trend Indicator: A small red percentage value (-1.51%) indicating a decrease in sales. A downward arrow visually reinforces the decline. Total Revenue Card Icon: A blue circular icon (possibly representing money or finance). Main Title: "Total Revenue." Value: "$1,549.45." Trend Indicator: A positive trend (+2.83%) in blue text with an upward arrow. 2. Revenue Chart Section Title: "Revenue" is displayed at the top-left corner. Time Filters: Two tabs: "This Week" and "This Month," allowing the user to toggle between weekly or monthly revenue data. Chart Type: A bar chart with clean and minimal gridlines. X-Axis: Displays months (e.g., Feb, Mar, Apr, etc.). Y-Axis: Displays numerical revenue values (e.g., 0, 30, 60, 90). Bars: Two sets of bars for each month, color-coded: Gray for "This Week." Blue for "This Month." 3. Customers Section Title: "Customers" is the header. Circular Donut Chart: Visual representation of customer distribution. Two segments, color-coded: Dark gray: Current customers. Blue: New customers. The percentage "52% Total" is centered in bold. Legend: Two labels at the bottom: "Current Customers." "New Customers." 4. Best Seller Section Title: "Best Seller" appears at the top-left of the card. Filter Dropdown: A dropdown menu with options like "Month" to filter data by time period. Table Data: Columns: Name (e.g., "John Latham"). Type (e.g., "Fashion"). Location (e.g., "Sydney, Australia"). Delivered Items (e.g., "60"). Pending Items (e.g., "35"). Progress Bar: A horizontal progress bar visually showing delivery progress. Green indicates completed deliveries, while red indicates pending items. 5. Successful Order Widget Title: "Successful Order" displayed at the top. Circular Progress Chart: A donut chart visualizing the percentage of orders completed. Label: "75% Completed in Month" written below the chart. 6. User Profile Card Profile Image: A circular photo of the user at the top. Name: "Aston Agar" written prominently. Task Summary: "4 from 6 tasks completed" displayed below the name. Progress Bar: A horizontal bar indicating task completion progress. Stats Section: Products: "2.5K Products." Followers: "2.5K Followers." Sales: "255K Sales." Button: A blue "View Profile" button at the bottom.

Prompt
Component Preview

About

data - Dashboard with a sleek dark theme, responsive grid, metric cards, and colorful charts, professionally built with React and Tailwind. Get free template!

Share

Last updated 1 month ago