Card

Notifications

Manage your notification preferences.

Push notifications

Receive alerts on your device.

Email notifications

Receive updates via email.

<Card class="w-[380px]">
<CardHeader>
  <CardTitle>Notifications</CardTitle>
  <CardDescription>Manage your notification preferences.</CardDescription>
</CardHeader>
<CardContent class="grid gap-4">
  <div class="flex items-center justify-between">
    <div class="space-y-0.5">
      <div class="text-sm font-medium">Push notifications</div>
      <div class="text-xs text-muted-foreground">Receive alerts on your device.</div>
    </div>
    <Switch />
  </div>
  <div class="flex items-center justify-between">
    <div class="space-y-0.5">
      <div class="text-sm font-medium">Email notifications</div>
      <div class="text-xs text-muted-foreground">Receive updates via email.</div>
    </div>
    <Switch />
  </div>
</CardContent>
<CardFooter>
  <Button class="w-full">Save preferences</Button>
</CardFooter>
</Card>

Installation

npx bearnie add card

import Card from "@/components/ui/card/Card.astro";
import CardHeader from "@/components/ui/card/CardHeader.astro";
import CardTitle from "@/components/ui/card/CardTitle.astro";
import CardDescription from "@/components/ui/card/CardDescription.astro";
import CardAction from "@/components/ui/card/CardAction.astro";
import CardContent from "@/components/ui/card/CardContent.astro";
import CardFooter from "@/components/ui/card/CardFooter.astro";

Usage

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

<Card>
<CardHeader>
  <CardTitle>Card Title</CardTitle>
  <CardDescription>Card Description</CardDescription>
  <CardAction>Card Action</CardAction>
</CardHeader>
<CardContent>
  <p>Card Content</p>
</CardContent>
<CardFooter>
  <p>Card Footer</p>
</CardFooter>
</Card>

Examples

With action

Use the CardAction component to add an action in the header.

Team members

Invite your team to collaborate.

Alex Johnson

alex@example.com

Admin

Sarah Chen

sarah@example.com

Member

<Card class="w-[380px]">
<CardHeader>
  <CardTitle>Team members</CardTitle>
  <CardDescription>Invite your team to collaborate.</CardDescription>
  <CardAction>
    <Button size="sm">Invite</Button>
  </CardAction>
</CardHeader>
<CardContent>
  <div class="space-y-3">
    <div class="flex items-center gap-3">
      <div class="size-8 rounded-full bg-muted"></div>
      <div class="flex-1">
        <div class="text-sm font-medium">Alex Johnson</div>
        <div class="text-xs text-muted-foreground">alex@example.com</div>
      </div>
      <Badge variant="secondary">Admin</Badge>
    </div>
    <div class="flex items-center gap-3">
      <div class="size-8 rounded-full bg-muted"></div>
      <div class="flex-1">
        <div class="text-sm font-medium">Sarah Chen</div>
        <div class="text-xs text-muted-foreground">sarah@example.com</div>
      </div>
      <Badge variant="outline">Member</Badge>
    </div>
  </div>
</CardContent>
</Card>

Small size

Use size="sm" for smaller padding.

Quick note

Add a quick note to your project.

<Card size="sm" class="w-[320px]">
<CardHeader>
  <CardTitle>Quick note</CardTitle>
  <CardDescription>Add a quick note to your project.</CardDescription>
</CardHeader>
<CardContent>
  <Input placeholder="Type your note..." />
</CardContent>
<CardFooter class="justify-end gap-2">
  <Button size="sm" variant="outline">Cancel</Button>
  <Button size="sm">Save</Button>
</CardFooter>
</Card>

With form

Create project

Deploy your new project in one-click.

Project name

Framework

<Card class="w-[380px]">
<CardHeader>
  <CardTitle>Create project</CardTitle>
  <CardDescription>Deploy your new project in one-click.</CardDescription>
</CardHeader>
<CardContent>
  <div class="grid gap-4">
    <div class="grid gap-2">
      <Label for="name">Project name</Label>
      <Input id="name" placeholder="my-awesome-project" />
    </div>
    <div class="grid gap-2">
      <Label for="framework">Framework</Label>
      <Input id="framework" placeholder="Astro, Next.js, etc." />
    </div>
  </div>
</CardContent>
<CardFooter class="justify-end gap-2">
  <Button variant="outline">Cancel</Button>
  <Button>Create</Button>
</CardFooter>
</Card>

Props

Prop	Type	Default	Description
size	”default” \| “sm"	"default”	Card size variant
class	string	-	Additional CSS classes

CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter

Prop	Type	Default	Description
class	string	-	Additional CSS classes