Section Card

section-cardui

Card variant tuned for settings pages — title, description, and content slots, with optional footer for save/cancel actions. The block-level building block for `.../settings/*` routes.

Also available for React ->

Installation

$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/section-card.json

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/section-card.json

$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/section-card.json

$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/section-card.json

Named registry:npx shadcn-vue@latest add @uipkge/section-cardInstalls to:app/components/ui/section-card/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`title`	`string`	—	required
`description`	`string`	—	optional
`class`	`HTMLAttributes['class']`	—	optional
`contentClass`	`string`	—	optional

Includes

card

Files installed (2)

app/components/ui/section-card/SectionCard.vue0.9 kB

<script setup lang="ts">
import { cn } from '@/lib/utils'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import type { HTMLAttributes } from 'vue'

const props = defineProps<{
  title: string
  description?: string
  class?: HTMLAttributes['class']
  contentClass?: string
}>()
</script>

<template>
  <Card :class="cn('flex flex-col', props.class)">
    <CardHeader class="pb-4">
      <div class="flex flex-wrap items-center justify-between gap-2">
        <div class="min-w-0">
          <CardTitle class="text-base font-semibold">{{ title }}</CardTitle>
          <CardDescription v-if="description" class="mt-0.5">{{ description }}</CardDescription>
        </div>
        <slot name="header-action" />
      </div>
    </CardHeader>
    <CardContent :class="cn('flex-1', props.contentClass)">
      <slot />
    </CardContent>
    <slot name="footer" />
  </Card>
</template>