# Features 4

> Modern feature cards with extended borders, corner decorators, and detailed feature breakdown.

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

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

## Install

```bash
npx shadcn@latest add https://efferd.com/r/features-4.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/4/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 flex min-h-screen w-full max-w-5xl flex-col justify-center gap-12 px-4 py-12 md:px-8">
			<div className="mx-auto max-w-2xl space-y-2 text-center">
				<h2 className="font-heading font-medium text-3xl tracking-tight md:text-5xl">
					Build apps faster
				</h2>
				<p className="text-muted-foreground text-sm leading-relaxed md:text-base">
					The complete platform for secure, scalable apps. You code, we handle
					the rest.
				</p>
			</div>

			<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
				{features.map((feature) => (
					<FeatureCard feature={feature} key={feature.title} />
				))}
			</div>
		</div>
	);
}

function FeatureCard({
	feature,
	className,
	...props
}: React.ComponentProps<"div"> & {
	feature: FeatureType;
}) {
	return (
		<div
			className={cn(
				"relative flex flex-col justify-between gap-6 bg-background px-6 pt-8 pb-6 shadow-xs",
				// Gradient inspired by testimonials
				"dark:bg-[radial-gradient(50%_80%_at_25%_0%,--theme(--color-foreground/.1),transparent)]",
				className
			)}
			{...props}
		>
			{/* Extended Borders */}
			<div className="absolute -inset-y-4 -left-px w-px bg-border" />
			<div className="absolute -inset-y-4 -right-px w-px bg-border" />
			<div className="absolute -inset-x-4 -top-px h-px bg-border" />
			<div className="absolute -right-4 -bottom-px -left-4 h-px bg-border" />

			{/* Corner Decor */}
			<DecorIcon className="size-3.5" position="top-left" />

			<div
				className={cn(
					"relative z-10 flex w-fit items-center justify-center rounded-lg border bg-muted/20 p-3",
					"[&_svg]:size-5 [&_svg]:stroke-[1.5] [&_svg]:text-foreground"
				)}
			>
				{feature.icon}
			</div>

			<div className="relative z-10 space-y-2">
				<h3 className="font-heading font-medium text-base text-foreground">
					{feature.title}
				</h3>
				<p className="text-muted-foreground text-xs leading-relaxed">
					{feature.description}
				</p>
			</div>
		</div>
	);
}

const features: FeatureType[] = [
	{
		title: "Interactive Dashboard",
		icon: (
			<IconPlaceholder
				hugeicons="DashboardSquare01Icon"
				lucide="LayoutDashboardIcon"
				phosphor="SquaresFourIcon"
				remixicon="RiLayoutGridLine"
				tabler="IconLayoutDashboard"
			/>
		),
		description: "Visualize your data with drag-and-drop widgets.",
	},
	{
		title: "Instant API",
		icon: (
			<IconPlaceholder
				hugeicons="CommandLineIcon"
				lucide="TerminalIcon"
				phosphor="TerminalIcon"
				remixicon="RiTerminalLine"
				tabler="IconTerminal2"
			/>
		),
		description: "Auto-generate REST and GraphQL APIs instantly.",
	},
	{
		title: "Role-Based Access",
		icon: (
			<IconPlaceholder
				hugeicons="ShieldCheck"
				lucide="ShieldCheckIcon"
				phosphor="ShieldCheckIcon"
				remixicon="RiShieldCheckLine"
				tabler="IconShieldLock"
			/>
		),
		description: "Secure resources with granular permission controls.",
	},
	{
		title: "Audit Trails",
		icon: (
			<IconPlaceholder
				hugeicons="FileSearchIcon"
				lucide="FileTextIcon"
				phosphor="FileTextIcon"
				remixicon="RiFileTextLine"
				tabler="IconFileText"
			/>
		),
		description: "Track every change with comprehensive logs.",
	},
];
```