Card

Displays a card with header, content and footer

Preview

Create Project

Deploy a new project in one click

Your new project will be created with a configured environment

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/card

Usage

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

export function MyCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Title</CardTitle>
        <CardDescription>Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content</p>
      </CardContent>
      <CardFooter>
        <p>Footer</p>
      </CardFooter>
    </Card>
  )
}

Squircle

iOS-style squircle corners using CSS corner-shape: squircle.

Regular

border-radius

Squircle

corner-shape

<Card squircle>
  <CardHeader>
    <CardTitle>Squircle Card</CardTitle>
  </CardHeader>
</Card>

Components

Component	Description
Card	Card container
CardHeader	Card header section
CardTitle	Card title text
CardDescription	Card description text
CardContent	Main content area
CardFooter	Card footer section

Props

Prop	Type	Default	Description
squircle	boolean	false	Apply iOS-style squircle corners (Chrome 139+)