Installation

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:

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

Adding Components

Add individual components to your project:

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

Available Components

View all available components:

Filter by category:

Categories: charts, instruments, 3d, data-display, timeline, interactive

Check for Updates

See if a component has been updated:

Usage Example

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

import { LineChart } from "@plexusui/components/charts/line-chart";

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

  return (
    <LineChart.Root
      series={[{ name: "Signal", data, color: "#22c55e" }]}
      width={800}
      height={400}
      preferWebGPU
    >
      <LineChart.Canvas showGrid />
      <LineChart.Axes />
      <LineChart.Tooltip />
    </LineChart.Root>
  );
}