Kinetic UI | The Creative Motion Component Library

The FeatureSection component displays product or platform features using an elegant, staggered entrance animation. It now supports multiple structural variants out of the box, including classic grids, bento boxes, and minimal lists.

Live Preview

Feature Section

Supercharge Your Workflow

Everything you need to build faster and scale further, built directly into a seamless ecosystem.

Lightning Fast

Optimized for speed and minimal bundle size. Built with performance in mind.

Secure by Default

Best-in-class security practices integrated directly into the core architecture.

Modular Design

Use only what you need. Everything is built independently for maximum flexibility.

Type Safe

100% written in TypeScript with strict type checking and excellent editor autocomplete.

Real-time Metrics

Monitor application performance and user engagement directly from the dashboard.

Installation

npx kinetic-ui-cli@latest add feature-section

Props

Prop	Type	Default	Description
`variant`	`'grid' \| 'bento' \| 'minimal'`	`'grid'`	Controls the structural layout of the features.
`features`	`FeatureItem[]`	`defaultFeatures`	Array of feature data objects (icon, title, description, className).
`title`	`ReactNode`	`'Supercharge Your Workflow'`	The primary heading of the section.
`subtitle`	`ReactNode`	`'Everything you need to build...'`	The supporting paragraph below the title.
`color`	`string`	`'#6366f1'`	The primary accent color for gradients, glows, and hover states.
`className`	`string`	`—`	Optional Tailwind classes applied to the main wrapper section.

Usage Examples

Bento Box Variant

Uses md:col-span-2 and md:row-span-2 Tailwind classes injected into the feature data to create an asymmetric, modern bento grid.

import { FeatureSection } from '@/components/creative/feature-section';
import { Zap, Shield, Layers } from 'lucide-react';

export default function Example() {
  const bentoFeatures = [
    { 
      icon: <Zap className="w-5 h-5" />, 
      title: "Lightning Fast", 
      description: "Optimized for speed.",
      className: "md:col-span-2 md:row-span-1" 
    },
    { 
      icon: <Shield className="w-5 h-5" />, 
      title: "Secure", 
      description: "Best-in-class security.",
      className: "md:col-span-1 md:row-span-2"
    },
    { 
      icon: <Layers className="w-5 h-5" />, 
      title: "Modular", 
      description: "Use only what you need.",
      className: "md:col-span-1 md:row-span-1"
    }
  ];

  return (
    <FeatureSection 
      variant="bento"
      features={bentoFeatures}
      color="#10b981"
    />
  );
}

Minimal List Variant

A simplified, borderless layout perfect for embedding within tight spaces or sidebars.

import { FeatureSection } from '@/components/creative/feature-section';

export default function Example() {
  return (
    <FeatureSection 
      variant="minimal"
      color="#ec4899"
    />
  );
}

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { FeatureSection } from "@/components/creative/feature-section";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { FeatureSection } from "@/components/creative/feature-section";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <FeatureSection
        variant{/* value */}
        title{/* value */}
        subtitle{/* value */}
      />
    </div>
  );
}

Frequently Used With