Showcase

A React Three Fiber component that renders a 3D hollow cylinder with a custom image texture and subtle rotation. Perfect for dynamic 3D showcases.

Installation

Follow the steps below to add the Showcase Component to your project.

+

Run the following command in the terminal.  

npx shadcn add https://elixir-ui-xi.vercel.app/registry/showcase.json

Usage

Follow the steps below to add the Showcase Component to your project.

1

Import the component  

import Showcase from "@/components/showcase";
2

Add the component to your project  

<div className='w-full h-[60vh] bg-black'>
  <ShowcaseComponent
    imageSrc="/components/showcase/showcase-image.png"
    text="Anime"
    fontSize="55px"
    fontFamily="exo"
    textColor="#FFFFD4"
  />
</div>