Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
ShipFast
"use client";
import { LineShadowText } from "@/registry/magicui/line-shadow-text";
import { useTheme } from "next-themes";
export function LineShadowTextDemo() {
const theme = useTheme();
const shadowColor = theme.resolvedTheme === "dark" ? "white" : "black";
return (
<h1 className="text-balance text-5xl font-semibold leading-none tracking-tighter sm:text-6xl md:text-7xl lg:text-8xl">
Ship
<LineShadowText className="italic" shadowColor={shadowColor}>
Fast
</LineShadowText>
</h1>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/line-shadow-text
Usage
import { LineShadowText } from "@/components/magicui/line-shadow-text";
<LineShadowText>Magic UI</LineShadowText>
Props
Prop | Type | Default | Description |
---|---|---|---|
shadowColor | string | "black" | The color of the shadow effect |
children | string | - | The text to display with shadow effect |
as | string | "span" | The HTML element to render the text as |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development