# Features 10

> A simple features block

A shadcn/ui block from the [@shadcnui-blocks](https://shadcnui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnui-blocks/features-10).

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/features-10
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/features-10-light-9eb6a49345eb9d6f.png
- Registry item: https://shadcnui-blocks.com/r/features-10.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/features-10.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `src/registry/blocks/radix/features-10/components/features.tsx`

```tsx
import {
  Cable,
  Code,
  Contrast,
  MonitorSmartphone,
  SquareDashedMousePointer,
  Zap,
} from "lucide-react";
import { StatsCard } from "./stats-card";

const features = [
  {
    title: "Blazing Fast Performance",
    description:
      "Optimized for speed with minimal loading times and instant interactions, ensuring a smooth experience across devices.",
    icon: Zap,
  },
  {
    title: "Fully Customizable",
    description:
      "Tailor every component to match your brand or workflow — with built-in support for themes, layouts, and configurations.",
    icon: SquareDashedMousePointer,
  },
  {
    title: "Developer-Friendly",
    description:
      "Built with clean, modern code and best practices in mind, making it easy to integrate, extend, and scale.",
    icon: Code,
  },
  {
    title: "Responsive by Default",
    description:
      "Every component is designed to look great on all screen sizes — no extra work needed to make things mobile-friendly.",
    icon: MonitorSmartphone,
  },
  {
    title: "Accessible for Everyone",
    description:
      "Built with accessibility best practices in mind to ensure an inclusive experience for all users, regardless of ability.",
    icon: Contrast,
  },
  {
    title: "Seamless Integration",
    description:
      "Easily connect with your favorite tools, APIs, and services — whether it's authentication, databases, or third-party libraries.",
    icon: Cable,
  },
];

const Features = () => {
  return (
    <div className="mx-auto flex max-w-7xl flex-col px-6 py-20">
      <h2 className="text-center text-4xl font-medium tracking-tight text-pretty">
        All the right tools
      </h2>
      <p className="mt-3 text-center text-muted-foreground text-xl -tracking-[0.01em] sm:text-2xl">
        Practical components designed for production
      </p>

      <div className="mt-20 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {features.map((feature, index) => (
          <div
            className="rounded-xl border border-border/80 bg-card px-5 pt-7 pb-0 shadow-xs/3"
            key={index}
          >
            <div className="flex items-center gap-3">
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/7 text-primary dark:bg-primary/10">
                <feature.icon className="h-5 w-5" />
              </div>
              <h3 className="font-medium text-lg tracking-[-0.005em]">
                {feature.title}
              </h3>
            </div>
            <p className="mt-4 text-base text-foreground/80">
              {feature.description}
            </p>
            <div className="mt-8 -mr-5">
              <StatsCard className="rounded-br-lg" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Features;
```

### `src/registry/blocks/radix/features-10/components/stats-card.tsx`

```tsx
"use client";

import type { ComponentProps } from "react";
import { Area, AreaChart } from "recharts";
import { Button } from "@/registry/bases/radix/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/bases/radix/ui/card";
import { type ChartConfig, ChartContainer } from "@/registry/bases/radix/ui/chart";
import { cn } from "@/lib/utils";

const data = [
  {
    revenue: 10_400,
    subscription: 40,
  },
  {
    revenue: 14_405,
    subscription: 90,
  },
  {
    revenue: 9400,
    subscription: 200,
  },
  {
    revenue: 8200,
    subscription: 278,
  },
  {
    revenue: 7000,
    subscription: 89,
  },
  {
    revenue: 9600,
    subscription: 239,
  },
  {
    revenue: 11_244,
    subscription: 78,
  },
  {
    revenue: 26_475,
    subscription: 89,
  },
];

const chartConfig = {
  revenue: {
    label: "Revenue",
    color: "var(--primary)",
  },
  subscription: {
    label: "Subscriptions",
    color: "var(--primary)",
  },
} satisfies ChartConfig;

export function StatsCard({
  className,
  ...props
}: ComponentProps<typeof Card>) {
  return (
    <Card
      className={cn(
        "overflow-hidden rounded-none rounded-tl-xl border-border/60 border-r-0 border-b-0 pb-0 shadow-none lg:hidden xl:flex",
        className
      )}
      {...props}
    >
      <CardHeader>
        <CardTitle className="font-satoshi text-3xl">+2,350</CardTitle>
        <CardDescription>+180.1% from last month</CardDescription>
        <CardAction>
          <Button size="sm" variant="ghost">
            View More
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent className="mt-auto flex-1 p-0">
        <ChartContainer className="size-full max-h-28" config={chartConfig}>
          <AreaChart
            data={data}
            margin={{
              left: 0,
              right: 0,
            }}
          >
            <Area
              dataKey="subscription"
              fill="var(--color-subscription)"
              fillOpacity={0.05}
              stroke="var(--color-subscription)"
              strokeWidth={2}
              type="monotone"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
}
```