PHPackages                             destech-hasar-cozumleri-a-s/larabite - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. destech-hasar-cozumleri-a-s/larabite

ActiveLibrary[Templating & Views](/categories/templating)

destech-hasar-cozumleri-a-s/larabite
====================================

Complete Flowbite component library for Laravel with Blade components, Tailwind CSS, Alpine.js, and Livewire support

v1.0.4(5mo ago)0357↓33.3%MITBladePHP ^8.1|^8.2|^8.3

Since Nov 21Pushed 5mo agoCompare

[ Source](https://github.com/Destech-Hasar-Cozumleri-A-S/larabite)[ Packagist](https://packagist.org/packages/destech-hasar-cozumleri-a-s/larabite)[ RSS](/packages/destech-hasar-cozumleri-a-s-larabite/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (4)Versions (4)Used By (0)

Flowbite Laravel Components
===========================

[](#flowbite-laravel-components)

[![Flowbite Laravel](https://camo.githubusercontent.com/379482a28cabcbe45e2503da6962d9abbe74e0e863216c429fce5d609c04303c/68747470733a2f2f666c6f77626974652e636f6d2f646f63732f696d616765732f6c6f676f2e737667)](https://camo.githubusercontent.com/379482a28cabcbe45e2503da6962d9abbe74e0e863216c429fce5d609c04303c/68747470733a2f2f666c6f77626974652e636f6d2f646f63732f696d616765732f6c6f676f2e737667)

[![Latest Stable Version](https://camo.githubusercontent.com/ccd8add94f1f8aca01c8a9aa02a98bf83f773ddb6bfaad4bf84848b5d2292a63/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f646573746563682d68617361722d636f7a756d6c6572692d612d732f6c61726162697465)](https://packagist.org/packages/destech-hasar-cozumleri-a-s/larabite)[![Total Downloads](https://camo.githubusercontent.com/2d12948c71a3fdea99effd06749b0032ff32b2063234b15b973c37bbeb3d17ca/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f646573746563682d68617361722d636f7a756d6c6572692d612d732f6c61726162697465)](https://packagist.org/packages/destech-hasar-cozumleri-a-s/larabite)[![License](https://camo.githubusercontent.com/e5a46081ca46c498e258c02a64024109a13fac172a24f3311f8671c91487b5c8/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f646573746563682d68617361722d636f7a756d6c6572692d612d732f6c61726162697465)](https://packagist.org/packages/destech-hasar-cozumleri-a-s/larabite)

About
-----

[](#about)

Flowbite Laravel Components is a complete Laravel package containing **60+ pre-built UI components**. Following the Flowbite design system, it provides seamless integration with Tailwind CSS, Alpine.js, and Livewire.

### ✨ Features

[](#-features)

- ✅ **60+ Ready Components** - Typography, UI, Form components
- ✅ **Flowbite Design System** - Professional and consistent design
- ✅ **Tailwind CSS** - Utility-first CSS framework
- ✅ **Alpine.js Integration** - Reactive components
- ✅ **Livewire Support** - Full-stack Laravel experience
- ✅ **Dark Mode** - Complete dark mode support
- ✅ **Responsive** - Mobile-first design
- ✅ **Accessible** - WCAG 2.1 AA compliant
- ✅ **Comprehensive Documentation** - Detailed usage guide

Installation
------------

[](#installation)

Install the package via Composer:

```
composer require destech-hasar-cozumleri-a-s/larabite
```

The service provider will be automatically discovered (Laravel 5.5+).

### Publish Configuration File

[](#publish-configuration-file)

```
php artisan vendor:publish --tag=flowbite-config
```

### Publish Components (For Customization)

[](#publish-components-for-customization)

```
# Publish all components
php artisan vendor:publish --tag=flowbite-components

# Publish only views
php artisan vendor:publish --tag=flowbite-views

# Publish documentation
php artisan vendor:publish --tag=flowbite-docs

# Publish everything
php artisan vendor:publish --tag=flowbite-all
```

Quick Start
-----------

[](#quick-start)

### 1. Tailwind CSS Setup

[](#1-tailwind-css-setup)

Add package paths to your `tailwind.config.js`:

```
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './vendor/destech-hasar-cozumleri-a-s/larabite/resources/**/*.blade.php',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}
```

### 2. Alpine.js Setup

[](#2-alpinejs-setup)

```
npm install alpinejs
```

In `resources/js/app.js`:

```
import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()
```

### 3. Use Your First Component

[](#3-use-your-first-component)

```

    Click Me

        Card Title

        Card content goes here.

    Operation completed successfully!

```

Component Categories
--------------------

[](#component-categories)

### ✍️ Typography Components (8)

[](#️-typography-components-8)

Text-based components:

```
Heading
Paragraph text
Lead text
Quote
List
Link

```

[📖 Typography Documentation](docs/components/typography/)

### 🎨 UI Components (38)

[](#-ui-components-38)

General interface components:

```
{{-- Basic Components --}}
Button
Badge
Card
Alert

{{-- Navigation --}}

{{-- Notifications --}}
Success!
Icon

{{-- Media --}}

{{-- Data Display --}}

```

[📖 UI Components Documentation](docs/components/ui/)

### 📝 Form Components (14)

[](#-form-components-14)

Form elements with validation support:

```

```

[📖 Form Components Documentation](docs/components/forms/)

Livewire Integration
--------------------

[](#livewire-integration)

All components work seamlessly with Livewire:

```