Staaarter

Compact Principles Grid

A compact principles section with a centered header above a four-up row of items, each separated by a top border and pairing a small lucide icon with a title and a short one-line description.

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-principles-grid.json

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

Usage

The file also exports feature44Demo, 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 { Feature44, feature44Demo } from "@/components/blocks/feature/feature44";

export default function Page() {
  return <Feature44 {...feature44Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringnoneSmall label above the heading.
headingReactNodenoneSection heading.
descriptionstringnoneSupporting copy under the heading.
principlesPrinciple[]noneItems rendered as a four-up top-border grid.
classNamestringnoneExtra classes for the outer section element.

Types

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

Behavior notes

  • Static server component, no client-side state.
  • Each principle accepts a real icon component reference, which is safe here since this is a server component (never crosses a client boundary as a prop).