AceUi

Image Text

A component that creates stunning text with image backgrounds using CSS mask properties for eye-catching typography.

Ace UI
The ImageText component creates visually striking text by applying image backgrounds with CSS masking, perfect for hero sections, headings, and artistic typography effects

Installation

1npx shadcn@latest add "https://ace-ui-six.vercel.app/r/image-text.json"

Usage

1import { ImageText } from "@/components/ui/image-text";
2

3export default function Example() {
4return (
5   <div>
6     <ImageText text="AceUi"  backgroundImage="/image-text.jpg" />
7  </div>
8);
9}

Variants

1// Different font sizes
2<ImageText 
3text="Large Title" 
4backgroundImage="/hero-bg.jpg"
5fontSizeClasses="text-6xl md:text-8xl lg:text-9xl"
6/>
7

8// Custom alignment
9<ImageText 
10text="Left Aligned" 
11backgroundImage="/texture.jpg"
12align="left"
13/>
14

15// Custom styling
16<ImageText 
17text="Custom Style" 
18backgroundImage="/gradient.jpg"
19fontWeight="font-black"
20className="tracking-wider"
21/>

Features

  • Image background text masking effect
  • Responsive font sizing with Tailwind classes
  • Multiple text alignment options: left, center, right

Notice

Make sure your background images are optimized and have good contrast with surrounding elements for better readability and performance.

Props

PropTypeDefaultDescription
textstring"Ace UI"The text content to display
backgroundImagestring"/image-text.jpg"Path to the background image
fontSizeClassesstring"text-4xl sm:text-6xl md:text-7xl lg:text-8xl"Tailwind font size classes for responsive sizing
fontWeightstring"font-extrabold"Tailwind font weight class
align'left' | 'center' | 'right''center'Text alignment
classNamestring''Additional CSS classes