Skip to content
Nim UI

Feature Grid & Feature Card

The FeatureGrid and FeatureCard components work together to present product features in a clean, responsive grid layout. FeatureGrid manages the grid structure while FeatureCard renders individual feature items with an optional icon, title, and description.

Import

import { FeatureGrid, FeatureCard } from '@nim-ui/components';

Usage

Default Feature Grid (3 columns)

⚡

Lightning Fast

Optimized for performance with tree-shaking and minimal bundle size.

🎨

Fully Customizable

Extend any component with Tailwind CSS classes and design tokens.

♿

Accessible

WCAG 2.1 AA compliant with full keyboard navigation and screen reader support.
View Code 
<FeatureGrid>
  <FeatureCard
    icon={<ZapIcon />}
    title="Lightning Fast"
    description="Optimized for performance with tree-shaking and minimal bundle size."
  />
  <FeatureCard
    icon={<PaletteIcon />}
    title="Fully Customizable"
    description="Extend any component with Tailwind CSS classes and design tokens."
  />
  <FeatureCard
    icon={<AccessibilityIcon />}
    title="Accessible"
    description="WCAG 2.1 AA compliant with full keyboard navigation and screen reader support."
  />
</FeatureGrid>

Column Variants

2 Columns

2-Column Grid

🔒

Type Safe

Built with TypeScript for complete type safety and IDE autocompletion.

🌙

Dark Mode

Built-in dark mode support with smooth transitions across all components.
View Code 
<FeatureGrid columns={2}>
  <FeatureCard
    icon={<LockIcon />}
    title="Type Safe"
    description="Built with TypeScript for complete type safety and IDE autocompletion."
  />
  <FeatureCard
    icon={<MoonIcon />}
    title="Dark Mode"
    description="Built-in dark mode support with smooth transitions across all components."
  />
</FeatureGrid>

4 Columns

4-Column Grid

24 Components

Ready to use out of the box.

TypeScript

Full type definitions included.

Tailwind v4

Built on the latest Tailwind.

React 19

Leveraging the newest features.
View Code 
<FeatureGrid columns={4}>
  <FeatureCard title="24 Components" description="Ready to use out of the box." />
  <FeatureCard title="TypeScript" description="Full type definitions included." />
  <FeatureCard title="Tailwind v4" description="Built on the latest Tailwind." />
  <FeatureCard title="React 19" description="Leveraging the newest features." />
</FeatureGrid>

Without Icons

Feature Cards Without Icons

Easy Integration

Install with a single command and start building immediately.

Well Documented

Comprehensive documentation with live examples for every component.

Community Driven

Open source and actively maintained by a growing community.
View Code 
<FeatureGrid columns={3}>
  <FeatureCard
    title="Easy Integration"
    description="Install with a single command and start building immediately."
  />
  <FeatureCard
    title="Well Documented"
    description="Comprehensive documentation with live examples for every component."
  />
  <FeatureCard
    title="Community Driven"
    description="Open source and actively maintained by a growing community."
  />
</FeatureGrid>

Props

FeatureGrid Props

Name Type Default Description
columns 2 | 3 | 4 3 Number of columns in the grid layout. Automatically adjusts for smaller screens.
children * ReactNode - FeatureCard components to display in the grid
className string - Additional CSS classes to apply to the grid container

FeatureCard Props

Name Type Default Description
icon ReactNode - Icon element displayed above the title. Accepts any React node such as an SVG icon component.
title * string - Feature title text
description * string - Feature description text providing additional detail
className string - Additional CSS classes to apply to the card element

Usage Examples

Product Landing Page

import { FeatureGrid, FeatureCard } from '@nim-ui/components';
import {
  RocketIcon,
  ShieldIcon,
  CodeIcon,
  PuzzleIcon,
  GlobeIcon,
  HeartIcon,
} from './icons';


function FeaturesSection() {
  return (
    <section className="py-16">
      <h2 className="text-3xl font-bold text-center mb-12">
        Why choose Nim UI?
      </h2>
      <FeatureGrid columns={3}>
        <FeatureCard
          icon={<RocketIcon className="w-8 h-8 text-primary-500" />}
          title="Fast Development"
          description="Pre-built components let you ship features in hours, not days."
        />
        <FeatureCard
          icon={<ShieldIcon className="w-8 h-8 text-primary-500" />}
          title="Production Ready"
          description="Battle-tested components used in production by hundreds of teams."
        />
        <FeatureCard
          icon={<CodeIcon className="w-8 h-8 text-primary-500" />}
          title="Developer Experience"
          description="TypeScript-first with excellent IDE support and documentation."
        />
        <FeatureCard
          icon={<PuzzleIcon className="w-8 h-8 text-primary-500" />}
          title="Composable"
          description="Mix and match components to build complex interfaces easily."
        />
        <FeatureCard
          icon={<GlobeIcon className="w-8 h-8 text-primary-500" />}
          title="Internationalized"
          description="RTL support and localization-friendly component design."
        />
        <FeatureCard
          icon={<HeartIcon className="w-8 h-8 text-primary-500" />}
          title="Open Source"
          description="MIT licensed. Use in personal and commercial projects freely."
        />
      </FeatureGrid>
    </section>
  );
}

Comparison Layout

function ComparisonFeatures() {
  return (
    <FeatureGrid columns={2}>
      <FeatureCard
        icon={<CheckCircleIcon className="w-6 h-6 text-green-500" />}
        title="With Nim UI"
        description="Ship a complete landing page in under an hour with accessible, responsive components."
      />
      <FeatureCard
        icon={<XCircleIcon className="w-6 h-6 text-red-500" />}
        title="Without Nim UI"
        description="Spend days building custom components, handling edge cases, and fixing accessibility issues."
      />
    </FeatureGrid>
  );
}

Accessibility

  • Each FeatureCard uses semantic heading elements for the title
  • Icons are treated as decorative (aria-hidden="true") when a title is present
  • The grid layout uses proper CSS Grid with responsive breakpoints
  • Content remains readable and properly structured without CSS
  • Card - Generic content container
  • Grid - Low-level CSS Grid layout
  • Hero - Landing page hero section