FeatureCard

Render a reusable feature, content, or navigation card with optional link and icon slot.

Launch-ready sections

Compose product pages from focused blocks while keeping copy, data, and route logic in your app.

Title-only highlight

Feature library

Link each card to a deeper product, docs, or marketing page without coupling the component to Nuxt routing.

Usage analytics

Open external dashboards safely with a default rel for blank-target links.

Custom rel link

Override rel when your app has a specific security or attribution policy.

Installation


pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/feature-card.json"

Usage

<script setup lang="ts">
import { Sparkles } from 'lucide-vue-next'
import { FeatureCard } from '@/components/feature-card'
</script>

<template>
  <FeatureCard
    title="Launch-ready sections"
    description="Compose product pages from focused blocks while keeping copy, data, and route logic in your app."
    href="/features"
  >
    <template #icon>
      <Sparkles class="size-5" aria-hidden="true" />
    </template>
  </FeatureCard>
</template>

App-Owned Feature Data

FeatureCard owns a portable card surface for feature, content, or navigation teasers. Your app owns the card list, copy, route generation, analytics events, active states, and any icon system you choose to use.

The component intentionally does not accept Nuxt Icon string names, require NuxtLink, or install an icon package. Pass icon markup through the icon slot so the consuming app can use Lucide, Nuxt Icon, custom SVGs, or no icon at all.

When href is omitted, the component renders static card content. When href is supplied, it renders an anchor. For target="_blank", the component adds rel="noopener noreferrer" unless you provide a custom rel value.

Examples

Default

Launch-ready sections

Compose product pages from focused blocks while keeping copy, data, and route logic in your app.

API Reference

Props

Prop	Type	Default	Description
`title`	`string`	—	Feature title supplied by your app.
`description`	`string`	—	Optional supporting feature copy supplied by your app.
`href`	`string`	—	Optional destination. When omitted, the card renders as static content.
`target`	`HTMLAnchorElement['target']`	—	Anchor target used when `href` is supplied.
`rel`	`string`	—	Anchor rel used when `href` is supplied. Defaults to `noopener noreferrer` for blank-target links.
`class`	`string`	—	Additional CSS classes for the root element.

Slots

Slot	Description
`icon`	Optional icon markup rendered above the title.

PolaroidCard ChangelogTimeline

On This Page

Installation Usage App-Owned Feature Data Examples Default API Reference Props Slots