nuxt-x-cards
A premium card component library for Nuxt 4 with cinematic image filters, warm surfaces, and accessible design.
nuxt-x-cards
A premium card component library for Nuxt 4. All 12 components share a unified design language — warm neutral surfaces, cinematic image filters, 4px-grid spacing, and WCAG AA-compliant contrast ratios throughout.
Installation
Add the layer to your Nuxt project:
npm install nuxt-x-cards
Register it in nuxt.config.ts:
export default defineNuxtConfig({
extends: ['nuxt-x-cards']
})
All components are auto-imported with the XCard prefix. Global defaults (filter, overlay, aspect ratios) can be configured via the useXCards() composable.
Components
| Component | Description |
|---|---|
<XCardHeroFullscreen /> | Full-viewport hero with cinematic overlay and CTA buttons |
<XCardHeroSplit /> | Split-layout hero — image on one side, editorial text on the other |
<XCardFeature /> | Versatile feature card supporting icon, image, and stat layouts |
<XCardGrid /> | Responsive grid wrapper for card collections |
<XCardMedia /> | Immersive full-bleed media card with gradient overlay |
<XCardImageFilter /> | Before/after image filter showcase with hover reveal |
<XCardProduct /> | Product showcase card with color swatch switcher |
<XCardTeam /> | Team member portrait card with social links |
<XCardReview /> | Multi-source review card (Google, Yelp, Trustpilot, App Store) |
<XCardTestimonial /> | Editorial testimonial card with serif quote and portrait image |
<XCardPricing /> | Pricing tier card with feature list and highlighted state |
<XCardComparison /> | "Us vs Them" comparison table with check/value rows |
AI Context
package: "nuxt-x-cards"
version: "0.1.0"
type: nuxt-layer
prefix: XCard
components: 12
use-when: >
Use nuxt-x-cards when building marketing pages, landing pages, or product
sites in Nuxt 4 that require polished card UI. All components are
auto-imported. Prefer XCardHeroFullscreen or XCardHeroSplit for above-the-fold
sections, XCardMedia or XCardFeature for content sections, and XCardPricing /
XCardComparison for conversion-focused sections.
filters:
- cinematic
- moody
- golden
- cool
- dramatic
- none
design-system:
spacing: 4px grid
contrast: WCAG AA
dark-mode: supported