Built on 21st
Community

Dependencies

Tags

Split Line Path

Split Line Path

here is split line path component

Default preview
// 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 };

Dependencies

lodash@visx/curve@visx/shape@visx/gradient

Source

airbnb.io/visx/splitlinepath

Published

5/23/2025