Card

Installation

bunx --bun harukit@latest add card

npx harukit@latest add card

pnpm dlx harukit@latest add card

yarn dlx harukit@latest add card

Example

Card Title

Card Description

This is the main content of the card.

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

export function BasicCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>This is the main content of the card.</p>
      </CardContent>
    </Card>
  );
}

API Reference

Card

The main card container component.

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

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

CardHeader

The header section of the card.

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

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

CardTitle

The title component for the card header.

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

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

CardDescription

The description component for the card header.

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

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

CardContent

The main content area of the card.

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

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

CardFooter

The footer section of the card.

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

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.

Card

Card Title

On this page