Solo Count Card

Overview

Accordion can be used for FAQ sections, help sections, and other collapsible content utilities since it is very flexible.

Chai Lovers

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/solo-count-card.json

Manual Installation

To manually install the FeatureCard 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/
        └── featureCard/
            └── FeatureCard.tsx

🧩 2. Create the Component File

Inside featureCard/, create a new file called:

FeatureCard.tsx

🧾 3. Paste the Component Code

Paste the following code into FeatureCard.tsx:

import React from "react";
 
interface FeatureCardProps {
  title?: string;
  description?: string;
  icon?: string;
  ChaiTheme?: boolean;
}
 
function FeatureCard({
  title = "Feature Title",
  description = "Default feature description that explains what this feature does in detail.",
  icon = "✨",
  ChaiTheme = false
}: FeatureCardProps) {
  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"
      } w-60 rounded-2xl shadow-md p-5 flex flex-col items-center justify-center`}
    >
      <div className="text-4xl mb-4">{icon}</div>
      <div className="text-lg font-bold mb-2">{title}</div>
      <div className="text-sm text-center">{description}</div>
    </div>
  );
}
 
export default FeatureCard;

Usage

Import and use the FeatureCard component like this:

import React from "react";
import FeatureCard from "../../../../registry/ui/chaiThemed/featureCard";
 
function ShowFeatureCard() {
  return (
    <div className="flex justify-center items-center gap-4 flex-wrap">
      <FeatureCard
        title="Feature One"
        description="This is a description of feature one."
        icon="🌟"
        ChaiTheme={true}
      />
      <FeatureCard
        title="Feature Two"
        description="This is a description of feature two."
        icon="🚀"
        ChaiTheme={false}
      />
    </div>
  );
}
 
export default ShowFeatureCard;

Props

Prop	Type	Description	Default
`title`	`string`	Title text shown at the top of the card	`"Feature Title"`
`description`	`string`	Description text shown below the title	`"Default feature description that explains what this feature does in detail."`
`icon`	`string`	Icon shown at the top of the card	`"✨"`
`ChaiTheme`	`boolean`	Whether to apply Chai-themed amber color styles	`false`

Solo Count Card

On this page