center-imagemasking

PreviousNext
Docs
ui-layoutscomponent

Preview

Loading preview…
./registry/components/clip-path/center-image-masking.tsx
import React from 'react';

function index() {
  return (
    <>
      <section className='gap-2 dark:bg-black bg-white border rounded-lg p-5'>
        <figure className='relative h-[80vh] '>
          <img
            src='https://images.unsplash.com/photo-1433838552652-f9a46b332c40?q=80&w=2070&auto=format&fit=crop'
            alt=''
            className='w-full h-full object-cover  aspect-square'
            style={{
              maskImage: "url('/splash-center.svg')",
              maskSize: 'contain',
              maskRepeat: 'no-repeat',
              maskPosition: 'center',
            }}
          />
        </figure>
      </section>
    </>
  );
}

export default index;

Installation

npx shadcn@latest add @ui-layouts/center-imagemasking

Usage

import { CenterImagemasking } from "@/components/center-imagemasking"
<CenterImagemasking />