Components

Card

A surface container with padding, a border, and a subtle background. The base for most layout compositions.

Installation

terminal

npx shadcn@latest add @wuko/card

Usage

Card is a plain styled <div>: no variants, no compound subcomponents. Wrap your content and customize via className when needed.

Project usage

8.2k of 10k tokens used this week.

components/example.tsx

import { Card } from "@/components/ui/card";

export function Example() {
  return (
    <Card className="max-w-sm">
      <div className="text-sm font-semibold text-wuko-heading mb-1">
        Project usage
      </div>
      <p className="text-[13px] text-wuko-text-muted">
        8.2k of 10k tokens used this week.
      </p>
    </Card>
  );
}

Props

Prop	Type	Default	Description
className	string	—	Tailwind classes merged onto the root div.
children	ReactNode	—	Card contents.
...rest	HTMLAttributes<HTMLDivElement>	—	All native div attributes are forwarded to the element.

← Previous

Button

Input