ComponentsLanding
Feature Grid & Feature Card
Display product features in a responsive grid layout with icon, title, and description
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
⚡
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.
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
🔒
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.
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
75 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.
Code
<FeatureGrid columns={4}>
<FeatureCard title="75 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
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.
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