Staaarter

Compact Two-Column Capabilities

A feature section with a left-aligned headline and a compact two-column grid of capability rows, each row a small icon inline with a title and one-line description, separated by hairline dividers. Good for a long capability list that needs to stay dense rather than card-heavy.

By Staaarter Team
Feature
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/compact-two-column-capabilities.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature75.tsx instead.

Usage

The file also exports feature75Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature75, feature75Demo } from "@/components/blocks/feature/feature75";

export default function Page() {
  return <Feature75 {...feature75Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringnoneSmall label above the heading.
headingReactNodenoneSection heading, left-aligned.
descriptionstringnoneSupporting copy under the heading.
capabilitiesCompactCapabilityRow[]noneRows in the two-column list, each with an icon, title, and description.
classNamestringnoneExtra classes for the outer section element.

Types

type CompactCapabilityRow = { icon: LucideIcon; title: string; description: string };

Behavior notes

  • Server component, purely presentational, no interactivity.
  • Row icons are a real per-item `icon: LucideIcon` prop, safe here because the component is a server component.
  • Rows fill two columns in source order (not left-column-then-right-column), so an odd count leaves the last row spanning only its own column with a dangling border below it.