snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/registry/bases/base/blocks/preview/cards/analytics-card.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { Area, AreaChart } from "recharts"
+
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/base/ui/chart"
+
+// Monthly visitor data for the area chart.
+const chartData = [
+  { month: "January", visitors: 186 },
+  { month: "February", visitors: 305 },
+  { month: "March", visitors: 237 },
+  { month: "April", visitors: 73 },
+  { month: "May", visitors: 209 },
+  { month: "June", visitors: 214 },
+]
+
+// Chart configuration for the visitors dataset.
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function AnalyticsCard() {
+  return (
+    <Card className="mx-auto w-full max-w-sm data-[size=sm]:pb-0" size="sm">
+      <CardHeader>
+        <CardTitle>Analytics</CardTitle>
+        <CardDescription>
+          418.2K Visitors <Badge>+10%</Badge>
+        </CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">
+            View Analytics
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <ChartContainer config={chartConfig} className="aspect-[1/0.35]">
+        <AreaChart
+          accessibilityLayer
+          data={chartData}
+          margin={{
+            left: 0,
+            right: 0,
+          }}
+        >
+          <ChartTooltip
+            cursor={false}
+            content={<ChartTooltipContent indicator="line" hideLabel />}
+          />
+          <Area
+            dataKey="visitors"
+            type="linear"
+            fill="var(--color-visitors)"
+            fillOpacity={0.4}
+            stroke="var(--color-visitors)"
+          />
+        </AreaChart>
+      </ChartContainer>
+    </Card>
+  )
+}