Line Shadow Text

PreviewCode

ShipFast

@/demos/LineShadowTextDemo.tsx

import { createIsDark } from '@/demos/shared/theme'
import { LineShadowText } from '@/registry/magicui/line-shadow-text'

export function LineShadowTextDemo() {
  const isDark = createIsDark()
  const shadowColor = () => (isDark() ? 'white' : 'black')

  return (
    <h1 class="
      text-5xl leading-none font-semibold tracking-tighter text-balance
      sm:text-6xl
      md:text-7xl
      lg:text-8xl
    "
    >
      Ship
      <LineShadowText class="italic" shadowColor={shadowColor()}>
        Fast
      </LineShadowText>
    </h1>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/line-shadow-text

bun

bunx shadcn@latest add @magicui-solid/line-shadow-text

yarn

yarn dlx shadcn@latest add @magicui-solid/line-shadow-text

npm

npx shadcn@latest add @magicui-solid/line-shadow-text

Import

import { LineShadowText } from '@/components/magicui/line-shadow-text'

Usage

<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	ValidComponent	"span"	The element to render the text as

Original:

magicui.design/docs/components/line-shadow-text