Feature Sections

Feature sections are essential for communicating your product's value proposition. These components help you present features in visually appealing and organized layouts.

Component Variants

Feature Card

Single Feature Card

A standalone feature card component that can be used individually or composed into larger layouts.

Feature Grid (3 Columns)

Fast Performance

Optimized components that load quickly and render efficiently.

Type Safe

Full TypeScript support with comprehensive type definitions.

Easy Integration

Drop-in components that work with any React or Next.js project.

Feature Grid (2 Columns, Centered)

Fast Performance

Optimized components that load quickly and render efficiently.

Type Safe

Full TypeScript support with comprehensive type definitions.

Easy Integration

Drop-in components that work with any React or Next.js project.

Modular Design

Import only what you need to keep your bundle size small.

Feature With Image (Right)

Build faster with ready-made components

Our component library provides everything you need to ship beautiful interfaces quickly.

Fast Performance

Optimized components that load quickly and render efficiently.

Type Safe

Full TypeScript support with comprehensive type definitions.

Easy Integration

Drop-in components that work with any React or Next.js project.

Feature With Image (Left)

Designed for modern workflows

Every component is built with accessibility and responsiveness in mind.

Modular Design

Import only what you need to keep your bundle size small.

Developer Experience

Clean APIs with sensible defaults and full customization.

Accessible

Built with WCAG guidelines and proper ARIA attributes.

Feature Icon List (Large)

• Fast Performance

  Optimized components that load quickly and render efficiently.

• Type Safe

  Full TypeScript support with comprehensive type definitions.

• Easy Integration

  Drop-in components that work with any React or Next.js project.

• Modular Design

  Import only what you need to keep your bundle size small.

Feature Icon List (Inline)

• Fast PerformanceOptimized components that load quickly and render efficiently.
• Type SafeFull TypeScript support with comprehensive type definitions.
• Easy IntegrationDrop-in components that work with any React or Next.js project.
• Modular DesignImport only what you need to keep your bundle size small.

Feature Centered (Hero Style)

Why Choose Us

Everything you need to build modern UIs

A comprehensive component library that helps you ship faster without sacrificing quality or accessibility.

Fast Performance

Optimized components that load quickly and render efficiently.

Type Safe

Full TypeScript support with comprehensive type definitions.

Easy Integration

Drop-in components that work with any React or Next.js project.

Modular Design

Import only what you need to keep your bundle size small.

Developer Experience

Clean APIs with sensible defaults and full customization.

Accessible

Built with WCAG guidelines and proper ARIA attributes.

Usage

import {
  FeatureCard,
  FeatureGrid,
  FeatureWithImage,
  FeatureIconList,
  FeatureCentered,
} from '@/components/ui/features';

// Single Feature Card
<FeatureCard
  icon={<RocketIcon />}
  title="Fast Performance"
  description="Optimized components that load quickly."
/>

// Feature Grid
<FeatureGrid
  features={[
    { icon: <Icon />, title: 'Feature 1', description: '...' },
    { icon: <Icon />, title: 'Feature 2', description: '...' },
  ]}
  columns={3}
  alignment="left"
/>

// Feature With Image
<FeatureWithImage
  title="Build faster"
  description="Our component library provides everything you need."
  features={[...]}
  imageSrc="/image.jpg"
  imageAlt="Description"
  imagePosition="right"
/>

// Feature Icon List
<FeatureIconList
  features={[...]}
  variant="large" // or "inline"
/>

// Feature Centered
<FeatureCentered
  tagline="Why Choose Us"
  title="Everything you need"
  description="A comprehensive component library."
  features={[...]}
/>

Props Reference

FeatureCard

FeatureGrid

FeatureWithImage

FeatureIconList

FeatureCentered