All componentsdisplay

Feature Grid

Layered tokens

Colors, spacing, and radius flow from one theme layer.

Six accents

Swap the whole palette with a single install.

Accessible by default

Every interactive component ships with real keyboard support.

Installation

$ npx shadcn@latest add https://deepmoon.dev/r/feature-grid.json

Also installs: grid

Props

FeatureGridProps

Prop	Type	Required
items	FeatureGridItem[]	Yes
cols	2 \| 3 \| 4	No

Code

feature-grid.tsx

import * as React from "react";

import { Grid } from "@/components/layout/grid";

export interface FeatureGridItem {
  icon?: React.ReactNode;
  title: string;
  description?: string;
}

export interface FeatureGridProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
  items: FeatureGridItem[];
  cols?: 2 | 3 | 4;
}

/** Thin wrapper over the Grid layout primitive — reuses its column presets and tokened gap. */
export function FeatureGrid({ items, cols = 3, className, ...props }: FeatureGridProps) {
  return (
    <Grid cols={cols} gap="xl" className={className} {...props}>
      {items.map((item, index) => (
        <div key={index} className="flex flex-col gap-2">
          {item.icon ? (
            <div
              className="flex size-10 items-center justify-center rounded-lg bg-accent text-accent-foreground"
              aria-hidden="true"
            >
              {item.icon}
            </div>
          ) : null}
          <h3 className="text-sm font-semibold text-foreground">{item.title}</h3>
          {item.description ? <p className="text-sm text-muted-foreground">{item.description}</p> : null}
        </div>
      ))}
    </Grid>
  );
}