{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-10",
  "type": "registry:block",
  "title": "Stats with Area Chart",
  "description": "Stats with Area Chart. Product metrics, usage summaries, and dashboard statistics with clear visual hierarchy.",
  "author": "Ephraim Duncan",
  "registryDependencies": [],
  "dependencies": [
    "cn@0.2.6",
    "recharts@3.8.0"
  ],
  "files": [
    {
      "path": "licenses/stats-10/LICENSE.txt",
      "type": "registry:file",
      "target": "@components/uiblocks/stats-10/LICENSE.txt",
      "content": "Includes source from Blocks.so and its bundled primitives.\nSource: https://github.com/ephraimduncan/blocks\nRevision: 3f759d5171c2391253ec4c772e9e5b3db2bc7c7f\n\nMIT License\n\nCopyright (c) 2025 Ephraim Duncan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
    },
    {
      "path": "components/ui/card.tsx",
      "type": "registry:component",
      "target": "@components/uiblocks/stats-10/shared/components/ui/card.tsx",
      "content": "import type * as React from 'react';\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Card({\n  className,\n  size = 'default',\n  ...props\n}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {\n  return (\n    <div\n      className={cn(\n        'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-card-foreground text-sm ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-[>img:first-child]:pt-0 has-data-[slot=card-footer]:pb-0 data-[size=sm]:has-data-[slot=card-footer]:pb-0 data-[size=sm]:[--card-spacing:--spacing(3)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',\n        className\n      )}\n      data-size={size}\n      data-slot=\"card\"\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',\n        className\n      )}\n      data-slot=\"card-header\"\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'font-medium text-base leading-snug group-data-[size=sm]/card:text-sm',\n        className\n      )}\n      data-slot=\"card-title\"\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn('text-muted-foreground text-sm', className)}\n      data-slot=\"card-description\"\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',\n        className\n      )}\n      data-slot=\"card-action\"\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn('px-(--card-spacing)', className)}\n      data-slot=\"card-content\"\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',\n        className\n      )}\n      data-slot=\"card-footer\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n"
    },
    {
      "path": "components/ui/chart.tsx",
      "type": "registry:component",
      "target": "@components/uiblocks/stats-10/shared/components/ui/chart.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport type { TooltipValueType } from 'recharts';\nimport * as RechartsPrimitive from 'recharts';\n\nimport { cn } from \"../../lib/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n>;\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<'div'> & {\n  config: ChartConfig;\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >['children'];\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        data-chart={chartId}\n        data-slot=\"chart\"\n        {...props}\n      >\n        <ChartStyle config={config} id={chartId} />\n        <RechartsPrimitive.ResponsiveContainer\n          initialDimension={initialDimension}\n        >\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme ?? config.color\n  );\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n      itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join('\\n')}\n}\n`\n          )\n          .join('\\n'),\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<'div'> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: 'line' | 'dot' | 'dashed';\n    nameKey?: string;\n    labelKey?: string;\n  } & Omit<\n    RechartsPrimitive.DefaultTooltipContentProps<\n      TooltipValueType,\n      TooltipNameType\n    >,\n    'accessibilityLayer'\n  >) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value =\n      !labelKey && typeof label === 'string'\n        ? (config[label]?.label ?? label)\n        : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn('font-medium', labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ]);\n\n  if (!(active && payload?.length)) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n  return (\n    <div\n      className={cn(\n        'grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',\n        className\n      )}\n    >\n      {nestLabel ? null : tooltipLabel}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== 'none')\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                className={cn(\n                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',\n                  indicator === 'dot' && 'items-center'\n                )}\n                key={index}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',\n                            {\n                              'h-2.5 w-2.5': indicator === 'dot',\n                              'w-1': indicator === 'line',\n                              'w-0 border-[1.5px] border-dashed bg-transparent':\n                                indicator === 'dashed',\n                              'my-0.5': nestLabel && indicator === 'dashed',\n                            }\n                          )}\n                          style={\n                            {\n                              '--color-bg': indicatorColor,\n                              '--color-border': indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        'flex flex-1 justify-between leading-none',\n                        nestLabel ? 'items-end' : 'items-center'\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label ?? item.name}\n                        </span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"font-medium font-mono text-foreground tabular-nums\">\n                          {typeof item.value === 'number'\n                            ? item.value.toLocaleString()\n                            : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = 'bottom',\n  nameKey,\n}: React.ComponentProps<'div'> & {\n  hideIcon?: boolean;\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        'flex items-center justify-center gap-4',\n        verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== 'none')\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              className={cn(\n                'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground'\n              )}\n              key={index}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== 'object' || payload === null) {\n    return;\n  }\n\n  const payloadPayload =\n    'payload' in payload &&\n    typeof payload.payload === 'object' &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === 'string'\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n};\n"
    },
    {
      "path": "lib/utils.ts",
      "type": "registry:component",
      "target": "@components/uiblocks/stats-10/shared/lib/utils.ts",
      "content": "export { cn } from \"cn\";\n"
    },
    {
      "path": "content/components/stats/stats-10.tsx",
      "type": "registry:component",
      "target": "@components/uiblocks/stats-10/stats-10.tsx",
      "content": "'use client';\n\nimport { Area, AreaChart, XAxis } from 'recharts';\nimport { Card, CardContent } from \"./shared/components/ui/card\";\nimport { ChartContainer } from \"./shared/components/ui/chart\";\nimport { cn } from \"./shared/lib/utils\";\n\nconst data = [\n  {\n    date: 'Nov 24, 2023',\n    'Alpha Corp': 142.87,\n    'Beta Solutions': 65.32,\n    'Gamma Industries': 83.25,\n  },\n  {\n    date: 'Nov 25, 2023',\n    'Alpha Corp': 151.43,\n    'Beta Solutions': 59.78,\n    'Gamma Industries': 79.64,\n  },\n  {\n    date: 'Nov 26, 2023',\n    'Alpha Corp': 157.28,\n    'Beta Solutions': 64.21,\n    'Gamma Industries': 76.19,\n  },\n  {\n    date: 'Nov 27, 2023',\n    'Alpha Corp': 162.94,\n    'Beta Solutions': 57.46,\n    'Gamma Industries': 72.84,\n  },\n  {\n    date: 'Nov 28, 2023',\n    'Alpha Corp': 148.37,\n    'Beta Solutions': 49.82,\n    'Gamma Industries': 81.56,\n  },\n  {\n    date: 'Nov 29, 2023',\n    'Alpha Corp': 139.56,\n    'Beta Solutions': 55.63,\n    'Gamma Industries': 92.38,\n  },\n  {\n    date: 'Nov 30, 2023',\n    'Alpha Corp': 145.83,\n    'Beta Solutions': 61.27,\n    'Gamma Industries': 88.75,\n  },\n  {\n    date: 'Dec 01, 2023',\n    'Alpha Corp': 138.29,\n    'Beta Solutions': 68.94,\n    'Gamma Industries': 93.42,\n  },\n  {\n    date: 'Dec 02, 2023',\n    'Alpha Corp': 129.64,\n    'Beta Solutions': 74.56,\n    'Gamma Industries': 97.18,\n  },\n  {\n    date: 'Dec 03, 2023',\n    'Alpha Corp': 119.82,\n    'Beta Solutions': 71.38,\n    'Gamma Industries': 89.43,\n  },\n  {\n    date: 'Dec 04, 2023',\n    'Alpha Corp': 128.54,\n    'Beta Solutions': 63.95,\n    'Gamma Industries': 92.76,\n  },\n  {\n    date: 'Dec 05, 2023',\n    'Alpha Corp': 137.21,\n    'Beta Solutions': 58.47,\n    'Gamma Industries': 84.29,\n  },\n  {\n    date: 'Dec 06, 2023',\n    'Alpha Corp': 134.68,\n    'Beta Solutions': 69.12,\n    'Gamma Industries': 79.38,\n  },\n  {\n    date: 'Dec 07, 2023',\n    'Alpha Corp': 152.73,\n    'Beta Solutions': 73.89,\n    'Gamma Industries': 81.42,\n  },\n  {\n    date: 'Dec 08, 2023',\n    'Alpha Corp': 168.59,\n    'Beta Solutions': 78.54,\n    'Gamma Industries': 75.68,\n  },\n];\n\nconst summary = [\n  {\n    name: 'Alpha Corp',\n    tickerSymbol: 'ACP',\n    value: '$168.59',\n    change: '+15.86',\n    percentageChange: '+10.4%',\n    changeType: 'positive',\n  },\n  {\n    name: 'Beta Solutions',\n    tickerSymbol: 'BTS',\n    value: '$78.54',\n    change: '+4.65',\n    percentageChange: '+6.3%',\n    changeType: 'positive',\n  },\n  {\n    name: 'Gamma Industries',\n    tickerSymbol: 'GMI',\n    value: '$75.68',\n    change: '-5.74',\n    percentageChange: '-7.1%',\n    changeType: 'negative',\n  },\n];\n\nconst sanitizeName = (name: string) => {\n  return name\n    .replace(/\\\\s+/g, '-')\n    .replace(/[^a-zA-Z0-9-]/g, '_')\n    .toLowerCase();\n};\n\nexport default function Stats10() {\n  return (\n    <div className=\"flex w-full items-center justify-center p-10\">\n      <dl className=\"grid w-full grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n        {summary.map((item) => {\n          const sanitizedName = sanitizeName(item.name);\n          const gradientId = `gradient-${sanitizedName}`;\n\n          const color =\n            item.changeType === 'positive'\n              ? 'hsl(142.1 76.2% 36.3%)'\n              : 'hsl(0 72.2% 50.6%)';\n\n          return (\n            <Card className=\"overflow-hidden p-0 shadow-2xs\" key={item.name}>\n              <CardContent className=\"p-0\">\n                <div className=\"p-4 pb-0\">\n                  <dt className=\"font-medium text-foreground text-sm\">\n                    {item.name}{' '}\n                    <span className=\"font-normal text-muted-foreground\">\n                      ({item.tickerSymbol})\n                    </span>\n                  </dt>\n                  <div className=\"flex items-baseline justify-between\">\n                    <dd\n                      className={cn(\n                        item.changeType === 'positive'\n                          ? 'text-green-600 dark:text-green-500'\n                          : 'text-red-600 dark:text-red-500',\n                        'font-semibold text-lg'\n                      )}\n                    >\n                      {item.value}\n                    </dd>\n                    <dd className=\"flex items-center space-x-1 text-sm\">\n                      <span className=\"font-medium text-foreground\">\n                        {item.change}\n                      </span>\n                      <span\n                        className={cn(\n                          item.changeType === 'positive'\n                            ? 'text-green-600 dark:text-green-500'\n                            : 'text-red-600 dark:text-red-500'\n                        )}\n                      >\n                        ({item.percentageChange})\n                      </span>\n                    </dd>\n                  </div>\n                </div>\n\n                <div className=\"mt-2 h-16 overflow-hidden\">\n                  <ChartContainer\n                    className=\"h-full w-full\"\n                    config={{\n                      [item.name]: {\n                        label: item.name,\n                        color,\n                      },\n                    }}\n                  >\n                    <AreaChart\n                      data={data}\n                      margin={{ top: 0, right: 0, bottom: 0, left: 0 }}\n                    >\n                      <defs>\n                        <linearGradient\n                          id={gradientId}\n                          x1=\"0\"\n                          x2=\"0\"\n                          y1=\"0\"\n                          y2=\"1\"\n                        >\n                          <stop\n                            offset=\"5%\"\n                            stopColor={color}\n                            stopOpacity={0.3}\n                          />\n                          <stop\n                            offset=\"95%\"\n                            stopColor={color}\n                            stopOpacity={0}\n                          />\n                        </linearGradient>\n                      </defs>\n                      <XAxis dataKey=\"date\" hide={true} />\n                      <Area\n                        dataKey={item.name}\n                        fill={`url(#${gradientId})`}\n                        fillOpacity={0.4}\n                        stroke={color}\n                        strokeWidth={1.5}\n                        type=\"monotone\"\n                      />\n                    </AreaChart>\n                  </ChartContainer>\n                </div>\n              </CardContent>\n            </Card>\n          );\n        })}\n      </dl>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats",
    "application",
    "clean-saas"
  ],
  "docs": "Import the default component from @components/uiblocks/stats-10/stats-10.tsx. React 19, Tailwind CSS 4, and the standard shadcn CSS theme variables are required. This block is framework-independent React and works in TanStack Start, Vite, and Next.js projects. Connect links or navigation callbacks to your host application. Demo avatars use public image URLs; replace them with your own assets. Demo handlers must be connected to your product. See https://uiblocks.org/stats/stats-10 for content guidelines and source attribution.",
  "meta": {
    "kind": "block",
    "version": "0.1.0",
    "source": {
      "name": "Blocks.so",
      "url": "https://github.com/ephraimduncan/blocks",
      "license": "MIT",
      "author": "Ephraim Duncan",
      "revision": "3f759d5171c2391253ec4c772e9e5b3db2bc7c7f"
    },
    "license": "MIT",
    "style": "clean-saas",
    "pageType": "application",
    "featured": false,
    "tags": [
      "stats",
      "analytics",
      "metrics",
      "dashboard",
      "usage",
      "统计",
      "数据",
      "仪表盘",
      "用量"
    ],
    "contentGuidelines": [
      "Label the time window and units for every value.",
      "Test large values, negative trends, and missing data."
    ],
    "recommendedWith": [],
    "entry": "@components/uiblocks/stats-10/stats-10.tsx",
    "exportName": "default",
    "frameworkIndependent": true,
    "frameworkDependencies": [],
    "compatibleHosts": [
      "react",
      "vite",
      "tanstack-start",
      "nextjs"
    ],
    "requirements": {
      "react": ">=19",
      "tailwind": ">=4"
    },
    "previewUrl": "https://uiblocks.org/preview/stats-10"
  }
}