Feature Card
Showcases a feature with an icon, title, content, and footer.
Extends Shadcn/ui card component.
Authentication
Secure your SaaS right from the start with a complete authentication system, no complex setups required.
Emails
Send emails directly from your application, perfect for confirmations, notifications, or newsletters.
Payments
Accept online payments with a ready-to-use Stripe integration.
Usage
import { FeatureCard, FeatureCardContent, FeatureCardFooter, FeatureCardHeader, FeatureCardTitle,} from "@/app/_components/ui/feature-card";
<FeatureCard icon={CreditCard} iconPosition="left"> <FeatureCardHeader> <FeatureCardTitle>Payments</FeatureCardTitle> </FeatureCardHeader> <FeatureCardContent> Accept online payments with a ready-to-use Stripe integration. </FeatureCardContent> <FeatureCardFooter>Get Now</FeatureCardFooter></FeatureCard>
Props
FeatureCard
Name | Type | Default | Description |
---|---|---|---|
icon | LucideIcon | - | The icon to display. |
iconPosition | "left" | "top" | "left" | The position of the icon. |
children | ReactNode | - | The content to display. |
className | string | - | Additional classes. |
FeatureCardContent
Name | Type | Default | Description |
---|---|---|---|
className | string | - | Additional classes. |
FeatureCardDescription
Name | Type | Default | Description |
---|---|---|---|
className | string | - | Additional classes. |
FeatureCardFooter
Name | Type | Default | Description |
---|---|---|---|
className | string | - | Additional classes. |
FeatureCardHeader
Name | Type | Default | Description |
---|---|---|---|
className | string | - | Additional classes. |
FeatureCardTitle
Name | Type | Default | Description |
---|---|---|---|
className | string | - | Additional classes. |