Card Title

Cards

About

A styled heading element used inside a card header to display the card's primary title, ported from RockSolid UI (SolidJS) to React, by Darshan Rajadhyaksha.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card Title to your project and fits it to your theme.

Code

How Card Title is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import CardTitle from "@/components/ui/card-title";

export default function CardTitleDemo() {
  return (
    <div className="w-full max-w-sm rounded-lg border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-800 dark:bg-neutral-950">
      <div className="flex flex-col gap-1.5">
        <CardTitle>Project overview</CardTitle>
        <p className="text-sm text-neutral-600 dark:text-neutral-300">
          Track your project progress.
        </p>
      </div>
      <div className="mt-4 text-sm text-neutral-800 dark:text-neutral-200">
        Your project is currently on track and all milestones are progressing as
        expected.
      </div>
      <div className="mt-6">
        <button
          type="button"
          className="inline-flex items-center justify-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-neutral-50 hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-950 dark:hover:bg-neutral-200"
        >
          View project
        </button>
      </div>
    </div>
  );
}