Sections

Feature grid

A responsive grid of icon + title + description cells.

Server safeSource

Import

import { FeatureGrid } from '@the_viveksingh/vivek-ui'

Feature cards

Omit columns for an auto-fitting grid that reflows at every width. icon takes any node, so your own SVG set drops straight in.

Why this one

The constraints are the product

  • Zero dependencies

    Nothing in your lockfile but React. Nothing to audit, nothing to deprecate.

  • Static CSS, one file

    No CSS-in-JS runtime. Variants are data attributes, themes are custom properties.

  • Server-safe by default

    Half the library needs no client boundary, so your bundles stay small.

  • Accessible on purpose

    Keyboard maps from the WAI-ARIA practices, with an axe assertion per component.

<FeatureGrid
  eyebrow="Why this one"
  title="The constraints are the product"
  columns={{ base: 1, sm: 2 }}
  features={[
    {
      id: 'deps',
      icon: <ShieldIcon />,
      title: 'Zero dependencies',
      description: 'Nothing in your lockfile but React.',
    },
    {
      id: 'css',
      icon: <BrushIcon />,
      title: 'Static CSS, one file',
      description: 'No CSS-in-JS runtime. Variants are data attributes.',
    },
  ]}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for FeatureGrid
PropTypeDefaultDescription
featuresFeature[]——
columnsnumber | ResponsiveCols—Fixed or per-breakpoint column count. Omit it and the grid auto-fits, which is the better default: it reflows at every width instead of at four fixed ones.
minItemWidthstring—Auto-fit track floor when `columns` is omitted. Defaults to `16rem`.
eyebrowReactNode—A plain string becomes a pill `Badge`; a node is rendered as given.
titleReactNode——
descriptionReactNode——
headingLevelHeadingLevel—Level of the section's own `title`, defaulting to `2`. Feature titles render one level below it — or at this level when the section has no title of its own, so the document outline stays valid either way.

Rendering

Server safe

FeatureGrid carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.