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.
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.
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. |