Skip to content

Getting Started with Hyvä UI

Hyvä UI is a comprehensive UI library that integrates both PHP and UI logic, offering a more complete development package compared to traditional UI libraries.

To learn more about what Hyvä UI offers, please visit our What is Hyvä UI page.

Installation

Hyvä UI is free with a Hyvä License and can be installed via Composer or by downloading it from your Packagist page.

Composer Installation

If you have a configured Hyvä Theme Packagist key, install Hyvä UI by running the following command:

composer require hyva-themes/hyva-ui

Download from Packagist

  1. Navigate to your Packagist page: https://packagist.com/customers/acme.hyva-themes/packages. Note: Replace acme with your webshop name.
  2. Search for hyva-themes/hyva-ui.
  3. Go to the package page for hyva-themes/hyva-ui.
  4. Click the download icon on the page (see the screenshot below).

Screenshot showing the download icon for hyva-ui on Packagist

Usage

Each Hyvä UI component includes a dedicated README.md file within its respective folder.

This file provides detailed, component-specific instructions for usage.

In most cases, using a component involves copying its template file into your Hyvä theme and potentially adjusting your Tailwind configuration.

Important Considerations

Avoid directly cloning the Hyvä UI repository into your Magento project, especially within your theme.

This practice can lead to several issues, including:

  • Bloated Stylesheet: Unnecessary Tailwind classes might be generated, increasing the size of your theme's styles.css file.
  • Potential Compatibility Issues: Future updates to Hyvä UI could introduce breaking changes, such as component removal, renaming, or modifications that might disrupt your website.

The recommended approach is to copy individual component templates into your project and customize them to meet your specific requirements.

For a more in-depth explanation, please refer to our Demo Videos.