Card

Cards

About

A dark glass surface panel for a self-contained block of content, with an optional label, display-type title, header actions slot, and a footer separated by a hairline — ported to React from the oyna-ui Vue component library by azabroflovski.

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

Code

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

Usage.tsx

import Card from "@/components/ui/oyna-card";

export default function CardDemo() {
  return (
    <div className="flex min-h-[480px] w-full items-center justify-center bg-[#0b0b0f] p-10">
      <Card
        label="Usage"
        title="Requests"
        titleAs="h2"
        style={{ width: 340 }}
        actions={<span className="o-badge">Pro</span>}
        footer="72% of the plan, resets on Monday."
      >
        <span
          style={{ font: "700 56px/1 var(--o-font-display)", color: "#fff" }}
        >
          131.6k
        </span>
        <div
          style={{
            marginTop: 12,
            height: 6,
            borderRadius: 999,
            background: "rgba(255,255,255,0.12)",
            overflow: "hidden",
          }}
          aria-label="Plan usage"
        >
          <div
            style={{
              width: "72%",
              height: "100%",
              background: "var(--o-accent)",
            }}
          />
        </div>
      </Card>
      <style>{`.o-badge { display:inline-flex; align-items:center; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.12); color:#fff; font: 700 11px/1.4 var(--o-font-sans); text-transform: uppercase; letter-spacing: .06em; }`}</style>
    </div>
  );
}