Beautiful Laravel Blade Components With Tailwind CSS
A curated collection of ready-to-use Blade components with Tailwind CSS. Copy, paste, and ship faster!
Live demonstration of the selected component. Interact with it to see behaviors.
This is a modern, responsive, and minimalistic button collection featuring SVG icons for better UI/UX. Each button has smooth hover effects, focus states, and supports dark mode.
Button Variants:
- Button with Left Icon – Great for navigation actions.
- Button with Right Icon – Suitable for form submissions.
- Icon Only Button – A compact and minimal button with just an icon.
- Google Login Button – A high-quality Google login button with a clean SVG logo.
- Add to Cart Button – Perfect for e-commerce sites.
- Loading Button – Includes an animated spinning icon to indicate a loading state.
Features:
✅ Dark Mode Support – Adapts to light and dark themes.
✅ High-Quality SVG Icons – Crisp, scalable icons for clarity.
✅ Fully Responsive – Works on all screen sizes.
✅ Hover & Focus Effects – Enhances interactivity.
This button collection is ideal for authentication flows, e-commerce platforms, dashboards, and modern web apps. 🚀
Discount | Hostinger
Premium Hosting & Domain Deals
Free SSL 99.9% Uptime 24/7 Support
<div class="flex flex-wrap gap-4 p-6 bg-gray-100 dark:bg-gray-900">
<!-- Button with Left Icon -->
<button class="flex items-center px-6 py-3 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
Next
</button>
<!-- Button with Right Icon -->
<button class="flex items-center px-6 py-3 text-sm font-semibold rounded-lg bg-green-600 text-white hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500">
Submit
<svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
<!-- Icon Only Button -->
<button class="p-3 rounded-lg bg-gray-800 text-white hover:bg-gray-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-600">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
</svg>
</button>
<!-- Google Login Button -->
<button class="flex items-center px-6 py-3 text-sm font-semibold rounded-lg bg-white border border-gray-300 text-gray-700 hover:bg-gray-100 transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700">
<img src="https://www.svgrepo.com/show/475656/google-color.svg" class="w-5 h-5 mr-3" alt="Google Logo">
Continue with Google
</button>
<!-- Add to Cart Button -->
<button class="flex items-center px-6 py-3 text-sm font-semibold rounded-lg bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300 focus:outline-none focus:ring-2 focus:ring-yellow-400">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l3.6 7.59m10.74 1.41H7.9m9.14 0a2 2 0 1 1 0 4m-9.14-4a2 2 0 1 1 0 4m9.14-4L21 6H7.2"></path>
</svg>
Add to Cart
</button>
<!-- Loading Button -->
<button class="flex items-center px-6 py-3 text-sm font-semibold rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<svg class="w-5 h-5 mr-2 animate-spin" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 2v4m0 12v4m8-8h4M2 12h4m13.656-7.656l2.828 2.828M4.344 4.344l2.828 2.828m13.656 13.656l-2.828-2.828M4.344 19.656l2.828-2.828"></path>
</svg>
Loading...
</button>
</div>
Live demonstration of the selected component. Interact with it to see behaviors.
This is a collection of stylish and versatile buttons using Tailwind CSS. The buttons include various styles suitable for different UI needs.
Button Variants
- Solid Button – A classic filled button with bold colors.
- Outline Button – A minimal button with a border and hover effect.
- Ghost Button – A subtle, text-based button with a light hover background.
- Icon Button – A button with an icon for actions like "Next" or "Submit."
- Soft Button – A light-colored button with a soft background.
- Pill Button – A rounded, modern button with smooth edges.
- Elevated Button – A button with a shadow effect for depth.
- Disabled Button – A grayed-out button indicating a non-clickable state.
- Floating Button – A round button positioned at the bottom right for quick actions.
Features:
✅ Dark Mode Support – Colors adjust based on the theme.
✅ Smooth Hover Effects – Interactive UI elements.
✅ Rounded & Sharp Edges – Different styles to match various designs.
✅ Fully Responsive – Buttons work across all screen sizes.
This button set can be used in dashboards, forms, modals, or interactive elements on a website.
Discount | Hostinger
Premium Hosting & Domain Deals
Free SSL 99.9% Uptime 24/7 Support
<div class="flex flex-wrap gap-4 p-6 bg-gray-100 dark:bg-gray-900">
<!-- Solid Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
Solid Button
</button>
<!-- Outline Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
Outline Button
</button>
<!-- Ghost Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg text-blue-600 hover:bg-blue-100 dark:hover:bg-gray-800 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
Ghost Button
</button>
<!-- Icon Button -->
<button class="flex items-center px-5 py-3 text-sm font-semibold rounded-lg bg-purple-600 text-white hover:bg-purple-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
Icon Button
</button>
<!-- Soft Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-blue-100 text-blue-600 hover:bg-blue-200 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
Soft Button
</button>
<!-- Pill Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-full bg-green-600 text-white hover:bg-green-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-green-500">
Pill Button
</button>
<!-- Elevated Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-gray-800 text-white shadow-md hover:shadow-lg transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-600">
Elevated Button
</button>
<!-- Disabled Button -->
<button class="px-6 py-3 text-sm font-semibold rounded-lg bg-gray-400 text-white cursor-not-allowed opacity-50">
Disabled Button
</button>
<!-- Floating Button -->
<button class="fixed bottom-6 right-6 p-4 bg-pink-600 text-white rounded-full shadow-lg hover:bg-pink-700 transition duration-300 focus:outline-none focus:ring-2 focus:ring-pink-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
</svg>
</button>
</div>
Getting Started
Learn how to quickly implement these components in your Laravel application with our step-by-step guide.
Documentation
Explore our comprehensive docs to learn about customization options and advanced usage.
Component Usage Guide
1. Browse Components
Our library is organized into logical categories to help you find what you need:
- Navigation: Menus, navbars, pagination
- Forms: Inputs, selects, validation components
- Data Display: Cards, tables, lists
- Feedback: Alerts, modals, loaders
Use the category filter or search functionality to locate specific components.
2. Component Selection
Each component page includes:
- Live Preview: See the component in action
- Variants: Different style options available
- Props/Parameters: Customization options
- Accessibility Notes: ARIA attributes and keyboard navigation
Pro Tip: Click the "Expand Code" button to see implementation details and required dependencies.
3. Implementation
To use a component in your Laravel application:
- Click the "Get this component" button
- Paste into your Blade template file (.blade.php)
- Ensure required CSS/JS dependencies are loaded
- Customize using the available props/tailwind classes
Troubleshooting
- Component not rendering? Check that you've registered the component class in your Laravel service provider
- Styles missing? Verify Tailwind CSS is properly configured in your project
Get the Best Hosting, Domain & VPS on Hostinger!
Premium Hosting
Start from $1.99/month
Domain Registration
.com start from $8.99
Cloud VPS
High performance
Free SSL
With every plan
