Line Shadow Text

A text component with a moving line shadow.

ShipFast

"use client"

import { useTheme } from "next-themes"

import { LineShadowText } from "@/registry/magicui/line-shadow-text"

export function LineShadowTextDemo() {
  const theme = useTheme()
  const shadowColor = theme.resolvedTheme === "dark" ? "white" : "black"
  return (
    <h1 className="text-5xl leading-none font-semibold tracking-tighter text-balance 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/ui/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`	`"article" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "li" \| "p" \| "section" \| "span"`	`"span"`	The HTML element to render the text as

Typing Animation Aurora Text

On This Page

Installation Usage Props

Contribute

Limited Time Offer

Ship Faster with Magic 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

$199once

Get Lifetime Access

Trusted by 5,000+ developers