Corner Frame Text

CornerFrameText is a semantic, reusable UI component that displays a line of text wrapped in elegant corner-frame borders, consistent with the CornerFrameAnimatedButton style — but without any hover effects or background animations. Ideal for static headers, labels, or decorative inline elements.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Corner Frame Text to your project and fits it to your theme.

import CornerFrameText from '@/components/ui/corner-frame-text'

export default function DemoText() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <CornerFrameText text="HELLO WORLD" as="h1" className="text-xl" />
    </div>
  )
}