Components / AI Dashboards

AI Dashboard Header

A dashboard header with greeting, date, quick action buttons, and a compact KPI summary row for AI admin panels.

Live Preview — ai-dashboard-header-01

Overview

Welcome back, developer

JD

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react lucide-react

Source Code

ai-dashboard-header-01.tsx 
"use client";

import React from "react";
import { Plus, Search, Bell, Settings, User } from "lucide-react";

export default function AIDashboardHeader() {
    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-6 py-4 shadow-sm w-full max-w-4xl mx-auto flex items-center justify-between">
            <div className="flex items-center gap-6">
                <div>
                    <h1 className="text-xl font-bold text-zinc-900 dark:text-zinc-100 tracking-tight">Overview</h1>
                    <p className="text-xs text-zinc-500">Welcome back, developer</p>
                </div>
                <div className="hidden md:flex items-center gap-4 border-l border-zinc-200 dark:border-zinc-800 pl-6 h-10">
                    <div>
                        <p className="text-[10px] text-zinc-500 uppercase font-black tracking-widest">Today's Spend</p>
                        <p className="text-sm font-bold text-zinc-900 dark:text-zinc-100 leading-none mt-1">$124.50</p>
                    </div>
                    <div className="border-l border-zinc-100 dark:border-zinc-800/50 pl-4">
                        <p className="text-[10px] text-zinc-500 uppercase font-black tracking-widest">Active Requests</p>
                        <p className="text-sm font-bold text-zinc-900 dark:text-zinc-100 leading-none mt-1">1,240</p>
                    </div>
                </div>
            </div>

            <div className="flex items-center gap-4">
                <div className="hidden sm:flex items-center gap-1 px-3 py-1.5 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 text-zinc-500">
                    <Search className="h-4 w-4" />
                    <span className="text-xs">Search logs...</span>
                    <kbd className="ml-2 px-1 rounded bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 text-[10px]">⌘K</kbd>
                </div>
                <button className="p-2 rounded-lg text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">
                    <Bell className="h-5 w-5" />
                </button>
                <div className="h-8 w-8 rounded-full bg-zinc-200 dark:bg-zinc-800 border border-zinc-300 dark:border-zinc-700 flex items-center justify-center text-xs font-bold text-zinc-600 dark:text-zinc-400">
                    JD
                </div>
            </div>
        </div>
    );
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIDashboardHeader() None

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<Bell> 1× Library lucide-react
<button> 1× Native Native HTML
<div> 9× Native Native HTML
<h1> 1× Native Native HTML
<kbd> 1× Native Native HTML
<p> 5× Native Native HTML
<Search> 1× Native Native HTML
<span> 1× Native Native HTML

Related Components

  • AI Analytics Card — A dashboard analytics card showing AI model usage metrics with sparkline charts, percentage changes, and trend indicators.
  • AI Token Usage Meter — A circular progress meter showing AI token consumption with remaining quota and cost estimation.
  • AI Model Performance Table — A comparison table showing AI model performance benchmarks with sortable columns for speed, accuracy, and cost.
  • AI Request Log — A real-time scrolling log of AI API requests with status indicators, response times, and token counts.
  • AI Cost Breakdown Chart — A visual cost breakdown showing AI spending by model with horizontal bar charts and total cost summary.
  • AI Service Status Badge — An AI service status indicator showing operational health with animated pulse dots and uptime percentages.