flex-card

Flex Card

A flexible and customizable React component for rendering e-cards with Tailwind CSS.

Version: 2.1.6

Author: Nouman Azam

Features

• Supports various types of content including images, titles, text, buttons, and embedded videos (YouTube and MP4).
• Allows for creating single or multiple cards with a flexible layout (horizontal or vertical).
• Includes a tabbed interface for displaying multiple card groups.
• Provides a carousel feature for displaying a set of cards in a scrollable format.
• Supports custom CSS classes for easy styling and theming.
• Lightweight and easy to integrate into your React project.

Installation

npm install flex-card

Usage

import { DefineCard } from "flex-card";

const cardData = [
  {
    type: "image",
    source: "https://example.com/image.jpg",
    text: "Image Caption",
  },
  {
    type: "title",
    text: "Card Title",
  },
  {
    type: "text",
    text: "This is some sample text content.",
  },
  {
    type: "button",
    text: "Click Me",
    url: "https://example.com",
  },
];

const App = () => {
  return (
    <div>
      <DefineCard content={cardData} />
    </div>
  );
};

Customization

You can customize the appearance of the cards by passing in additional CSS classes through the customClassNames prop:

<DefineCard
  content={cardData}
  customClassNames={{
    imageWrapper: "my-custom-image-wrapper",
    image: "my-custom-image",
    title: "my-custom-title",
    text: "my-custom-text",
    btn: "my-custom-button",
  }}
/>

Dependencies

The flex-card package has the following peer dependencies:

• embla-carousel-react
• lucide-react
• react
• react-dom
• react-markdown
• @headlessui/react

Make sure to install these dependencies in your project.

License

This project is licensed under the MIT License.