We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Zap Class

The zapClass feature enables you to customize the appearance and behavior of every component and element to suit your specific requirements. It seamlessly integrates with Tailwind CSS utility classes, and with the help of our dedicated Tailwind plugin, you can easily tailor any component to your liking.

How to Use

To get started, import the plugin from @zaplib/zapui. If you're using Tailwind CSS version 3 or earlier, make sure to include the library in your tailwind.config.js file.

tailwind.config.js

Tailwind v4

For Tailwind CSS version 4 or later, you can import the plugin @zaplib/zapui/tailwind/v4 directly into your global CSS file.

style.css

Important Note

To ensure zapClass works as intended, you will need to force utility classes by prefixing them with !.

However, this can lead to a lot of duplication when customizing advanced components. Here are some tips and tricks to streamline the process:

Option 1

You can add important: true to your tailwind.config.js file. Keep in mind that this will prioritize all Tailwind utility classes, not just those used with zapClass.

tailwind.config.js

Option 2

Another approach is to create a custom Tailwind component using the @layer directive provided by Tailwind. This allows for more organized and reusable customizations.

Tailwind v4

If you're using Tailwind v4 or later, you can create custom utilities using the @utility directive. This provides a more flexible way to define and apply custom styles.

Please check component documentation for specific zapClass variants.

Examples

Preview

Code

Preview

Code

Email