Feature Card

Display a feature with icon, title, and description. Perfect for landing pages and feature showcases.

Preview

RTL-First Design

Built from the ground up to support both LTR and RTL layouts seamlessly

Installation

Terminalbash

Usage

Reacttsx

Examples

Static

Amazing Feature

This is a static card without a link. Great for non-interactive displays.

import { FeatureCard } from 'noorui-rtl'
import { Sparkles } from 'lucide-react'

<FeatureCard
  icon={Sparkles}
  title="Amazing Feature"
  description="This feature will change your life"
/>

Clickable

Get Started

Click to learn how to begin using our components

import { FeatureCard } from 'noorui-rtl'
import { Rocket } from 'lucide-react'

// Card becomes clickable when href is provided
<FeatureCard
  icon={Rocket}
  title="Get Started"
  description="Click to learn how to begin"
  href="/getting-started"
/>

Grid Layout

Lightning Fast

Optimized for performance

Secure by Default

Built with security in mind

Easy to Use

Simple API, powerful results

import { FeatureCard } from 'noorui-rtl'
import { Zap, Shield, Package } from 'lucide-react'
import { useDirection } from '@/components/providers/direction-provider'
import { content } from '@/lib/i18n'

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  <FeatureCard
    icon={Zap}
    title="Lightning Fast"
    description="Optimized for performance"
    href="/components"
  />
  <FeatureCard
    icon={Shield}
    title="Secure by Default"
    description="Built with security in mind"
    href="/documentation"
  />
  <FeatureCard
    icon={Package}
    title="Easy to Use"
    description="Simple API, powerful results"
    href="/examples"
  />
</div>

RTL Support

FeatureCard automatically adapts to RTL layouts. The icon and text alignment mirror based on the current direction.