Simple Card with Chai Theme

A visually elegant, customizable card component with optional Chai theme support.

Overview

SimpleCard can be used for blog card and other card utilises since it is very much flexible

Mountain Mist Tea

Peaceful Tea Experience

Experience tranquility in the heart of the mountains, where fresh air and breathtaking views await you every morning.

Learn More

Urban Coffee Journey

City Brews & Beans

Dive into the vibrant energy of the city, discovering hidden gems, lively streets, and unforgettable urban experiences.

Learn More

Installation

CLI Installation

Make sure ShadCN UI and your custom UI system are set up in your project. Then run:

npx shadcn@latest add https://ui-chaiui.vercel.app/simple-card.json

Manual Installation

To manually install the SimpleCard component in your project, follow these steps:

📁 1. Folder Structure

Navigate to your project’s src directory and create the following folder structure:

src/
└── components/
    └── ui/
        └── simpleCard/
            └── SimpleCard.tsx

🧩 2. Create the Component File

Inside simpleCard/, create a new file called:

SimpleCard.tsx

🧾 3. Paste the Component Code

Paste the following code into SimpleCard.tsx:

import React from "react";
 
interface SimpleCardProps {
  title?: string;
  subtitle?: string;
  desc?: string;
  src?: string;
  link?: string;
  ChaiTheme?: boolean;
}
 
const SimpleCard: React.FC<SimpleCardProps> = ({
  title = "Default Title",
  subtitle = "Default Subtitle",
  desc = "default description",
  src = "https://images.pexels.com/photos/734983/pexels-photo-734983.jpeg?auto=compress&cs=tinysrgb&w=600",
  link = "./",
  ChaiTheme = false,
}) => {
    return (
        <div className={`${ChaiTheme 
          ? 'bg-amber-50 dark:bg-amber-900 text-amber-900 dark:text-amber-50' 
          : 'bg-white dark:bg-neutral-900 text-neutral-800 dark:text-neutral-200'}
          overflow-hidden mr-2.5 w-3xs h-80 p-0 m-0 aspect-[3/2] shadow-md transition-transform duration-100 rounded-2xl group hover:scale-101 hover:shadow-lg`}>
          
          <div className="overflow-hidden -translate-y-10 transition-transform duration-300 rounded-t-2xl h-50 group-hover:scale-104">
            <img src={src} alt="card visual" className="object-cover"/>
          </div>
          
          <div className="px-3 -translate-y-9">
  
            <div className={`font-bold text-lg ${ChaiTheme ? 'text-amber-900 dark:text-amber-100' : ''}`}>
              {title}
            </div>
            
     
            <div className={`text-sm ${ChaiTheme 
              ? 'text-amber-700 dark:text-amber-300' 
              : 'text-gray-500 dark:text-neutral-400'}`}>
              {subtitle}
            </div> 
            
 
            <div className={`pt-1 text-xs ${ChaiTheme 
              ? 'text-amber-600 dark:text-amber-400' 
              : 'text-gray-800 dark:text-gray-400'} line-clamp-3`}>
              {desc}
            </div>
            
    
            <a className={`pt-3 opacity-0 group-hover:opacity-100   
              translate-y-2 group-hover:translate-y-0
              transition-all duration-300 ease-in-out 
              text-sm underline underline-offset-4 inline-block cursor-pointer
              ${ChaiTheme ? 'text-amber-600 dark:text-amber-300' : ''}`}
              target="_blank" 
              rel="noopener noreferrer"
              href={link}>
              Learn More
            </a>
          </div>
        </div>
)
};
 
export default SimpleCard;

Usage

Import and use the SimpleCard component like this:

 
import SimpleCard from "@/components/ui/simpleCard/SimpleCard";
 
export default function App() {
  return (
    <SimpleCard
      title="Explore the Chai Theme"
      subtitle="Amber tones included"
      desc="This is a fully customizable card component with optional amber-themed styling."
      src="https://images.pexels.com/photos/734983/pexels-photo-734983.jpeg?auto=compress&cs=tinysrgb&w=600"
      link="https://example.com"
      ChaiTheme={true}
    />
  );
}

Props

Prop	Type	Description	Default
`title`	`string`	Title text shown at the top of the card	`"Default Title"`
`subtitle`	`string`	Subtitle or secondary heading below the title	`"Default Subtitle"`
`desc`	`string`	Description content in the body	`"default description"`
`src`	`string`	Image URL shown in the card	`Pexels Image`
`link`	`string`	URL that opens when "Learn More" is clicked	`"./"`
`ChaiTheme`	`boolean`	Whether to apply Chai-themed amber color styles	`false`

Simple Card with Chai Theme

On this page