Installation

Get started with Plexus UI components in your React project.

Prerequisites

  • React 18 or higher
  • A modern browser with WebGPU support (Chrome 113+, Edge 113+)
  • Node.js 18 or higher

Quick Start

Initialize Plexus UI in your project with a single command:

npx @plexusui/cli init

This will set up the necessary configuration and directory structure for Plexus UI components.

Adding Components

Add individual components to your project:

npx @plexusui/cli add [component-name]

For example, to add the GPU-accelerated line chart:

npx @plexusui/cli add gpu-line-chart

Available Components

View all available components:

npx @plexusui/cli list

Filter by category:

npx @plexusui/cli list --category charts

Categories: 3d, charts, orbital, primitives

Check for Updates

See if a component has been updated:

npx @plexusui/cli diff [component-name]

Usage Example

Once installed, import and use components in your React application:

import { GPULineChart } from "@/components/plexus/gpu-line-chart";

export function TelemetryDashboard() {
  const [data, setData] = useState<number[]>([]);

  return (
    <GPULineChart
      data={data}
      width={800}
      height={400}
      lineColor="#22c55e"
    />
  );
}

Resources