Card
carduiBordered container with an opinionated header / content / footer layout. Use it as the wrapper around any self-contained block of content — settings panels, dashboard tiles, list cells.
Installation
$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/card.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/card.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/card.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/card.jsonNamed registry:
npx shadcn-vue@latest add @uipkge/cardInstalls to:app/components/ui/card/Examples
Loading interactive previews…
Loading interactive previews…
Props
| Name | Type / Values | Default | Required |
|---|---|---|---|
variant | 'default''elevated''outline''ghost' | — | optional |
class | HTMLAttributes['class'] | — | optional |
npm dependencies
Used by
ab-test-variant-resultsaccess-request-workflowad-spend-roi-dashboardagent-memory-inspectorai-agent-orchestratorai-code-review-assistantai-crm-pipeline-dashboardai-saas-command-centerairbnb-host-earningsannouncementannouncement-corner-toastapi-documentation-pagearticle-editor-toolbarasset-tracking-mapassignment-submission-dropzoneaudio-waveform-transcriptaudit-event-streamauth-mfaauth-password-resetauth-sign-inauth-sign-upauthor-bio-boxbackorder-split-shipment-managerbank-account-connectorbefore-after-side-by-sidebefore-after-togglebenefits-enrollment-portalbento-01bento-asymmetric-gridbento-metrics-mixedbill-of-lading-viewerbilling-accountblog-post-card-gridboard-resolution-signoffbookmark-manager-gridcap-table-ownership-summarycase-studycase-study-featured-storycase-study-filterable-listcase-study-metric-cardscase-study-metric-comparisoncash-flow-treasury-dashboardcategory-showcasecdc-replication-streamcertificate-credential-cardchangelog-release-notes-timelinecloud-backup-schedulecode-diff-reviewcode-snippet-playgroundcode-tabs-multi-languagecode-terminal-sessioncold-chain-temp-monitorcolumn-profiling-summarycoming-sooncommercial-invoice-generatorcommute-reimbursement-claimscomparison-migration-pathcomparison-vs-alternativescompensation-band-benchmarkingcompliance-sanctions-screenercompliance-soc2-readinesscontact-01contact-uscontent-calendar-matrixcontract-redline-diffcontractor-timesheet-approvalcourse-curriculum-outlinecrm-sales-call-workbenchcron-job-schedulercrypto-wallet-portfoliocta-01cta-gradient-glow-actioncta-split-demo-request-modalcta-split-panelcurrency-converter-widgetcustomer-journey-mapcustomer-metrics-bandcustomer-reviewscustoms-clearance-trackerdaily-standup-summarydashboard-kpisdata-catalog-lineagedata-contract-governancedata-explorerdata-product-carddata-quality-metricsdata-retention-policy-managerdatabase-migration-schema-diffdatabase-schema-viewerdbt-model-graphdecision-matrix-tabledefi-staking-yield-vaultdelivery-proof-carddelivery-tracking-mapdemo-guided-tourdemo-sandbox-paneldeployment-pipelinedisaster-response-mapdispatch-assignment-boarddns-record-managerdoctor-appointment-schedulerdriver-inspection-checklistemail-campaign-composeremail-template-previeweremployee-pulse-survey-resultsenvironment-variables-manageretl-pipeline-dagexit-interview-surveyfaq-01faq-contact-sidebarfaq-searchable-accordion-workbenchfeature-accordion-mediafeature-alternating-rowsfeature-bento-ai-copilotfeature-code-preview-splitfeature-comparison-sliderfeature-drag-drop-organizerfeature-flags-managerfeature-full-bleed-rowsfeature-hover-tilt-cardsfeature-interactive-api-curl-builderfeature-interactive-tabsfeature-metric-growth-stepperfeature-scroll-spy-walkthroughfeature-segmented-comparefeature-sticky-media-scrollfeature-store-registryfeature-tabbed-deepdivefeature-vertical-tabs-panefeature-visual-changelog-difffeatures-01features-2x2-spotlightfield-inspection-managerfine-tuning-job-monitorflashcard-study-deckfleet-vehicle-mapflight-radar-mapfloor-plan-explorerfreelance-work-for-hire-contractfreight-quote-calculatorfrequently-bought-togethergift-card-balance-checkergithub-oss-traction-bandgraphql-query-explorerguardrails-safety-scannerhabit-streak-trackerherohero-01hero-ascii-terminal-streamhero-bento-preview-gridhero-developer-terminalhero-globe-interactive-nodeshero-saas-metrics-dashboardhero-split-device-mockuphero-typing-command-centerhero-video-modal-walkthroughhero-waitlist-glowhotel-booking-reservationhow-it-works-arrow-flowhow-it-works-before-afterhow-it-works-scroll-stepperhow-it-works-tabbed-stepshow-it-works-timelinehub-locator-mapimmunization-historyinfluencer-campaign-cardinsurance-eligibility-checkerintegrations-connector-statusintegrations-featured-pairsintegrations-hub-diagramintegrations-search-directoryinventory-reorder-forecastinvoice-creator-wizardinvoices-listisochrone-reachability-mapkafka-stream-monitorknowledge-base-hublab-results-viewerlakehouse-table-optimizerlast-mile-courier-dispatchleaflet-asset-tracking-mapleaflet-delivery-tracking-mapleaflet-disaster-response-mapleaflet-fleet-vehicle-mapleaflet-flight-radar-mapleaflet-hub-locator-mapleaflet-isochrone-reachability-mapleaflet-last-mile-courier-dispatchleaflet-maritime-vessel-mapleaflet-neighborhood-walkscore-cardleaflet-property-boundary-mapleaflet-sales-territory-mapleaflet-store-locator-mapleaflet-threat-map-radarlease-agreement-signlegal-policy-pagelesson-video-playerllm-eval-benchmark-matrixloan-calculatorlogo-cloud-categorized-gridlogosloyalty-rewards-tier-hubmaintenance-request-ticketmaritime-vessel-mapmatrix-swot-analysismcp-server-registry-managermedia-asset-gallerymeeting-agenda-notesmodel-token-cost-optimizermultimodal-vision-playgroundnda-agreement-generatorneighborhood-walkscore-cardnewsletternewsletter-issue-archivenewsletter-signupnewsletter-split-previewonboarding-checklistonboarding-equipment-provisioningorder-confirmationorder-management-pagepacking-slip-generatorparquet-metadata-inspectorpassword-generator-widgetpatient-medical-recordpayouts-management-tablepayroll-run-summarypeer-discussion-forumperformance-review-matrixpersonal-finance-budgetpodcast-audio-playerpomodoro-focus-timerprescription-refill-managerpress-kit-brand-assetsprice-drop-alert-cardpricingpricing-01pricing-calculatorpricing-feature-addon-builderpricing-feature-tier-sliderpricing-matrix-groupedpricing-matrix-plan-cardspricing-matrix-sticky-headerpricing-single-planpricing-tier-comparison-matrixpricing-usage-calculator-sliderprivacy-data-export-portalprivacy-policy-generatorproduct-comparison-drawerproduct-qa-communityproject-roadmapprompt-ab-testing-comparatorprompt-playgroundproperty-amenities-gridproperty-boundary-mapproperty-listing-cardpurchase-order-receivingquiz-assessment-runnerrag-pipeline-visualizerrate-limiting-configratings-award-wallratings-review-badgesratings-star-summaryrecord-detail-pagerecruitment-candidate-pipelinereferral-program-widgetregister-01resources-category-gridresources-featured-listresources-teaser-gridreturn-merchandise-inspectionreturns-portalreverse-etl-sync-managerroi-calculator-inputssafe-note-calculatorsales-territory-mapschema-drift-alert-boardsecrets-rotation-schedulersection-cardsecurity-compliance-badgessecurity-data-flowsecurity-incident-timelinesecurity-trust-center-gridseo-audit-checklistservice-health-matrixsession-device-managershipment-tracking-timelineshipping-label-printerskill-assessment-radarsocial-media-post-schedulersocial-proof-stat-counter-streamsocial-proof-video-wallspark-job-stage-visualizersql-query-notebooksso-identity-provider-configstock-transfer-managerstore-locator-mapstore-pickup-curbsidestream-processing-flink-topologystudent-gradebook-tablesubpoena-legal-hold-managersubscription-churn-analyticssupport-ticket-detailsynthetic-data-generatortax-summary-reportteam-sectiontechnical-specs-sheettelehealth-video-roomtenant-rent-ledgertestimonialtestimonial-marquee-scrolltestimonial-masonry-verified-gridtestimonial-quote-carousel-telemetrytestimonial-social-cardstestimonials-01threat-map-radartime-off-portaltime-tracker-timesheettrademark-patent-portfoliotraining-compliance-trackertransaction-feedtriage-queue-dashboardusage-metering-dashboarduse-casesuse-cases-industry-griduse-cases-persona-tabsuse-cases-role-cardsuse-cases-scenario-walkthroughuser-profile-pageutm-campaign-buildervector-embeddings-inspectorvendor-supplier-portalvideo-playlist-sidebarvirtual-card-managervirtual-tour-panoramavitals-tracker-chartvulnerability-scanner-reportwaitlistwaitlist-referral-positionwarehouse-inventory-gridwave-picking-consolewebhook-testerwholesale-b2b-quick-order
Files installed (9)
app/components/ui/card/Card.vue0.5 kB
<script setup lang="ts"> import type { HTMLAttributes } from 'vue' import { cn } from '@/lib/utils' import { cardVariants } from './card.variants' // Inlined union: SFC compiler can't extract runtime props from // `CardVariants['variant']`. const props = defineProps<{ variant?: 'default' | 'elevated' | 'outline' | 'ghost' class?: HTMLAttributes['class'] }>() </script> <template> <div data-uipkge data-slot="card" :class="cn(cardVariants({ variant }), 'overflow-hidden', props.class)"> <slot /> </div> </template>app/components/ui/card/CardAction.vue0.4 kB
<script setup lang="ts"> import type { HTMLAttributes } from 'vue' import { cn } from '@/lib/utils' const props = defineProps<{ class?: HTMLAttributes['class'] }>() </script> <template> <div data-uipkge data-slot="card-action" :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)" > <slot /> </div> </template>app/components/ui/card/CardContent.vue0.3 kB
<script setup lang="ts"> import type { HTMLAttributes } from 'vue' import { cn } from '@/lib/utils' const props = defineProps<{ class?: HTMLAttributes['class'] }>() </script> <template> <div data-uipkge data-slot="card-content" :class="cn('p-6 pt-0', props.class)"> <slot /> </div> </template>app/components/ui/card/CardDescription.vue0.3 kB
<script setup lang="ts"> import type { HTMLAttributes } from 'vue' import { cn } from '@/lib/utils' const props = defineProps<{ class?: HTMLAttributes['class'] }>() </script> <template> <p data-uipkge data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)"> <slot /> </p> </template>app/components/ui/card/CardFooter.vue0.3 kB
<script setup lang="ts"> import type { HTMLAttributes } from 'vue' import { cn } from '@/lib/utils' const props = defineProps<{ class?: HTMLAttributes['class'] }>() </script> <template> <div data-uipkge data-slot="card-footer" :class="cn('flex items-center p-6 pt-0', props.class)"> <slot /> </div> </template>app/components/ui/card/CardHeader.vue0.5 kB
<script setup lang="ts"> import type { HTMLAttributes } from 'vue' import { cn } from '@/lib/utils' const props = defineProps<{ class?: HTMLAttributes['class'] }>() </script> <template> <div data-uipkge data-slot="card-header" :class=" cn( 'grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] items-start gap-1.5 p-6 has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]', props.class, ) " > <slot /> </div> </template>app/components/ui/card/CardTitle.vue0.4 kB
<script setup lang="ts"> import type { HTMLAttributes } from 'vue' import { cn } from '@/lib/utils' const props = defineProps<{ as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' class?: HTMLAttributes['class'] }>() </script> <template> <component :is="props.as ?? 'h3'" data-uipkge data-slot="card-title" :class="cn('leading-none font-semibold tracking-tight', props.class)" > <slot /> </component> </template>app/components/ui/card/card.variants.ts1 kB
import type { VariantProps } from 'class-variance-authority' import { cva } from 'class-variance-authority' /** * Variant definitions live in their own file (rather than the package * `index.ts`) so `Card.vue` can `import { cardVariants } from './card.variants'` * without creating a circular dependency back through the index. The circular * form caused intermittent `$setup.cardVariants is not a function` errors * during dev SSR when several `<Card>` instances rendered in a v-for before * the module graph had fully resolved. */ export const cardVariants = cva( 'bg-card text-card-foreground rounded-xl border shadow-sm transition-colors duration-150', { variants: { variant: { default: 'border-border', elevated: 'border-transparent shadow-md hover:shadow-md', outline: 'border-2', ghost: 'border-transparent shadow-none hover:bg-muted/50', }, }, defaultVariants: { variant: 'default', }, }, ) export type CardVariants = VariantProps<typeof cardVariants>app/components/ui/card/index.ts0.6 kB
export { default as Card } from './Card.vue' export { default as CardAction } from './CardAction.vue' export { default as CardContent } from './CardContent.vue' export { default as CardDescription } from './CardDescription.vue' export { default as CardFooter } from './CardFooter.vue' export { default as CardHeader } from './CardHeader.vue' export { default as CardTitle } from './CardTitle.vue' // Re-export variant API from the sibling file (kept separate to avoid the // Card.vue <-> index.ts circular import that broke dev SSR). export { cardVariants, type CardVariants } from './card.variants'
Raw manifest:https://uipkge.dev/r/vue/card.json