Split Line Path

Component 4

About

here is split line path component

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

Code

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

Usage.tsx

// src/DemoOne.tsx (or your specific demo file name and location)

import React from 'react';
import { Component } from '@/components/ui/split-line-path';
import { cn } from "@/lib/utils";
const DemoOne = () => {
  return (
    <div className={cn("flex w-full min-h-screen justify-center items-center p-4 bg-gray-800")}>
      <div className="bg-gray-900 p-1 rounded-lg shadow-xl">
        <h1 className="text-center text-white text-xl font-semibold my-2">SplitLinePath Demo</h1>
        <Component 
          width={800}
          height={700}
          numberOfWaves={7}
          pointsPerWave={70}
        />
      </div>
    </div>
  );
};

export { DemoOne };