5Sponsor

Card

Card with header, body, and footer slots

Terminal
card-demo
No opentui live preview is registered for this example yet.

Installation

pnpm dlx shadcn@latest add @termcn/card

Usage

import { Card } from "@/components/ui/card";
<Card title="System Info" subtitle="Local machine">
  <Text>CPU: 4 cores @ 3.2 GHz</Text>
</Card>

API Reference

Card

PropTypeDefault
titlestringundefined
subtitlestringundefined
childrenReactNoderequired
footerReactNodeundefined
borderColorstringundefined
widthnumberundefined
borderStyle"single" | "double" | "round" | "bold" | "singleDouble" | "doubleSingle" | "classic""round"
paddingXnumber1
paddingYnumber0
footerDividerCharstring"─"