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 collection contains Chart Action Buttons with smooth hover effects, rounded edges, and built-in dark mode support. Each button features an SVG chart icon, making them ideal for data visualization dashboards and analytics panels.
Chart Button Types:
- Pie Chart Button – Used for displaying proportional data.
- Bar Chart Button – Great for comparing values side-by-side.
- Line Chart Button – Best for showing trends over time.
- Area Chart Button – Ideal for visualizing volume-based data.
- Radar Chart Button – Perfect for multi-variable comparison.
- Doughnut Chart Button – Like a pie chart but with a hollow center.
- Scatter Chart Button – Shows data distribution using dots.
- Bubble Chart Button – A variation of scatter charts with different sizes.
Features:
✅ Rounded Design – Clean, modern, and smooth UI.
✅ Dark Mode Ready – Works seamlessly on dark and light themes.
✅ Live Hover Effects – Engaging interaction for better UX.
✅ Optimized for Performance – Tailwind’s utility classes ensure efficiency.
These buttons are perfect for dashboards, analytics pages, finance apps, and admin panels. 🚀
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">
<!-- Pie Chart Button -->
<button class="flex items-center px-6 py-3 text-base font-semibold rounded-full bg-blue-600 text-white hover:bg-blue-700 transition duration-300">
<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="M11 3.055A9 9 0 1021 13h-9V3.055z"></path>
</svg>
Pie Chart
</button>
<!-- Bar Chart Button -->
<button class="flex items-center px-6 py-3 text-base font-semibold rounded-full bg-green-600 text-white hover:bg-green-700 transition duration-300">
<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="M4 20h16M4 16h4m-4-4h8m-8-4h12m-8-4h8"></path>
</svg>
Bar Chart
</button>
<!-- Line Chart Button -->
<button class="flex items-center px-6 py-3 text-base font-semibold rounded-full bg-purple-600 text-white hover:bg-purple-700 transition duration-300">
<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 17l6-6 4 4 8-8"></path>
</svg>
Line Chart
</button>
<!-- Area Chart Button -->
<button class="flex items-center px-6 py-3 text-base font-semibold rounded-full bg-red-600 text-white hover:bg-red-700 transition duration-300">
<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="M4 20V9l4 4 4-4 4 4 4-8v15z"></path>
</svg>
Area Chart
</button>
<!-- Radar Chart Button -->
<button class="flex items-center px-6 py-3 text-base font-semibold rounded-full bg-indigo-600 text-white hover:bg-indigo-700 transition duration-300">
<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="M12 2l5.196 9h-10.392L12 2zm0 0l3.09 11.517a2 2 0 11-6.18 0L12 2zm0 0v16m0-8h-4m4 0h4"></path>
</svg>
Radar Chart
</button>
<!-- Doughnut Chart Button -->
<button class="flex items-center px-6 py-3 text-base font-semibold rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
<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="M21 12.79A9 9 0 1112.21 3H12a9 9 0 109 9v-.21z"></path>
</svg>
Doughnut Chart
</button>
<!-- Scatter Chart Button -->
<button class="flex items-center px-6 py-3 text-base font-semibold rounded-full bg-gray-800 text-white hover:bg-gray-900 transition duration-300">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="7" cy="7" r="2"></circle>
<circle cx="17" cy="7" r="2"></circle>
<circle cx="7" cy="17" r="2"></circle>
<circle cx="17" cy="17" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
</svg>
Scatter Chart
</button>
<!-- Bubble Chart Button -->
<button class="flex items-center px-6 py-3 text-base font-semibold rounded-full bg-teal-500 text-white hover:bg-teal-600 transition duration-300">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="5" cy="5" r="3"></circle>
<circle cx="12" cy="12" r="5"></circle>
<circle cx="19" cy="5" r="3"></circle>
</svg>
Bubble Chart
</button>
</div>
Live demonstration of the selected component. Interact with it to see behaviors.
This collection features fully rounded buttons that provide a modern, soft look while ensuring a clean UI. Designed with Tailwind CSS, these buttons are fully responsive, support dark mode, and come with smooth animations.
Button Variants & Sizes:
- Extra Small Rounded Button – Minimal UI actions.
- Small Rounded Button – Compact but clear interactions.
- Medium Rounded Button – Standard button for most actions.
- Large Rounded Button – For bigger call-to-action buttons.
- Extra Large Rounded Button – Perfect for high-visibility interactions.
- Full Width Rounded Button – Best for mobile or form submissions.
- Floating Rounded Button – Appears lifted with subtle shadows.
- Circular Small Icon Button – Compact round button for small icons.
- Circular Medium Icon Button – Medium-sized version for easy visibility.
- Circular Large Icon Button – Large icon button for more impact.
- Small Loading Rounded Button – Indicates processing with an animation.
- Large Loading Rounded Button – A larger version for a stronger effect.
Features:
✅ Different Sizes – Works for any layout.
✅ Dark Mode Support – Compatible with dark UI themes.
✅ Smooth Animations – Clean hover and transition effects.
✅ Performance Optimized – Lightweight with Tailwind utility classes.
These buttons are ideal for modern web apps, mobile interfaces, dashboards, and e-commerce sites! 🚀
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">
<!-- Extra Small Rounded Button -->
<button class="px-3 py-1 text-xs font-semibold rounded-full bg-blue-600 text-white hover:bg-blue-700 transition duration-300">
XS Rounded
</button>
<!-- Small Rounded Button -->
<button class="px-4 py-2 text-sm font-semibold rounded-full bg-green-600 text-white hover:bg-green-700 transition duration-300">
Small Rounded
</button>
<!-- Medium Rounded Button -->
<button class="px-6 py-3 text-base font-semibold rounded-full bg-purple-600 text-white hover:bg-purple-700 transition duration-300">
Medium Rounded
</button>
<!-- Large Rounded Button -->
<button class="px-8 py-4 text-lg font-semibold rounded-full bg-red-600 text-white hover:bg-red-700 transition duration-300">
Large Rounded
</button>
<!-- Extra Large Rounded Button -->
<button class="px-10 py-5 text-xl font-semibold rounded-full bg-indigo-600 text-white hover:bg-indigo-700 transition duration-300">
XL Rounded
</button>
<!-- Full Width Rounded Button -->
<button class="w-full py-4 text-lg font-semibold rounded-full bg-gray-800 text-white hover:bg-gray-900 transition duration-300">
Full Width Rounded
</button>
<!-- Floating Rounded Button -->
<button class="px-10 py-5 text-xl font-semibold rounded-full bg-yellow-500 text-white shadow-lg hover:shadow-xl transition-all duration-300">
Floating XL
</button>
<!-- Circular Small Icon Button -->
<button class="p-2 rounded-full bg-gray-800 text-white hover:bg-gray-700 transition duration-300">
<svg class="w-4 h-4" 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>
<!-- Circular Medium Icon Button -->
<button class="p-3 rounded-full bg-gray-800 text-white hover:bg-gray-700 transition duration-300">
<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>
<!-- Circular Large Icon Button -->
<button class="p-5 rounded-full bg-gray-800 text-white hover:bg-gray-700 transition duration-300">
<svg class="w-8 h-8" 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>
<!-- Small Loading Rounded Button -->
<button class="flex items-center px-4 py-2 text-sm font-semibold rounded-full bg-blue-600 text-white hover:bg-blue-700 transition duration-300">
<svg class="w-4 h-4 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>
<!-- Large Loading Rounded Button -->
<button class="flex items-center px-8 py-4 text-lg font-semibold rounded-full bg-blue-600 text-white hover:bg-blue-700 transition duration-300">
<svg class="w-6 h-6 mr-3 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>
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
