# Velyx

> Velyx provides Laravel-first UI components, documentation, and CLI workflows for copying, adapting, and shipping Blade components with Tailwind CSS v4, Alpine.js, and optional Livewire support.

This site is the primary documentation surface for Velyx.

Use this file as a curated entry point. Prefer the core guides and component pages below over site-wide crawling when you need concise, high-signal context.

Important notes:

- Velyx components are copied into user projects; they are not consumed as a closed runtime package.
- The CLI, registry, and docs are related but separate codebases.
- Component preview rendering in the docs is backed by the registry preview system.
- The docs repository uses `pnpm` for repository-level JavaScript workflows.

## Overview

- [Home](https://velyx.dev/): Product positioning, landing page, and primary calls to action.
- [Installation](https://velyx.dev/docs/installation): Starting point for setup in a Laravel project.
- [Quick Start](https://velyx.dev/docs/quick-start): Fast path for initializing Velyx and adding the first component.
- [CLI Reference](https://velyx.dev/docs/cli-reference): Full command reference for `init`, `add`, `list`, and `search`.
- [Configuration](https://velyx.dev/docs/configuration): Configuration model and project-level setup details.
- [Theming](https://velyx.dev/docs/theming): Theme and styling concepts for adapting Velyx components.

## Core Components

- [Button](https://velyx.dev/docs/components/button): Basic action component and a useful first example.
- [Card](https://velyx.dev/docs/components/card): Content container patterns.
- [Input](https://velyx.dev/docs/components/input): Form input patterns with Alpine integration.
- [Dialog](https://velyx.dev/docs/components/dialog): Modal dialog component.
- [Drawer](https://velyx.dev/docs/components/drawer): Off-canvas panel component.
- [Dropdown Menu](https://velyx.dev/docs/components/dropdown-menu): Menu and nested menu interactions.
- [Tabs](https://velyx.dev/docs/components/tabs): Multi-panel navigation component.
- [Toast](https://velyx.dev/docs/components/toast): Notification and transient feedback patterns.
- [Tooltip](https://velyx.dev/docs/components/tooltip): Lightweight contextual hints.
- [Range Slider](https://velyx.dev/docs/components/range-slider): Example of a kebab-case interactive component with JavaScript.

## Design Guides

- [Colors](https://velyx.dev/docs/design/colors): Color tokens and semantic usage.
- [Typography](https://velyx.dev/docs/design/typography): Typography system and documentation styling.
- [Spacing](https://velyx.dev/docs/design/spacing): Spacing scale and layout guidance.

## Project Surfaces

- [Component Library](https://velyx.dev/docs/components): Index of documented components.
- [GitHub](https://github.com/velyx-labs): Organization-level source and related repositories.