@usevyre/react@usevyre/vue

Card

A contained surface for grouping related content. Composed of optionalCardHeader, CardBody, and CardFooter sub-components.

Anatomy

Card body content goes here.

import { Card, CardHeader, CardBody, CardFooter, Button, Badge } from "@usevyre/react";

<Card>
  <CardHeader>
    <Badge variant="teal">Component</Badge>
    <h3>Card title</h3>
  </CardHeader>
  <CardBody>
    <p>Card body content goes here.</p>
  </CardBody>
  <CardFooter>
    <Button variant="ghost" size="sm">Cancel</Button>
    <Button variant="accent" size="sm">Confirm</Button>
  </CardFooter>
</Card>

<script setup>
import { Card, CardHeader, CardBody, CardFooter, Button, Badge } from "@usevyre/vue";
</script>
<template>
  <Card>
    <CardHeader>
      <Badge variant="teal">Component</Badge>
      <h3>Card title</h3>
    </CardHeader>
    <CardBody>
      <p>Card body content goes here.</p>
    </CardBody>
    <CardFooter>
      <Button variant="ghost" size="sm">Cancel</Button>
      <Button variant="accent" size="sm">Confirm</Button>
    </CardFooter>
  </Card>
</template>

Variants

Default

Elevated

Outlined

<Card variant="default">Default</Card>
<Card variant="elevated">Elevated (shadow)</Card>
<Card variant="outlined">Outlined (border)</Card>

<Card variant="default">Default</Card>
<Card variant="elevated">Elevated (shadow)</Card>
<Card variant="outlined">Outlined (border)</Card>

Card props

Props

Prop	Type	Default	Description
`variant`	`"default" \| "elevated" \| "outlined"`	`"default"`	Visual style of the card surface.
`class / className`	`string`	`—`	Additional CSS class.

CardHeader / CardBody / CardFooter props

Props

Prop	Type	Default	Description
`class / className`	`string`	`—`	Additional CSS class on the section element.

AI Context

Valid props

Prop	Values	Default
`variant`	`"default"`\|`"elevated"`\|`"outlined"`\|`"ghost"`\|`"accent"`	`default`
`hoverable`	`true`\|`false`	`false`
`clickable`	`true`\|`false`	`false`

Common AI mistakes

variant="primary"→ Use variant="elevated" | "outlined" | "ghost" | "accent"
padding / margin / marginTop (any spacing prop) on a useVyre component→ Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it

Quick examples

Elevated card with sections

<Card variant="elevated">
  <CardHeader><Badge variant="teal">New</Badge></CardHeader>
  <CardBody>
    <h3>Card Title</h3>
    <p>Description text.</p>
  </CardBody>
  <CardFooter>
    <Button variant="ghost" size="sm">Learn more</Button>
  </CardFooter>
</Card>

← Calendar Checkbox →