Card

Displays a card with header, content, and footer.

Create project

Deploy your new project in one-click.

>Name: >my-app

>Framework: >Next.js

tsx

1
2
3
4
5
6
7
8
9
10
11<Card>
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent>{/* body */}</CardContent>
  <CardFooter className="flex justify-end gap-2">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>

Card is a generic container for grouped content (a user, a product, a stats table). Border, background, padding and shadow-sm.

Idiomatic composition: CardHeader (Title + Description) → CardContent (body) → CardFooter (actions).

Installation

Terminal

$ bext ui add card

Copy and paste the following into src/components/ui/card.tsx.

card.tsx

1
2
3
4
5
6
7
8
9
10
11<Card>
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one-click.</CardDescription>
  </CardHeader>
  <CardContent>{/* body */}</CardContent>
  <CardFooter className="flex justify-end gap-2">
    <Button variant="outline">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@bext-stack/ui/primitives"

<Card>
  <CardHeader>
    <CardTitle>Notifications</CardTitle>
    <CardDescription>You have 3 unread messages.</CardDescription>
  </CardHeader>
  <CardContent>{/* body */}</CardContent>
  <CardFooter>
    <Button>Mark all as read</Button>
  </CardFooter>
</Card>

Anatomy

<Card>
  ├── <CardHeader>
  │   ├── <CardTitle>...</CardTitle>
  │   └── <CardDescription>...</CardDescription>
  ├── <CardContent>...free-form body...</CardContent>
  └── <CardFooter>...actions...</CardFooter>

API Reference

Card

Prop	Type	Default	Description
className	string	—	rounded-xl border bg-card text-card-foreground shadow-sm.

CardHeader

Prop	Type	Default	Description
className	string	—	flex flex-col gap-1.5 p-6.

CardTitle

Prop	Type	Default	Description
className	string	—	<h3> text-lg font-semibold leading-none tracking-tight.

CardDescription

Prop	Type	Default	Description
className	string	—	<p> text-sm text-muted-foreground.

CardContent

Prop	Type	Default	Description
className	string	—	p-6 pt-0 by default.

CardFooter

Prop	Type	Default	Description
className	string	—	flex items-center p-6 pt-0.

Accessibility

Card is a visual container and needs no ARIA role. If the whole card is clickable, wrap it in an <a> or a <button>.

Try it live Open in play

Edit this example live in the bext playground. It compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A card is a bordered surface with a header (title + description),
// content, and an optional footer for actions.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Card</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A container for grouped content and actions.</p>
      <div style={{ marginTop: 22, maxWidth: 360, border: "1px solid #e2e8f0", borderRadius: 12, background: "#fff", boxShadow: "0 1px 2px rgba(0,0,0,0.04)" }}>
        <div style={{ padding: "20px 20px 0" }}>
          <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>Create project</div>
          <div style={{ color: "#64748b", fontSize: 14, marginTop: 4 }}>Deploy your new project in one click.</div>
        </div>
        <div style={{ padding: "16px 20px", color: "#0a0a0a", fontSize: 14 }}>
          Name your project and pick a framework to get started.
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, padding: "0 20px 20px" }}>

The React idiom: same UI, for comparison.

← Calendar Carousel →

On This Page