card

shadcn-vue/card

FreeComponent

shadcn-vue publishes no description for this item.

Live preview

live · rendered by the registry

Rendered by shadcn-vue on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://shadcn-vue.com/r/styles/new-york/card.json

Source

ui/card/Card.vueshadcn-vue.com/r/styles/new-york/card.json

1<script setup lang="ts">
2import type { HTMLAttributes } from "vue"
3import { cn } from "@/lib/utils"
4 
5const props = defineProps<{
6  class?: HTMLAttributes["class"]
7}>()
8</script>
9 
10<template>
11  <div
12    :class="
13      cn(
14        'rounded-xl border bg-card text-card-foreground shadow',
15        props.class,
16      )
17    "
18  >
19    <slot />
20  </div>
21</template>

Files it writes

ui/card/Card.vue
ui/card/CardAction.vue
ui/card/CardContent.vue
ui/card/CardDescription.vue
ui/card/CardFooter.vue
ui/card/CardHeader.vue
ui/card/CardTitle.vue
ui/card/index.ts

More from shadcn-vue

All 65 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
accordionaccordion	shadcn-vue	Components	Free	2 deps · 5 files
alertalert	shadcn-vue	Components	Free	no deps · 4 files
alert-dialogalert-dialog	shadcn-vue	Components	Free	2 deps · 10 files
aspect-ratioaspect-ratio	shadcn-vue	Components	Free	1 dep · 2 files
attachmentattachment	shadcn-vue	Components	Free	1 dep · 10 files
avataravatar	shadcn-vue	Components	Free	2 deps · 4 files
badgebadge	shadcn-vue	Components	Free	2 deps · 2 files
breadcrumbbreadcrumb	shadcn-vue	Components	Free	1 dep · 8 files