Overview
A complete split layout for product stories with app-owned visuals.
Render a full split layout while your app keeps ownership of copy, media, icons, routing, and analytics.
Media slot
Compose sections from product-owned content
Use the same API for product walkthroughs, docs callouts, and marketing proof sections.
Reversed layout
Alternate the story without rebuilding the layout
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/feature-split.json"
<script setup lang="ts">
import type { Component } from 'vue'
import { Boxes, PanelsTopLeft } from 'lucide-vue-next'
import { FeatureSplit, type FeatureSplitFeature, type FeatureSplitSection } from '@/components/feature-split'
const sections: FeatureSplitSection[] = [
{
id: 'compose',
title: 'Compose product stories',
description: 'Render split layouts while your app owns media and icons.',
features: [
{ id: 'slots', title: 'Slot-owned media', description: 'Bring screenshots, cards, videos, or custom SVGs.' },
{ id: 'features', title: 'Display-ready features', description: 'Map CMS records or static copy into a portable API.' }
]
}
]
const icons: Partial<Record<string, Component>> = {
slots: PanelsTopLeft,
features: Boxes
}
function featureIcon(feature: FeatureSplitFeature) {
return feature.id ? icons[feature.id] : undefined
}
</script>
<template>
<FeatureSplit :sections="sections">
<template #icon="{ feature }">
<component v-if="featureIcon(feature)" :is="featureIcon(feature)" class="size-5" aria-hidden="true" />
</template>
<template #media="{ section }">
<div class="rounded-2xl border bg-muted p-8">
{{ section.title }} media
</div>
</template>
</FeatureSplit>
</template>FeatureSplit owns the responsive split-section layout. Your app owns screenshots, videos, custom art, icon packages, routing, analytics, localization, and content sources.
Pass media through the scoped media slot and feature icons through the scoped icon slot. The component intentionally does not accept Nuxt Icon string names or import local placeholder components.
A complete split layout for product stories with app-owned visuals.
Render a full split layout while your app keeps ownership of copy, media, icons, routing, and analytics.
Media slot
Compose sections from product-owned content
Use the same API for product walkthroughs, docs callouts, and marketing proof sections.
Reversed layout
Alternate the story without rebuilding the layout
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Optional group title shown above all sections. |
description | string | — | Optional group description shown above all sections. |
sections | FeatureSplitSection[] | null | [] | Split sections supplied by your app. |
class | string | — | Additional CSS classes for the section group. |
interface FeatureSplitFeature {
id?: string
title: string
description?: string
}
interface FeatureSplitSection {
id?: string
title: string
description?: string
reverse?: boolean
features?: FeatureSplitFeature[] | null
}| Slot | Props | Description |
|---|---|---|
icon | { feature, featureIndex, section, sectionIndex } | Optional icon markup rendered beside each feature. |
media | { section, sectionIndex } | Optional media panel rendered beside section copy. |