Getting Started

1. Install

npm install @prismojs/react

or with pnpm / yarn:

pnpm add @prismojs/react
yarn add @prismojs/react

2. Import the stylesheet

Add the CSS import once in your app entry point (e.g. layout.tsx or _app.tsx).

import '@prismojs/react/styles';

The stylesheet contains all rarity effects, shine overlays, and glare layers. It is required for the visual effects to work.

3. Use the component

import { PrismoCard } from '@prismojs/react';

export function MyCard() {
  return (
    <PrismoCard rarity="rare holo v">
      <img
        src="/my-card.png"
        alt="My card"
        style={{ width: '100%', borderRadius: 12 }}
      />
    </PrismoCard>
  );
}

Wrap any content — images, divs, custom markup — and the holographic effect is automatically applied on pointer interaction.

Next.js configuration

If you use Next.js, add @prismojs/react to transpilePackages in your config:

// next.config.ts
const config = {
  transpilePackages: ['@prismojs/react'],
};

export default config;