BladewindUI is a collection of elegant Laravel blade-based UI components spiced with TailwindCSS and Javascript.
Overview
BladewindUI is a collection of UI components written using TailwindCSS, Laravel blade templates, and Vanilla Javascript. These components are designed to be simple to use and offer different levels of customization.
Features
- Alert: Display informative or error messages to users.
- Avatar: Show a profile picture or an icon representing a user.
- BellButton: A button with a bell icon for notifications.
- Card: Render a container with a title, content, and optional image.
- Centered Content: Center content within a container.
- Checkbox: Create a checkbox input element.
- Datepicker: Allow users to select a date from a calendar.
- Dropdown: Create a dropdown menu.
- Dropmenu: Show a pop-up menu when an element is clicked.
- Empty State: Display a friendly message when there is no content to show.
- Filepicker: Allow users to upload files.
- Horizontal Line Graph: Visualize data using a horizontal line graph.
- Icon: Render a SVG icon.
- Input: Create a text input field.
- List View: Show data in a list format.
- Modal: Create a pop-up modal window.
- Notification: Display a small notification message to users.
- Process Indicator: Indicate progress or steps in a process.
- Progress Bar: Show a visual representation of a progress.
- Radio Button: Create a radio button input element.
- Rating: Allow users to rate an item using stars or a numerical value.
- Select: Create a dropdown select input.
- Statistic: Display a number or a statistic.
- Spinner: Display a loading spinner.
- Tab: Create a tab interface to switch between content.
- Table: Show data in a table format.
- Tag: Display a small, contextual label.
- Textarea: Create a multi-line text input field.
- Timeline: Display a timeline of events.
- Toggle: Create an on/off toggle switch.
- Verification Code: Allow users to verify their identity.
Installation
To install BladewindUI in your Laravel project, follow these steps:
- Run the following command in the terminal at the root of your project:
composer require bladewind/bladewind-ui
- Publish the package assets by running the command below in the terminal at the root of your Laravel project:
php artisan vendor:publish --tag=bladewind
Include the BladewindUI CSS file in the <head> section of your pages. It is recommended to do this in the layouts file your app pages extend from.
Include the BladewindUI JavaScript file before the closing </body> tag of your pages. Again, it is recommended to do this in the layouts file your app’s pages extend from.
You are now ready to start using any of the BladewindUI components in your application.
Summary
BladewindUI is a collection of UI components designed for Laravel projects. It provides a wide range of customizable components that are easy to use. The installation process is straightforward, requiring the installation of the package, publishing the assets, and including the necessary CSS and JavaScript files. With BladewindUI, developers can quickly and efficiently create a visually appealing user interface for their Laravel applications.
