Skip to Content
DocumentationGet Started

Get Started

Overview

This component library is specifically designed for modern web applications built with Laravel, Inertia.js, React, and ShadCN UI. Our components are built on top of ShadCN’s design system and provide battle-tested solutions for common UI patterns in full-stack applications.

Technology Stack

Our components are optimized for the following technology stack:

  • Laravel  - PHP web application framework
  • Inertia.js  - Modern monolithic applications
  • React  - JavaScript library for building user interfaces
  • ShadCN UI  - Re-usable components built with Radix UI and Tailwind CSS

Installation

Creating an Application Using Laravel Starter Kit

To create a new Laravel application with Inertia.js, React, and ShadCN UI, you should first install PHP and the Laravel CLI tool. If you already have PHP and Composer installed, you may install the Laravel installer CLI tool via Composer:

composer global require laravel/installer

Then, create a new Laravel application using the Laravel installer CLI. The Laravel installer will prompt you to select your preferred starter kit:

laravel new my-app

Pick React from the options - This will automatically install Inertia.js, React, and ShadCN UI for you.

After creating your Laravel application, you only need to install its frontend dependencies via NPM and start the Laravel development server:

cd my-app
npm install && npm run build
composer run dev

Once you have started the Laravel development server, your application will be accessible in your web browser at http://localhost:8000 .

Installing Components

Once your Laravel + Inertia + React + ShadCN application is running, you can install our components directly from our registry:

npx shadcn@latest add https://codecng.com/r/[component].json

Replace [component] with the component name you want to install (e.g., form-input, form-date-picker, combobox).

Features

Laravel + Inertia Integration

  • Automatic form validation error handling
  • CSRF token management
  • Flash message integration
  • Server-side validation display
  • File upload handling

ShadCN UI Foundation

  • You own the code - All components are copied to your project, not installed as dependencies
  • Fully customizable - Modify components to match your design system and requirements
  • Uses your existing ShadCN components - Integrates with your own input, button, and other base components
  • Consistent with your styles - Automatically inherits your theme, colors, and design tokens
  • No vendor lock-in - Complete control over styling and functionality

React Best Practices

  • TypeScript support
  • Hook-based architecture
  • Performance optimized
  • Component composition
  • Reusable patterns

Next Steps

  1. Explore Components - Check out our Components section
  2. Learn Patterns - Read our Best Practices guide
  3. Customize Theme - Follow our Theming Guide
  4. View Examples - See Real-world Examples

Support

Resources

Last updated on
Form