A stacked deck of profile cards that fans out into an orbital arc on hover, lifting the active card with spring physics.
$ npx shadcn-vue@latest add "https://nxui.geoql.in/r/orbit-card-stack.json"Keep in mind
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
<script setup lang="ts">
import OrbitCardStack from '~/components/ui/orbit-card-stack/OrbitCardStack.vue';
</script>
<template>
<OrbitCardStack />
</template>
| Prop | Type | Default | Description |
|---|---|---|---|
items | OrbitStackItem[] | default | Array of profile items (name, role, description, etc.) |
default-active-index | number | 2 | Index of the card highlighted when collapsed |
spread | number | 168 | Horizontal spacing between cards when expanded, in pixels |
lift | number | 34 | Vertical lift of the active card when expanded, in pixels |
class | string | '' | Additional CSS classes for the root wrapper |
card-class | string | '' | Additional CSS classes for each card |
| Event | Payload | Description |
|---|---|---|
activeChange | (item: OrbitStackItem, index: number) | Emitted when the active card changes |