shadcn-blade / ui

dev-main 2026-01-02 10:46 UTC

Requires

• php: ^8.4
• illuminate/contracts: ^11.0||^12.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• larastan/larastan: ^3.0
• laravel/pint: ^1.14
• nunomaduro/collision: ^8.8
• orchestra/testbench: ^10.0.0||^9.0.0
• pestphp/pest: ^4.0
• pestphp/pest-plugin-arch: ^4.0
• pestphp/pest-plugin-laravel: ^4.0
• phpstan/extension-installer: ^1.4
• phpstan/phpstan-deprecation-rules: ^2.0
• phpstan/phpstan-phpunit: ^2.0
• spatie/laravel-ray: ^1.35

MIT

• ihxnnxs

• laravel
• shadcn
• shadcn-blade

Published on Packagist.org on 2026-02-02 10:56 UTC

README

A Laravel Blade port of shadcn/ui. Beautiful, accessible, and customizable components built with Laravel Blade and Tailwind CSS.

About

shadcn-blade/ui brings the popular shadcn/ui component library to Laravel Blade. This is not a component library in the traditional sense - you don't install it as a dependency. Instead, you pick the components you need and add them directly to your project.

The components are:

• Built with Laravel Blade and Tailwind CSS
• Fully customizable and accessible
• Styled with a consistent design system
• Easy to integrate into any Laravel project

Installation

Install the package via composer:

composer require shadcn-blade/ui

Initialize shadcn-blade in your project:

php artisan shadcn:init

This will:

• Create a components.json configuration file
• Set up Tailwind v4 with theme variables
• Allow you to choose a base color scheme (neutral, zinc, slate, stone, gray)
• Create the component directory structure

Usage

Add components to your project:

# Add individual components
php artisan shadcn:add button
php artisan shadcn:add input

# Components are copied to resources/views/components/ui/
# You own the code and can customize freely

Use components in your Blade views:

<x-ui.button variant="default">Click me</x-ui.button>
<x-ui.input type="email" placeholder="Email" />
<x-ui.badge variant="destructive">New</x-ui.badge>

Color Schemes

Choose from 5 base color schemes during initialization:

• neutral - Pure grayscale
• zinc - Neutral with minimal saturation
• slate - Cool blue-gray tones
• stone - Warm gray with brown undertones
• gray - Balanced neutral gray

To change the color scheme later:

php artisan shadcn:init --force

Components

Legend:

• ✅ Complete & Available
• 🚧 In Progress
• ⏳ Planned

Component Status

Component	Status
Accordion	⏳
Alert Dialog	⏳
Alert	✅
Aspect Ratio	✅
Avatar	✅
Badge	✅
Breadcrumb	✅
Button	✅
Button Group	⏳
Calendar	⏳
Card	⏳
Carousel	⏳
Chart	⏳
Checkbox	✅
Collapsible	⏳
Combobox	⏳
Command	⏳
Context Menu	⏳
Data Table	⏳
Date Picker	⏳
Dialog	⏳
Drawer	⏳
Dropdown Menu	⏳
Empty	⏳
Field	⏳
Form	⏳
Hover Card	⏳
Input	✅
Input Group	⏳
Input OTP	⏳
Item	⏳
Kbd	⏳
Label	✅
Menubar	⏳
Native Select	⏳
Navigation Menu	⏳
Pagination	⏳
Popover	⏳
Progress	✅
Radio Group	✅
Resizable	⏳
Scroll Area	⏳
Select	⏳
Separator	✅
Sheet	⏳
Sidebar	⏳
Skeleton	✅
Slider	⏳
Sonner	⏳
Spinner	⏳
Switch	✅
Table	⏳
Tabs	⏳
Textarea	✅
Toast	⏳
Toggle	✅
Toggle Group	⏳
Tooltip	⏳
Typography	⏳

Total: 58 components (16 complete, 42 planned)

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• ihxnnxs
• Inspired by shadcn/ui

License

The MIT License (MIT). Please see License File for more information.