Primitive Card

Cards

About

A themeable card container with header, title, description, content and footer slots, plus subtle hover/press motion for interactive variants.

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

Code

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

Usage.tsx

import BjorkCard, {
  BjorkCardHeader,
  BjorkCardTitle,
  BjorkCardDescription,
  BjorkCardContent,
  BjorkCardFooter,
} from "@/components/ui/primitive-card";

export default function PrimitiveCardDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-[var(--bjork-bg)] p-10">
      <BjorkCard variant="interactive" padding="lg" className="w-full max-w-sm">
        <BjorkCardHeader>
          <BjorkCardTitle>Workspace settings</BjorkCardTitle>
        </BjorkCardHeader>
        <BjorkCardDescription>
          Manage members, billing and integrations for your team from a single
          place.
        </BjorkCardDescription>
        <BjorkCardContent>
          <p className="text-sm text-[color:var(--bjork-text-medium)]">
            Changes are synced instantly across all connected devices.
          </p>
        </BjorkCardContent>
        <BjorkCardFooter>
          <button className="rounded-full bg-[var(--bjork-accent)] px-4 py-1.5 text-sm font-medium text-white">
            Open settings
          </button>
        </BjorkCardFooter>
      </BjorkCard>
    </div>
  );
}