Preview

Installation

npx sigma-ui@latest add card-lightbox

Usage

<script setup lang="ts">
import { CardLightbox } from '@/components/ui/card-lightbox';
import type { Item } from '@/components/ui/card-lightbox';

const items: Item[] = [
  {
    id: '0',
    category: 'Game',
    title: 'Explore the Sky Castle of Aeridor',
    content: '<p>Embark on an epic journey to Aeridor.</p>',
    theme: 'light',
    image: '/images/aeridor.jpg',
  },
];
</script>

<template>
  <CardLightbox :items="items" />
</template>

• Each Item needs an id, category, title, image, and a theme (light or dark) that sets the text color over the image.
• content is an HTML string or a Vue component, shown when the card is open.
• The animations use the motion-v library.

Examples

Games

A four-card grid with light and dark themed cards and HTML content.

API Reference

CardLightbox

Props

Prop	Type	Default
itemsrequired Cards to show in the grid; clicking one expands it into a lightbox.	Item[]	-

Accessibility

Each card renders as a native button, and the open view has a close button.

Key	Description
Tab	Moves focus to the next card or to the close button.
Enter	Opens the focused card, or closes the open view when the close button is focused.
Space	Opens the focused card, or closes the open view when the close button is focused.
Esc	Closes the open view.