Card

GitHub
Display content in a card with a header, body and footer.

Usage

<template>
  <UCard>
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </UCard>
</template>

Variant

Use the variant prop to change the variant of the Card.

<template>
  <UCard variant="subtle">
    <template #header>
      <Placeholder class="h-8" />
    </template>

    <Placeholder class="h-32" />

    <template #footer>
      <Placeholder class="h-8" />
    </template>
  </UCard>
</template>

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

variant

'outline'

"solid" | "outline" | "soft" | "subtle"

ui

Partial<{ root: string; header: string; body: string; footer: string; }>

Slots

Slot Type
header

{}

default

{}

footer

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    card: {
      slots: {
        root: 'rounded-[calc(var(--ui-radius)*2)]',
        header: 'p-4 sm:px-6',
        body: 'p-4 sm:p-6',
        footer: 'p-4 sm:px-6'
      },
      variants: {
        variant: {
          solid: {
            root: 'bg-(--ui-bg-inverted) text-(--ui-bg)'
          },
          outline: {
            root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)'
          },
          soft: {
            root: 'bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)'
          },
          subtle: {
            root: 'bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)'
          }
        }
      },
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        card: {
          slots: {
            root: 'rounded-[calc(var(--ui-radius)*2)]',
            header: 'p-4 sm:px-6',
            body: 'p-4 sm:p-6',
            footer: 'p-4 sm:px-6'
          },
          variants: {
            variant: {
              solid: {
                root: 'bg-(--ui-bg-inverted) text-(--ui-bg)'
              },
              outline: {
                root: 'bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)'
              },
              soft: {
                root: 'bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)'
              },
              subtle: {
                root: 'bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)'
              }
            }
          },
          defaultVariants: {
            variant: 'outline'
          }
        }
      }
    })
  ]
})

Calendar

A calendar component for selecting single dates, multiple dates or date ranges.

Carousel

A carousel with motion and swipe built using Embla.