Menu
Documentation
v4.0.0-beta.4

Card

<BaseCard /> · A flexible content container.

View SourceOpen Issue

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

vue
<template>
  <BaseCard class="p-6">
    <!-- Card content -->
  </BaseCard>
</template>

Features

  • Optimized contrasts
  • Fully customizable
  • Configurable variants

Anatomy

This component accepts any content as a child. You can customize the card's visual style by using the available props.

vue
<template>
  <BaseCard>
    <!-- Content goes here -->
  </BaseCard>
</template>

API Reference

This component has props that you can use to modify its behavior.

Prop Type
variant
default:"default"
"default" | "none" | "muted"

The variant of the card.

rounded
default:"sm"
"sm" | "md" | "lg" | "none"

The radius of the card.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

Slot Type
#default
any

Customization

Your can override the component default CSS variables in your main.css file.

css
@theme {
  /* Default card variables */
  --color-card-default-bg: var(--color-white);
  --color-card-default-border: var(--color-muted-300);

  /* Muted card variables */
  --color-card-muted-bg: var(--color-muted-50);
  --color-card-muted-border: var(--color-muted-300);
}

Examples

Variants

Use the variant prop to control the colors of the card.

Default card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Muted card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Custom card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Custom card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

vue
<template>
  <BaseCard variant="default" class="p-6">
    <!-- Card content -->
  </BaseCard>
  <BaseCard variant="muted" class="p-6">
    <!-- Card content -->
  </BaseCard>
  <BaseCard variant="none" rounded="md" class="p-6 bg-primary-600/10 border-2 border-primary-600">
    <!-- Card content -->
  </BaseCard>
  <BaseCard variant="none" rounded="md" class="p-6 bg-muted-950 dark:bg-white">
    <!-- Card content -->
  </BaseCard>
</template>

Radius

Use the rounded prop to control the border radius of the card.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Iam a card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

vue
<template>
  <BaseCard rounded="none" class="p-6">
    <!-- Card content -->
  </BaseCard>
  <BaseCard rounded="sm" class="p-6">
    <!-- Card content -->
  </BaseCard>
  <BaseCard rounded="md" class="p-6">
    <!-- Card content -->
  </BaseCard>
  <BaseCard rounded="lg" class="p-6">
    <!-- Card content -->
  </BaseCard>
</template>

Button

Checkbox