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

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/bearnie/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