Card

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download card -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Card } from "@/components/ui/card";
import { CardHeader } from "@/components/ui/card";
import { CardTitle } from "@/components/ui/card";
import { CardDescription } from "@/components/ui/card";
import { CardContent } from "@/components/ui/card";
import { CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const Component = CardFooter;

const args = {
  "align": "end",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { align?: "end" | "justify" | "start" | "stretch" };
</script>

<template>
  <Card class="w-[350px]"
    ><CardHeader
      ><CardTitle>Title</CardTitle
      ><CardDescription>Description</CardDescription></CardHeader
    ><CardContent>Card content here</CardContent
    ><CardFooter v-bind="args"
      ><Button variant="tertiary">Cancel</Button
      ><Button>Save</Button></CardFooter
    ></Card
  >
</template>

Examples

Default

<script setup lang="ts">
import { Card } from "@/components/ui/card";
import { CardHeader } from "@/components/ui/card";
import { CardTitle } from "@/components/ui/card";
import { CardDescription } from "@/components/ui/card";
import { CardContent } from "@/components/ui/card";
import { CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const Component = CardFooter;

const args = {
  "align": "justify",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { align?: "end" | "justify" | "start" | "stretch" };
</script>

<template>
  <Card class="w-[350px]"
    ><CardHeader
      ><CardTitle>Title</CardTitle
      ><CardDescription>Description</CardDescription></CardHeader
    ><CardContent>Card content here</CardContent
    ><CardFooter v-bind="args"
      ><Button variant="tertiary">Cancel</Button
      ><Button>Save</Button></CardFooter
    ></Card
  >
</template>

With Form

<script setup lang="ts">
import { Card } from "@/components/ui/card";
import { CardHeader } from "@/components/ui/card";
import { CardTitle } from "@/components/ui/card";
import { CardDescription } from "@/components/ui/card";
import { CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const Component = CardFooter;

const args = {
  "align": "justify",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { align?: "end" | "justify" | "start" | "stretch" };
</script>

<template>
  <Card class="w-[350px]"
    ><CardHeader
      ><CardTitle>Create project</CardTitle
      ><CardDescription
        >Deploy your new project in one click.</CardDescription
      ></CardHeader
    ><CardContent
      ><form class="grid gap-4">
        <div class="grid gap-2">
          <Label for="name">Name</Label
          ><Input id="name" placeholder="Name of your project" />
        </div>
        <div class="grid gap-2">
          <Label for="framework">Framework</Label
          ><Input id="framework" placeholder="Next.js" />
        </div></form></CardContent
    ><CardFooter align="justify"
      ><Button variant="tertiary">Cancel</Button
      ><Button>Deploy</Button></CardFooter
    ></Card
  >
</template>

Stats

<script setup lang="ts">
import { Card } from "@/components/ui/card";
import { CardHeader } from "@/components/ui/card";
import { CardDescription } from "@/components/ui/card";
import { CardTitle } from "@/components/ui/card";
import { CardContent } from "@/components/ui/card";
import { CardFooter } from "@/components/ui/card";

const Component = CardFooter;

const args = {
  "align": "justify",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { align?: "end" | "justify" | "start" | "stretch" };
</script>

<template>
  <Card class="w-[280px]"
    ><CardHeader
      ><CardDescription>Total revenue</CardDescription
      ><CardTitle class="text-3xl">$15,231.89</CardTitle></CardHeader
    ><CardContent
      ><p class="text-sm text-neutral-mid">
        +20.1% from last month
      </p></CardContent
    ></Card
  >
</template>

Footer Outside

<script setup lang="ts">
import { Card } from "@/components/ui/card";
import { CardHeader } from "@/components/ui/card";
import { CardTitle } from "@/components/ui/card";
import { CardDescription } from "@/components/ui/card";
import { CardContent } from "@/components/ui/card";
import { CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

const Component = CardFooter;

const args = {
  "align": "justify",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & { align?: "end" | "justify" | "start" | "stretch" };
</script>

<template>
  <Card class="w-[350px]"
    ><CardHeader
      ><CardTitle>Title</CardTitle
      ><CardDescription
        >Footer rendered outside the card body.</CardDescription
      ></CardHeader
    ><CardContent>Card content here</CardContent
    ><CardFooter footer="outside"
      ><Button variant="tertiary">Cancel</Button
      ><Button>Save</Button></CardFooter
    ></Card
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Card

CardAction

CardContent

CardDescription

CardFooter

CardHeader

CardTitle

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.