Components
Loading preview...
This is a stylized HUD-style area chart component with an SVG-based sci-fi frame, interactive data hover, and dynamic theming support. It overlays a custom dot-matrix grid, uses a clipped polygon container to shape the graph, and reacts to pointer movement by displaying real-time data feedback in the corner. Perfect for futuristic dashboards, HUDs, gaming overlays, trading UIs, or any app that needs immersive data visualization with retro-tech or cyberpunk aesthetics.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/hud-area-chart-1"use client";
import { useTheme } from "next-themes";
import { HudAreaChart } from "@/components/ui/hud-area-chart-1";
export default function Page() {
const { theme } = useTheme();
// Sample data for the graph
const data = [
{ time: "00:00", value: 20 },
{ time: "04:00", value: 35 },
{ time: "08:00", value: 65 },
{ time: "12:00", value: 10 },
{ time: "16:00", value: 45 },
{ time: "20:00", value: 30 },
{ time: "24:00", value: 25 },
];
return (
<div className="bg-background min-h-screen overflow-hidden flex items-center justify-center">
<HudAreaChart
showYAxis={false}
data={data}
gradientColor={theme === "dark" ? "#ffffff" : "#000000"}
borderColor={theme === "dark" ? "#ffffff" : "#000000"}
dotColor={theme === "dark" ? "#ffffff" : "#000000"}
dotSize={0.8}
dotOpacity={0.1}
scale={1}
/>
</div>
);
}