About Plugins | Preline UI, crafted with Tailwind CSS

Overview

Often the biggest challenge when working with a framework is figuring out what you're supposed to do when there's something you need that the framework doesn't handle for you.

Preline plugins have been designed from the ground up to be extensible and customizable, so that no matter what you're building you never feel like you're fighting the framework.

Here is an example of what our library markup might look like

                        
                          <div class="hs-dropdown">
                            <button type="button" class="hs-dropdown-toggle">
                              <!-- ... -->
                            </button>

                            <div class="hs-dropdown-menu">
                              <!-- ... -->
                            </div>
                          </div>

How it works

Every utility class can be applied conditionally to classes in our plugins, making it easy to create complex interfaces without ever leaving your HTML.

To add a utility to active or opening classes, all you need to do is prefix the utility with the : character:

                        
                          <div class="hs-dropdown-open:opacity-100 opacity-0">
                            <!-- ... -->
                          </div>

This works for every utility class in the framework, which means you can build any design solution — you can even control things like letter spacing or cursor styles.

Here's an example of a dropdown component:

Here's how the example above works:

hs-dropdown-toggle triggers the dropdown.
By default hs-dropdown-open has no styles and we use opacity-0 to hide the dropdown before it's triggered, but by adding hs-dropdown-open:opacity-100 utility we turn the opacity up to 100%.
We also use rotate-180 to rotate the arrow 180deg when it's active.

                        
                          <div class="hs-dropdown relative inline-flex">
                            <button id="hs-dropdown-how-it-works" type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
                              Actions
                              <svg class="hs-dropdown-open:rotate-180 size-2.5 text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                              </svg>
                            </button>

                            <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-72 hidden z-10 transition-[margin,opacity] opacity-0 duration-300 mt-2 min-w-60 bg-white shadow-md rounded-lg p-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-700" aria-labelledby="hs-dropdown-how-it-works">
                              <!-- ... -->
                            </div>
                          </div>

Dark mode

They even go along with the framework's dark mode class.

Accessibility Friendly

Command the interface at your fingertips with accessibility. Go to any page, focuses first item that matches keyboard input, and more so everyone can use it.

                        
                          <div class="hs-dropdown-menu">
                            <a class="focus:ring-2 focus:ring-blue-500" href="newsletter.html">
                              Newsletter
                            </a>
                          </div>