To use Penguin UI, you simply copy and paste the code
from our website; therefore, Penguin UI doesn’t require
any installation or npm package. However, it has two
main prerequisites:
Tailwind CSS:
the latest version of Tailwind CSS (Currently
V3.4
) is required for all of the Penguin UI components.
Alpine JS:
Some interactive components require the latest version
of Alpine JS (currently
V3
) to function properly.
There are various ways to install Tailwind CSS. Please refer to Tailwind's documentation to find the best installation method for your project.
The easiest way to add Alpine JS to your project is to include it with a tag in the head of your HTML page:
<head>
...
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
Check Alpine's documentation to learn more about this awesome framework.
Some components might require additional plugins such as Alpine's focus or collapse. If a component needs such plugins, we'll let you know by adding them next to its title. Here is a list of Alpine plugins used in Penguin UI:
Mask Plugin: Alpine's Mask plugin allows you to automatically format a text input field as a user types.
Focus Plugin: Alpine's Focus plugin allows you to manage focus on a page.
Collapse Plugin: Alpine's Collapse plugin allows you to expand and collapse elements using smooth animations.