Split Text

Buttons 69

About

Here is Split Text component

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

Code

How Split Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { TextSplit } from "@/components/ui/split-text";
const TextSplitPreview = () => {
  return (
    <TextSplit
      className="text-9xl font-semibold uppercase"
      topClassName="text-red-500"
      bottomClassName="text-zinc-950 dark:text-zinc-50"
    >
      Berlix UI
    </TextSplit>
  );
};

export default TextSplitPreview;