Velyx

Introduction

Introduction

Velyx is a comprehensive collection of beautifully designed, accessible UI components built specifically for Laravel applications. Combining the power of Livewire, Alpine.js, and Tailwind CSS, Velyx enables you to create stunning user interfaces with minimal JavaScript and maximum developer experience.

Why Velyx?

🎨 Beautiful by Default

Every component is carefully crafted with modern design principles, consistent spacing, and thoughtful animations. Your application will look professional from day one.

⚡ Laravel-Native

Built with Livewire at its core, Velyx components live on the server side while providing a reactive, SPA-like experience. No complex frontend build pipelines required.

♿ Accessible

Accessibility is not an afterthought. All components follow WAI-ARIA guidelines and keyboard navigation best practices, ensuring your application is usable by everyone.

🎯 Fully Customizable

With Tailwind CSS v4 theming, you can easily customize colors, spacing, typography, and more to match your brand identity.

📱 Responsive

Every component is mobile-first and responsive, working seamlessly across all device sizes.

What's Included

Velyx includes 30+ production-ready components organized into categories:

  • Actions: Buttons with multiple variants and sizes
  • Forms: Inputs, labels, toggles, file uploads, and more
  • Navigation: Tabs, breadcrumbs, dropdowns
  • Data Display: Cards, tables, avatars, timelines
  • Feedback: Alerts, toasts, progress indicators
  • Overlay: Modals, drawers, popovers, tooltips
  • Disclosure: Accordions, tabs, dropdowns

Tech Stack

  • Laravel 12+: The PHP framework for web artisans
  • Livewire 4: Full-stack framework for dynamic interfaces
  • Alpine.js: Rugged and minimal JavaScript framework
  • Tailwind CSS 4: Utility-first CSS framework
  • Blade Components: Reusable view components

Browser Support

Velyx supports all modern evergreen browsers:

  • Chrome/Edge (last 2 versions)
  • Firefox (last 2 versions)
  • Safari (last 2 versions)
  • Mobile Safari iOS 12+
  • Chrome for Android

Next Steps

Ready to get started? Check out the Installation guide to set up Velyx in your project.