{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "features-10",
  "title": "Features 10",
  "description": "A simple features block",
  "files": [
    {
      "path": "src/registry/blocks/radix/features-10/components/features.tsx",
      "content": "import {\n  Cable,\n  Code,\n  Contrast,\n  MonitorSmartphone,\n  SquareDashedMousePointer,\n  Zap,\n} from \"lucide-react\";\nimport { StatsCard } from \"./stats-card\";\n\nconst features = [\n  {\n    title: \"Blazing Fast Performance\",\n    description:\n      \"Optimized for speed with minimal loading times and instant interactions, ensuring a smooth experience across devices.\",\n    icon: Zap,\n  },\n  {\n    title: \"Fully Customizable\",\n    description:\n      \"Tailor every component to match your brand or workflow — with built-in support for themes, layouts, and configurations.\",\n    icon: SquareDashedMousePointer,\n  },\n  {\n    title: \"Developer-Friendly\",\n    description:\n      \"Built with clean, modern code and best practices in mind, making it easy to integrate, extend, and scale.\",\n    icon: Code,\n  },\n  {\n    title: \"Responsive by Default\",\n    description:\n      \"Every component is designed to look great on all screen sizes — no extra work needed to make things mobile-friendly.\",\n    icon: MonitorSmartphone,\n  },\n  {\n    title: \"Accessible for Everyone\",\n    description:\n      \"Built with accessibility best practices in mind to ensure an inclusive experience for all users, regardless of ability.\",\n    icon: Contrast,\n  },\n  {\n    title: \"Seamless Integration\",\n    description:\n      \"Easily connect with your favorite tools, APIs, and services — whether it's authentication, databases, or third-party libraries.\",\n    icon: Cable,\n  },\n];\n\nconst Features = () => {\n  return (\n    <div className=\"mx-auto flex max-w-7xl flex-col px-6 py-20\">\n      <h2 className=\"text-pretty text-center font-medium text-4xl tracking-[-0.04em] sm:text-[2.75rem]\">\n        All the right tools\n      </h2>\n      <p className=\"mt-3 text-center text-muted-foreground text-xl -tracking-[0.01em] sm:text-2xl\">\n        Practical components designed for production\n      </p>\n\n      <div className=\"mt-20 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3\">\n        {features.map((feature, index) => (\n          <div\n            className=\"rounded-xl border border-border/80 bg-card px-5 pt-7 pb-0 shadow-xs/3\"\n            key={index}\n          >\n            <div className=\"flex items-center gap-3\">\n              <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-primary/7 text-primary dark:bg-primary/10\">\n                <feature.icon className=\"h-5 w-5\" />\n              </div>\n              <h3 className=\"font-medium text-lg tracking-[-0.005em]\">\n                {feature.title}\n              </h3>\n            </div>\n            <p className=\"mt-4 text-base text-foreground/80\">\n              {feature.description}\n            </p>\n            <div className=\"mt-8 -mr-5\">\n              <StatsCard className=\"rounded-br-lg\" />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Features;\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/features-10/components/stats-card.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { Area, AreaChart } from \"recharts\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/bases/radix/ui/card\";\nimport { type ChartConfig, ChartContainer } from \"@/registry/bases/radix/ui/chart\";\nimport { cn } from \"@/lib/utils\";\n\nconst data = [\n  {\n    revenue: 10_400,\n    subscription: 40,\n  },\n  {\n    revenue: 14_405,\n    subscription: 90,\n  },\n  {\n    revenue: 9400,\n    subscription: 200,\n  },\n  {\n    revenue: 8200,\n    subscription: 278,\n  },\n  {\n    revenue: 7000,\n    subscription: 89,\n  },\n  {\n    revenue: 9600,\n    subscription: 239,\n  },\n  {\n    revenue: 11_244,\n    subscription: 78,\n  },\n  {\n    revenue: 26_475,\n    subscription: 89,\n  },\n];\n\nconst chartConfig = {\n  revenue: {\n    label: \"Revenue\",\n    color: \"var(--primary)\",\n  },\n  subscription: {\n    label: \"Subscriptions\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig;\n\nexport function StatsCard({\n  className,\n  ...props\n}: ComponentProps<typeof Card>) {\n  return (\n    <Card\n      className={cn(\n        \"overflow-hidden rounded-none rounded-tl-xl border-border/60 border-r-0 border-b-0 pb-0 shadow-none lg:hidden xl:flex\",\n        className\n      )}\n      {...props}\n    >\n      <CardHeader>\n        <CardTitle className=\"font-satoshi text-3xl\">+2,350</CardTitle>\n        <CardDescription>+180.1% from last month</CardDescription>\n        <CardAction>\n          <Button size=\"sm\" variant=\"ghost\">\n            View More\n          </Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"mt-auto flex-1 p-0\">\n        <ChartContainer className=\"size-full max-h-28\" config={chartConfig}>\n          <AreaChart\n            data={data}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <Area\n              dataKey=\"subscription\"\n              fill=\"var(--color-subscription)\"\n              fillOpacity={0.05}\n              stroke=\"var(--color-subscription)\"\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}