nuxt-x-cards

Premium card component library for Nuxt 4 — 12 auto-imported components with cinematic image filters, warm neutral surfaces, and WCAG AA accessible design.

nuxt-x-cards

Premium card component library for Nuxt 4. Ships 12 auto-imported components covering heroes, features, media, product showcases, team members, reviews, testimonials, pricing, and comparison tables — all sharing a unified Oura/Rivian-inspired design language: warm neutral surfaces, cinematic image filters, 4px-grid spacing, and WCAG AA contrast.

Installation

npm install @xenterprises/nuxt-x-cards

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ["@xenterprises/nuxt-x-cards"],
});

What the layer provides

Components (auto-imported, `XCard` prefix)

Component	Description
`<XCardHeroFullscreen />`	Full-viewport hero with cinematic overlay and CTA buttons.
`<XCardHeroSplit />`	Split-layout hero — image one side, editorial text the other.
`<XCardFeature />`	Feature card supporting icon, image, stat, and filter variants.
`<XCardGrid />`	Responsive grid wrapper for feature card collections.
`<XCardMedia />`	Full-bleed media card with gradient overlay and CTA.
`<XCardImageFilter />`	Before/after image filter showcase with keyboard/touch accessibility.
`<XCardProduct />`	Product card with color swatch switcher and `color-change` emit.
`<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.
`<XCardPricing />`	Pricing tier card with feature list and highlighted state.
`<XCardComparison />`	"Us vs Them" comparison table with check/value rows.

Composables

`useXCards()`

Returns the merged layer configuration (consumer overrides deep-merged over defaults via defu). Use it to read design tokens in your own components.

const config = useXCards();
// config.colors.primary → "cream"
// config.defaults.filter → "cinematic"
// config.fonts.serif → "'Playfair Display', ..."

Returns XCardsConfig:

Property	Type	Description
`colors.primary`	`string`	Primary color name (`"cream"` default).
`colors.neutral`	`string`	Neutral color name (`"olive"` default).
`colors.accents`	`object`	`{ gold, goldHover, blue, green }` hex values.
`fonts.sans`	`string`	Sans-serif font stack.
`fonts.serif`	`string`	Serif font stack (Playfair Display).
`fonts.display`	`string`	Display font stack.
`fonts.googleFontsUrl`	`string`	Google Fonts URL to inject.
`radius.card`	`string`	Card border radius.
`radius.panel`	`string`	Panel border radius.
`spacing.baseUnit`	`number`	Grid base unit in px (default `4`).
`defaults.filter`	`string`	Default image filter: `"cinematic"`, `"moody"`, `"golden"`, `"cool"`, `"dramatic"`, or `"none"`.
`defaults.overlay`	`string`	Default overlay style.
`defaults.mediaAspectRatio`	`string`	Default media aspect ratio.
`defaults.productAspectRatio`	`string`	Default product aspect ratio.
`brand.appName`	`string`	App name used in component titles.
`brand.logoIcon`	`string`	Iconify icon class for the logo.

Configuration

Override any token by adding an x.cards key to app.config.ts:

// app.config.ts
export default defineAppConfig({
  x: {
    cards: {
      colors: {
        primary: "stone",
        accents: {
          gold: "#F5C518",
        },
      },
      defaults: {
        filter: "moody",
      },
      brand: {
        appName: "My Brand",
        logoIcon: "i-lucide-star",
      },
    },
  },
});

Environment Variables

None required.

Minimal Usage Example

<template>
  <!-- Hero section -->
  <XCardHeroFullscreen
    title="Built for speed"
    subtitle="The fastest car we've ever made"
    image="/hero.jpg"
    filter="cinematic"
    :ctas="[
      { label: 'Order Now', href: '/order', variant: 'primary' },
      { label: 'Learn More', href: '/specs', variant: 'ghost' },
    ]"
  />

  <!-- Feature grid -->
  <XCardGrid>
    <XCardFeature
      v-for="f in features"
      :key="f.title"
      :title="f.title"
      :description="f.description"
      :icon="f.icon"
      layout="icon"
    />
  </XCardGrid>

  <!-- Pricing -->
  <XCardPricing
    title="Pro"
    price="$49"
    period="/ month"
    :features="['Unlimited projects', 'Priority support', 'API access']"
    :highlighted="true"
    cta-label="Get started"
    cta-href="/signup"
  />
</template>

How It Works

Each component imports useXCards() to read the merged config for its design tokens. useXCards() calls useAppConfig() and reads appConfig.x.cards, then deep-merges it over the built-in defaults using defu — so consumers only need to override the keys they want to change. XCardImageFilter provides keyboard and touch accessibility: click, Enter, and Space all trigger the before/after reveal; touch events are handled via touchstart. All components use CSS custom properties driven by the design tokens so color swaps require no component changes. The layer registers no pages, middleware, or server routes.

AI Context

package: "@xenterprises/nuxt-x-cards"
type: nuxt-layer
prefix: XCard
use-when: >
  Adding premium card components to a Nuxt 4 project. Provides 12 auto-imported
  XCard-prefixed components (heroes, feature grids, media, product showcases, team
  members, reviews, testimonials, pricing, comparison) sharing a warm neutral /
  cinematic design language. Configure design tokens via app.config.ts under x.cards.
  No pages, middleware, or server routes are registered.

Edit this pageorReport an issue

Configuration

Installation and nuxt.config.ts setup reference for @xenterprises/nuxt-x-users.

HeroFullscreen

Full-viewport hero with gradient overlay, cinematic image filter, and CTA buttons.