Verdant UI

Component Library Demo

Interactive Demo

About Verdant UI

A comprehensive UI component library built with Tailwind CSS and Alpine.js for Laravel applications.

Buttons

Various button styles and states for different actions and contexts.

Button Variants

Button Groups

Form Components

Input fields, selects, checkboxes and other form elements with consistent styling.

Form Actions

Calendar

Interactive calendar component for date selection and scheduling.

July 2026

Mon
Tue
Wed
Thu
Fri
Sat
Sun
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2

Timeslot Selector

Calendar-based timeslot selection with available time slots per day.

Mon
Tue
Wed
Thu
Fri
Sat
Sun
Selected Timeslot:

Modals

Dialog windows for user interactions, confirmations, and content display.

Standard Modal

Confirmation Modal

Tables

Data tables with sorting, filtering, and responsive design.

Name Email Role
John Doe john@example.com Admin
Jane Smith jane@example.com User
Bob Johnson bob@example.com Editor

Dynamic Tables

Configurable data grids with sortable columns, toggleable column visibility, and a tile/table view switcher.

Role
Status
Actions
John Doe
john@example.com
Admin
Active
Jane Smith
jane@example.com
User
Active
Bob Johnson
bob@example.com
Editor
Inactive
John Doe john@example.com
Role Admin
Status Active
Jane Smith jane@example.com
Role User
Status Active
Bob Johnson bob@example.com
Role Editor
Status Inactive

Utilities

Helper components for tooltips, identifiers, and search functionality.

Identifier

VU-2024-001

Tooltip

This is a helpful tooltip message

Search Filter

Table Filter