Blog

We’ve just released a new minor version of Zinq: 0.10.3. This update improves asset hashing, ensuring better browser caching and fixing potential issues with Livewire.

What Changed?

Previously, asset hashes were generated using the uniqid function on every page reload. This meant that browsers never cached assets properly, leading to unnecessary downloads and potential performance issues. More importantly, this behavior could cause unexpected page reloads in Livewire applications. When Livewire detects new styles, it triggers a full-page reload - even when using wire:navigate links.

With this update, asset hashes are now read from the latest build instead of being dynamically generated. This ensures consistent asset URLs between reloads, allowing browsers to cache assets properly and improving overall performance.

Why this matters

• Better Caching - browsers will now cache assets correctly, reducing unnecessary requests and improving load times
• Stable Livewire Behavior - prevents unintended page reloads when using Livewire’s wire:navigate
• Improved Performance - fewer redundant asset fetches mean a smoother experience for users

If you’re using Zinq, updating to 0.10.3 is highly recommended to take advantage of these improvements.

Happy coding! 🚀

We have an exciting update for you! Starting today, a selection of Zinq components is completely free. We’ve adjusted our pricing model to ensure that only the components we’ve spent hundreds of hours perfecting remain part of the paid Zinq version. This means you can now experience the benefits of Zinq without needing a license.

We believe this change will help more Laravel developers integrate Zinq into their projects and see firsthand how much easier UI development can be. Whether you’re just getting started with Zinq or have been using it for a while, we hope this update makes your workflow even smoother!

What’s Next for Zinq?

Zinq will continue to grow and improve, both in the free and paid versions. Here’s what we’re working on:

Tailwind-First Components

We are redesigning our core components to use Tailwind utility classes instead of generic CSS classes. This will remove the need for an extra CSS file and make it easier to integrate Zinq into projects where you already use Tailwind. Since Zinq has dozens of components, this is a big task - but we know it will make Zinq more flexible for all developers.

More Powerful Premium Features

For Zinq License users, we have exciting plans, including an enhanced Table Builder, Chart Builders, and new chart components to help you create dynamic, data-driven UIs.

We’re making these changes because we see how developers use Zinq in different ways. Until now, most of you used Zinq from start to finish, without needing extra styling. But with more free components available, we expect Zinq to be used in a wider range of projects - so we want to make sure it works the best way possible for everyone!

If you’ve built something awesome with Zinq, we’d love to see it! Share your projects with us.

Happy coding! 🚀

Zinq Now Supports Tailwind CSS 4!

We are happy to announce that Zinq has been updated to fully support Tailwind CSS 4! All components, builders, and layouts have been upgraded to work with the latest version of Tailwind.

With Zinq’s approach of bundling precompiled Tailwind styles directly into its CSS files, users can enjoy the benefits of Tailwind 4 without needing to manually reconfigure their projects. This ensures a smooth transition and allows you to leverage the power of Tailwind 4 features right out of the box.

Upgrading

For existing users, updating to Tailwind CSS 4 in Zinq is straightforward. You don’t need to make any manual changes to your Tailwind configuration or CSS files. Simply upgrade Zinq package as asual via composer composer update mattb-it/zinq

Other improvements

• We have slightly modified the default text color in light mode. It now uses zinq-text-600 instead of #212529 , ensuring a better user experience.
• Links are now displayed using text-zinc-900 with a small bold style. This ensures better contrast, making it easier for users to spot links within the text.

Happy coding!

We're excited to introduce our latest addition to Zinq - a powerful Livewire WYSIWYG Editor component. It's a robust rich text editor that you can drop into your project with minimal setup. Whether you're building a CMS, blog platform, or any content-heavy app, this editor has got you covered.

View Editor Component →

Livewire Editor Features:

• built-in formatting tools for text editing
• customizable and extensible with additional tools
• full support for both light and dark modes
• responsive design for mobile devices
• simple integration into your existing Zinq projects

Recent Improvements

We've also rolled out some quality-of-life updates to enhance your development experience:

• Modal Improvements: you can now close modals by dispatching a close-modal event
• Enhanced Dropdown Links: added new closeOnClick prop - automatically closes the dropdown when a link is clicked

Give the new Livewire WYSIWYG Editor a try in your next project and let us know what you think!

Introducing the First Zinq Template: Application Starter

We’re excited to announce the launch of our first Zinq template! Designed with web applications and SaaS products in mind, this layout is the perfect starting point for your next project.

The template works seamlessly with Zinq components—just publish the provided layout and use it in your view file. From there, you can leverage Zinq components to build your app’s content.

View Application Layout →

Start building faster with Zinq today and bring your web applications to life.

The zinq:tab now can be used as a link

Alongside this release, we’ve added a new feature to the zinq:tab component. While it still works as a tab-switching mechanism by default, you can now use it as a link by providing an href attribute. This allows you to navigate to a specified URL directly. It’s a small addition that makes the component even more versatile for your projects.

<zinq:tabs>
    <zinq:tabs.nav>
        <zinq:tab href="https://zinq.dev/docs">Docs</zinq:tab>
        <zinq:tab>Demo</zinq:tab>
    </zinq:tabs.nav>
    ....
</zinq:tabs>

With the latest update to Zinq, we’ve introduced some new features and fixes to enhance your development experience. Here’s what’s new:

New Features

Enhanced Button Component

The Button component now supports the Livewire wire:target attribute, allowing you to explicitly define which actions trigger the button’s loading state. This provides more control and precision in your Livewire-powered projects.

Dynamic Field Addition with Eloquent Form Builder

The Eloquent Form Builder now includes the new add method, enabling you to dynamically add fields to a form generated from an Eloquent model.

For example: If you have a Post model representing a blog post, but its content is stored in .md files on the server, your model might not include a content attribute. With the add method, you can easily add a dynamic form field for content and save it in any way you need.

->add(Textarea::make('content'))

Learn more about new add method on documentation page.

This flexibility makes it easier to handle non-standard data while leveraging Zinq’s powerful form-building capabilities.

Support for Decimal Columns in Eloquent Form Builder

The Eloquent Form Builder now automatically recognizes columns with the decimal type in your Eloquent models. It will generate an appropriate input component for these attributes, simplifying the process of creating forms for models with decimal-based data.

Introducing the Zinq Blog

We’ve launched the Zinq Blog to keep you informed about everything happening with Zinq! From new features to upcoming releases, you’ll be able to stay up to date and start leveraging the latest improvements right away.

Fixes and Adjustments

• Attribute Overriding in Form Components: Fixed an issue with the attribute('type', 'text') method in Form Builder components, which previously merged attributes instead of overriding them.
• Label Alignment for Radio Buttons and Checkboxes: Improved the alignment of labels in radio and checkbox components to ensure a polished and consistent appearance.

These updates bring more flexibility, reliability, and control to your Zinq projects. Be sure to check the documentation for detailed examples and let us know how these improvements help you in your development workflow!

We’re excited to unveil the Form Builder, a powerful new tool designed to minimize the time spent on creating forms. Whether you’re building simple or complex forms, this first version of the Form Builder is packed with functionality to drastically reduce implementation time while maintaining flexibility and customization.

What Is the Form Builder?

At its core, the Form Builder is a feature that helps developers create forms with ease and efficiency. It provides two powerful ways to build forms:

• Manual Form Creation: Using dedicated form components to define your form structure.
• Automatic Form Generation: Leveraging Eloquent models to generate complete forms with just one line of code.

Under the hood, every form component is a normal Zinq component, meaning you have access to the full range of configuration and customization options.

Custom Form Builder: Total Control, Simplified

If you prefer to design forms manually, the Form Builder provides an intuitive and flexible approach. Simply define your form’s structure using Zinq’s dedicated form components, and you’re ready to go.

Learn More about Custom Form Builder on dedicated documentation page.

This method is perfect for developers who need precise control over their forms while still benefiting from the speed and consistency of reusable components.

Eloquent Form Builder: Magic with One Line of Code

For maximum efficiency, the Eloquent Form Builder takes things to the next level. Instead of defining each form field manually, you can generate a complete form based on your Eloquent model with a single line of code:

use Mattbit\Zinq\Form\EloquentForm;

...

return EloquentForm::make(Customer::class);

Learn More about Eloquent Form Builder on dedicated documentation page.

With this tool, creating forms is no longer a tedious task - it’s almost magical.

The Zinq Form Builder is just getting started, and we can’t wait to see how it transforms the way you build forms. Be sure to explore the documentation for detailed examples and share your feedback - we’re always listening!

In this release, we’ve added radio buttons and switches to Zinq’s component library! These essential UI elements are staples in most projects, and we’ve ensured they meet Zinq’s high standards for design and functionality.

Radio Buttons: Choose One, Clearly

Radio buttons are the go-to choice when you need users to select one option from a list of mutually exclusive choices. They are most effective when:

• Options are concise and clearly defined.
• Users need to make a single, definitive selection.

Here’s why they’re ideal:

• Clarity: Each option is visible, making the choices straightforward.
• Usability: They’re intuitive and simple to navigate, especially for small sets of options.

Learn More about Radio component on dedicated documentation page.

Whether it’s choosing a payment method, selecting a category, or deciding on a preference, radio buttons ensure the experience is smooth and user-friendly.

Toggles: Intuitive On/Off Actions

The toggle component, also known as a switch, is an excellent alternative to checkboxes when dealing with binary actions. It’s best suited for scenarios where the choice is immediate, such as:

• Enabling or disabling a feature.
• Turning a setting on or off.

Why use toggles?

• Instant Feedback: Toggles emphasize the action and its immediate effect.
• User Expectation: They are more visually aligned with on/off states, improving UX for quick decisions.

Learn More about Toggle component on dedicated documentation page.

While checkboxes allow multiple selections and work well in forms, toggles shine in settings or scenarios where a single binary action is required.

Both components are meticulously crafted to work seamlessly in light and dark modes, ensuring a polished experience across all projects.

We’re thrilled to announce the release of the Card component in Zinq! This new addition is designed to highlight specific elements in your project with style and structure.

The Card component is perfect for:

• Showcasing content in a structured and visually appealing way.
• Linking to key sections, like settings or configuration pages.
• Displaying statistics or data in a clean, organized format.

Flexible and Polished Design

The Card component comes in multiple variants, ensuring you can find the perfect style for your needs. As with everything in Zinq, we’ve paid close attention to detail, so the component looks flawless in both light and dark modes.

Learn More

For a complete breakdown of available options and customization details, check out the dedicated documentation page.

We can’t wait to see how you use the Card component to enhance your projects. Be sure to share your feedback with us!