Getting Started

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.

Installing Tailwind CSS

There are various ways to install Tailwind CSS. Please refer to Tailwind's documentation to find the best installation method for your project.

Installing Alpine JS

The easiest way to add Alpine JS to your project is to include it with a tag in the head of your HTML page:

    <script defer src=""></script>

Check Alpine's documentation to learn more about this awesome framework.

Additional Plugins

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.

Theme Settings
Primary Color (Light Mode)
more color options
Border Radius

🍪 Got Cookies!

We use cookies to ensure that we give you the best experience on our website. For more information, please read our Privacy Policy .