Card

shadcn's Card, same parts and props: a tinted shell with a caps title, the content on its own white sheet.

Ownership

Sample Owner 84000000001

Online

PICSample Assignee

demos.tsx

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/hiip-ui/card";

function CardDemo() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Ownership</CardTitle>
      </CardHeader>
      <CardContent className="divide-y p-0">
        <div className="flex items-start gap-3 px-4 py-3">
          <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-[0.625rem] font-semibold text-primary">
            ZL
          </span>
          <div className="min-w-0 flex-1 truncate text-base font-medium">
            Sample Owner{" "}
            <span className="text-sm font-normal text-muted-foreground tabular-nums">
              84000000001
            </span>
          </div>
          <span className="shrink-0 rounded-full bg-success/10 px-2 py-0.5 text-xs font-medium text-success">
            Online
          </span>
        </div>
        <div className="flex items-start gap-3 px-4 py-3">
          <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-foreground text-xs font-semibold text-background">
            S
          </span>
          <div className="flex min-w-0 flex-1 flex-col">
            <span className="truncate text-sm text-muted-foreground">PIC</span>
            <span className="truncate text-base font-medium">
              Sample Assignee
            </span>
          </div>
          <span className="shrink-0 rounded-full bg-border px-2 py-0.5 text-xs text-foreground/70 tabular-nums">
            +1
          </span>
        </div>
      </CardContent>
    </Card>
  );
}

Install — needs @hiip registered in components.json

bunx shadcn@latest add @hiip/card

Or by URL, with the token in the query

bunx shadcn@latest add "https://ui.hiip.ai/r/card.json?token=$HIIP_REGISTRY_TOKEN"

Both need a token — set one up.

Anatomy

Import from components/ui/hiip-ui/card.

{/* shadcn's parts, one for one — swapping is an import-path change */}
<Card size="default">                 {/* or "sm" */}
  <CardHeader>
    <CardTitle>Ownership</CardTitle>
    <CardDescription />
    <CardAction />                    {/* pinned top-right */}
  </CardHeader>

  {/* the white sheet — `className="divide-y p-0"` for a list of rows */}
  <CardContent>…</CardContent>

  <CardFooter />
</Card>

API Reference

Generated from the source. Props forwarded to the underlying element are not listed.

Card

Prop	Type	Default
`size` `sm` tightens the gutters from 16px to 12px, as upstream's does.	`"default" \| "sm" \| undefined`	`"default"`

CardHeader

No props of its own.

CardTitle

The small grey caps over the sheet.

No props of its own.

CardDescription

No props of its own.

CardAction

No props of its own.

CardContent

The white sheet.

No props of its own.

CardFooter

No props of its own.

Type

registry:ui

Files written

components/ui/hiip-ui/card.tsx