Getting Started
This guide outlines how to access and utilize the Hyvä UI component library for your Hyvä theme.
Access
Unlike typical dependencies, Hyvä UI isn't installed directly within your project. Instead, individual components are selectively copied into your theme for customization.
To ensure access is restricted to Hyvä license holders, component access is managed through Composer:
If you have a configured Hyvä Theme Packagist key, simply run:
Composer action for Hyvä Theme v1.1.X Users (Tailwind CSS & AlpineJS v2):
Hyvä-Themes License Holders with GitLab Access:
If you have a Hyvä-Themes license and have gitlab access as a partner/contributor, you can find the UI Elements at https://gitlab.hyva.io/hyva-themes/ui.
Usage
Each Hyvä UI component comes with a dedicated README.md file within its folder.
This file provides detailed instructions specific to that component.
For most components, usage simply involves copying the template file into your Hyvä theme, potentially followed by adjustments to Tailwind configuration.
Important Note
Do not clone the Hyvä UI repository directly into your Magento project, especially within your theme!
This approach could lead to issues like:
- Bloated styles.css: unnecessary Tailwind classes might be generated, increasing your theme's stylesheet size.
- Potential breakages: future updates to Hyvä UI might involve component removal, renaming, or changes that could break your site.
The recommended practice is to copy individual templates into your project and tailor them to your specific needs.
For a more in-depth explanation, refer to the Demo Videos.