Getting Started

Installation

ParticleUI ships its own CLI — particleui-cli — so you don't need any other tool. One command installs source-owned UI directly into your project.

Note

The ParticleUI CLI auto-detects React, Vue, and Svelte projects. It writes components directly into your codebase — no runtime package, no wrapper, no version lock-in.

Setup steps

Install your first component

No setup required. Just run the CLI with the component name — it auto-detects your framework and writes the file directly into your project:

bash

npx particleui-cli add button

Expected result: src/components/ui/button.tsx is created in your app. See the Button docs.

Install multiple components at once:

bash

npx particleui-cli add glow-card tilt-card marquee

(Optional) Set up project config

The CLI auto-detects your framework and components directory. To lock in your preferences, run the interactive init:

bash

npx particleui-cli init

This creates a particleui.json in your project root with your framework, components directory, and optional Pro token path.

Use it like any other component

Import and use — the file is already in your project:

TSX

import { GlowButton } from "@/components/ui/glow-button"

export default function Page() {
  return <GlowButton variant="electric">Ship it</GlowButton>
}

Global install for daily use

Install once, use everywhere without npx:

npm install -g particleui-cli
particleui add glow-button tilt-card beam

Pro components

Pro components require an active license. After purchasing, copy your API token from the dashboard and set it in your environment:

.env

PARTICLEUI_TOKEN=pui_your_token_here

The CLI reads this automatically — no extra config needed:

bash

npx particleui-cli add particle-hero

The token is read at install time only — it is never bundled into your app. Add .env to .gitignore.

Vue & Svelte

The CLI auto-detects Vue and Svelte projects. You can also pass --framework:

bash

npx particleui-cli add button --framework vue
npx particleui-cli add button --framework svelte

Frameworks with available components (more ported weekly):

React85 components

Vue12 components

Svelte12 components

Introduction

components.json