Getting Started

Installation

Get Velyx working in your Laravel project in under 2 minutes.

Requirements

Velyx is built for modern Laravel projects using:

Laravel 10+ — Livewire components work on Laravel 10 and above.
Blade — Velyx components are Blade templates, not abstractions.
Tailwind CSS v4 — Components use Tailwind utilities. v3 requires config adjustments.
Alpine.js 3+ — For interactive components (optional; use Livewire for more complex state).

Run the init command from your Laravel project root.

npx velyx@latest init

pnpm dlx velyx@latest init

yarn dlx velyx@latest init

bunx --bun velyx@latest init

For a non-interactive setup with defaults:

npx velyx@latest init --defaults

pnpm dlx velyx@latest init --defaults

yarn dlx velyx@latest init --defaults

bunx --bun velyx@latest init --defaults

The init command creates a velyx.json file with sensible defaults. You can customize paths, styles, or component names later.

Use the CLI to copy a component into your app.

npx velyx@latest add button

pnpm dlx velyx@latest add button

yarn dlx velyx@latest add button

bunx --bun velyx@latest add button

The button component (and any dependencies) are now copied to your resources/views/components/ui/ directory. No packages, just code you own.

Import and use your component in any Blade template.

<x-ui.button>Click me</x-ui.button>

<x-ui.button variant="outline" size="lg">
  Large outline button
</x-ui.button>

Now that Velyx is set up, explore the component library, learn about theming, or dive into the CLI reference.