# Features 2

> Three-column grid with decorative corner icons and dashed lines highlighting workflow features.

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

- Page, with a live preview: https://shadcn.exchange/r/efferd/features-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/efferd/features-2-light-27fed0dd998ff5cb.png
- Registry item: https://efferd.com/r/features-2.json
- Categories: features
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://efferd.com/r/features-2.json
```

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

## Dependencies

- Registry items: `@efferd/decor-icon`

## Files

### `registry/blocks/features/2/feature-section.tsx`

```tsx
import { cn } from "@/lib/utils";
import type React from "react";
import { DecorIcon } from "@/components/decor-icon";

type FeatureType = {
	title: string;
	icon: React.ReactNode;
	description: string;
};

export function FeatureSection() {
	return (
		<div className="mx-auto max-w-5xl">
			<h2 className="font-heading mb-5 text-center font-medium text-2xl md:text-3xl">
				Ensuring your speedy workflow
			</h2>

			<div className="relative">
				{/* Corner Icons */}
				<DecorIcon
					className="size-6 stroke-2 stroke-border"
					position="top-left"
				/>
				<DecorIcon
					className="size-6 stroke-2 stroke-border"
					position="top-right"
				/>
				<DecorIcon
					className="size-6 stroke-2 stroke-border"
					position="bottom-left"
				/>
				<DecorIcon
					className="size-6 stroke-2 stroke-border"
					position="bottom-right"
				/>

				<DashedLine className="-top-[1.5px] right-3 left-3" />
				<DashedLine className="top-3 -right-[1.5px] bottom-3" />
				<DashedLine className="top-3 bottom-3 -left-[1.5px]" />
				<DashedLine className="right-3 -bottom-[1.5px] left-3" />

				<div className="grid grid-cols-1 md:grid-cols-3">
					{features.map((feature) => (
						<div
							className="group [&_svg]:mask-b-from-0% relative p-8 [&_svg]:size-7 [&_svg]:text-muted-foreground"
							key={feature.title}
						>
							{feature.icon}
							<h3 className="font-heading font-medium text-lg">{feature.title}</h3>
							<p className="text-muted-foreground text-sm leading-relaxed">
								{feature.description}
							</p>
							<DashedLine className="right-5 bottom-0 left-5 group-last:hidden md:top-5 md:right-0 md:bottom-5 md:left-full" />
						</div>
					))}
				</div>
			</div>
		</div>
	);
}

function DashedLine({ className, ...props }: React.ComponentProps<"div">) {
	return (
		<div
			className={cn("absolute border-collapse border border-dashed", className)}
			{...props}
		/>
	);
}

const features: FeatureType[] = [
	{
		title: "Auto-Save Everything",
		icon: (
			<IconPlaceholder
				hugeicons="Time01Icon"
				lucide="HistoryIcon"
				phosphor="ClockCounterClockwiseIcon"
				remixicon="RiHistoryLine"
				tabler="IconHistory"
			/>
		),
		description: "Write without worry, every time.",
	},
	{
		title: "Drag-and-Drop Blocks",
		icon: (
			<IconPlaceholder
				hugeicons="SquareDashed"
				lucide="SquareDashedIcon"
				phosphor="SquareIcon"
				remixicon="RiCheckboxBlankLine"
				tabler="IconSquareDashed"
			/>
		),
		description: "Rearrange sections with the block editor.",
	},
	{
		title: "Keyboard Shortcuts",
		icon: (
			<IconPlaceholder
				hugeicons="CommandIcon"
				lucide="CommandIcon"
				phosphor="CommandIcon"
				remixicon="RiCommandLine"
				tabler="IconCommand"
			/>
		),
		description: "Speed up your workflow with quick keys.",
	},
];
```