# Features 04

> 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-04).

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

## Install

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

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

## Dependencies

- npm packages: `lucide-react`
- Registry items: `accordion`

## Files

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

```tsx
import {
  BookCheck,
  ChartPie,
  FolderSync,
  Goal,
  Users,
  Zap,
} from "lucide-react";
import Image from "next/image";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/registry/bases/radix/ui/accordion";

const features = [
  {
    icon: Goal,
    title: "Identify Opportunities",
    description:
      "Easily uncover untapped areas to explore and expand your reach effortlessly and effectively.",
  },
  {
    icon: BookCheck,
    title: "Build Authority",
    description:
      "Create valuable content that resonates, inspires trust, and positions you as an expert.",
  },
  {
    icon: ChartPie,
    title: "Instant Insights",
    description:
      "Gain immediate, actionable insights with a quick glance, enabling fast decision-making.",
  },
  {
    icon: Users,
    title: "Engage with Your Audience",
    description:
      "Boost audience engagement with interactive features like polls, quizzes, and forms.",
  },
  {
    icon: FolderSync,
    title: "Automate Your Workflow",
    description:
      "Streamline your processes by automating repetitive tasks, saving time and reducing effort.",
  },
  {
    icon: Zap,
    title: "Accelerate Growth",
    description:
      "Supercharge your growth by implementing strategies that drive results quickly and efficiently.",
  },
];

const Features = () => {
  return (
    <div className="mx-auto w-full max-w-(--breakpoint-lg) px-6 py-20">
      <h2 className="max-w-lg text-pretty font-medium text-4xl/snug tracking-tight">
        Build scalable interfaces with minimal effort
      </h2>
      <div className="mx-auto mt-8 grid w-full gap-12 md:mt-12 md:grid-cols-2">
        <div>
          <Accordion className="w-full" defaultValue="item-0" type="single">
            {features.map(({ title, description, icon: Icon }, index) => (
              <AccordionItem
                className="group/accordion-item data-[state=open]:border-primary data-[state=open]:border-b-2"
                key={title}
                value={`item-${index}`}
              >
                <AccordionTrigger className="[&>svg]:hidden! text-lg group-first/accordion-item:pt-0">
                  <div className="flex items-center gap-4 font-medium">
                    <Icon />
                    {title}
                  </div>
                </AccordionTrigger>
                <AccordionContent className="ps-10 text-[17px] text-muted-foreground leading-relaxed">
                  {description}
                  <Image
                    alt="Scalable interface dashboard"
                    className="mt-6 mb-2 aspect-video w-full rounded-xl object-cover md:hidden"
                    height={1086}
                    loading={index === 0 ? "eager" : "lazy"}
                    src="/images/scalable-interface-illustration.png"
                    width={1448}
                  />
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>

        {/* Media */}
        <Image
          alt="Scalable interface dashboard"
          className="hidden h-full w-full rounded-xl object-cover md:block"
          height={1086}
          loading="eager"
          src="/images/scalable-interface-illustration.png"
          width={1448}
        />
      </div>
    </div>
  );
};

export default Features;
```