@ajk-ui/card

A versatile card component for React applications with multiple variants and layouts.

Installation

npm install @ajk-ui/card
# or
yarn add @ajk-ui/card
# or
pnpm add @ajk-ui/card

Usage

import { Card } from "@ajk-ui/card";

function MyComponent() {
  return (
    <Card
      variant="product"
      title="Product Title"
      subtitle="$99.99"
      description="Product description goes here"
      image="/path/to/image.jpg"
    />
  );
}

Features

• Multiple variants (product, service, testimonial, feature)
• Responsive design
• Image support
• Customizable layouts
• Theme integration
• TypeScript support
• Accessible by default

Props

| Prop | Type | Default | Description | | ----------- | ---------------------------------------------------- | --------- | ------------------------------------ | | variant | 'product' | 'service' | 'testimonial' | 'feature' | 'product' | The visual style variant of the card | | title | string | required | The title of the card | | subtitle | string | undefined | Optional subtitle | | description | string | undefined | Card description | | image | string | undefined | URL of the card image | | className | string | undefined | Additional CSS classes | | children | ReactNode | undefined | Optional child elements |

Examples

Product Card

<Card
  variant="product"
  title="Premium Product"
  subtitle="$199.99"
  description="High-quality product with amazing features"
  image="/product-image.jpg"
/>

Service Card

<Card
  variant="service"
  title="Professional Service"
  subtitle="Starting at $99"
  description="Expert service delivery"
  image="/service-image.jpg"
/>

Testimonial Card

<Card
  variant="testimonial"
  title="Great Experience!"
  description="Amazing service and support"
  author={{
    name: "John Doe",
    title: "CEO",
    avatar: "/avatar.jpg",
  }}
/>

Customization

Customize card styles using Tailwind CSS:

<Card
  className="bg-custom-color shadow-custom"
  variant="product"
  title="Custom Card"
/>

Version History

Current version: 0.2.1

See Changelog for details about changes and updates.

License

MIT © [Your Name]